# blog_beginner-learn-react-webpack
**Repository Path**: ellipse/blog_beginner-learn-react-webpack
## Basic Information
- **Project Name**: blog_beginner-learn-react-webpack
- **Description**: 一步一脚印：新手学React-Webpack
http://misty.gitcafe.io/blog/beginner-learn-react-webpack/
- **Primary Language**: JavaScript
- **License**: EPL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2015-12-06
- **Last Updated**: 2020-12-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 一步一脚印：新手学React
[Git repo](http://git.oschina.net/ellipse/blog_beginner-learn-react-webpack)
## 1. 安装nodejs
## 2. 安装webpack(全局)
> npm install webpack -g
这样就可以在任何位置执行`webpack`命令
## 3. 初始化项目
在项目根目录下打开终端
> npm init
此时会在根目录自动生成package.json文件
在项目中安装webpack
> npm install webpack --save-dev
## 4. 创建基础代码
目录结构为
```
root
/src
/main.js
/webpack.config.js
/package.json
```
```javascript
// main.js
console.log("Hello World");
```
```javascript
// webpack.config.js
var path = require('path')
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/main.js')
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
}
}
```
在终端运行`webpack`，自动生成`./build/app.js`。
## 5. 增加jsx支持
> npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
新建文件`./src/main.jsx`
```javascript
(function(){
Hello World
;
})();
```
修改`webpack.config.js`
```javascript
var path = require('path')
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/main.js'),
jsx: path.resolve(__dirname, 'src/main.jsx') // New
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
module: { // New
loaders: [{
test: /\.jsx$/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}]
}
}
```
## 6. 增加cjsx支持（使用coffeescript）
> npm install cjsx-loader coffee-loader coffee-script --save-dev
新建文件`./src/main.cjsx`
```coffeescript
do -> Hello cjsx
```
修改`webpack.config.js`
```javascript
var path = require('path')
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/main.js'),
jsx: path.resolve(__dirname, 'src/main.jsx'),
cjsx: path.resolve(__dirname, 'src/main.cjsx')
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
module: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}, {
test: /\.cjsx$/,
loader: 'coffee!cjsx'
}]
}
}
```
执行webpack
## 7. 增加ReactJS
> npm install react react-dom --save
新建文件`./src/react.cjsx`
```coffeescript
React = require 'react'
ReactDOM = require 'react-dom'
Comp1 = React.createClass
render: -> Hello ReactJS
ReactDOM.render , document.body
```
修改`webpack.config.js`
```javascript
var path = require('path')
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/main.js'),
jsx: path.resolve(__dirname, 'src/main.jsx'),
cjsx: path.resolve(__dirname, 'src/main.cjsx'),
react: path.resolve(__dirname, 'src/react.cjsx')
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
module: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}, {
test: /\.cjsx$/,
loader: 'coffee!cjsx'
}]
}
}
```
执行webpack
## 8. 增加material-ui
> npm install material-ui --save
> npm install react-tap-event-plugin --save
新建文件`src/mui.cjsx`
```coffeescript
# src/mui.cjsx
React = require 'react'
ReactDOM = require 'react-dom'
RaisedButton = require 'material-ui/lib/raised-button'
Comp = React.createClass
render: ->
ReactDOM.render , document.getElementById('root')
```
运行`webpack`编译生成`build/mui.js`
新建文件`build/mui.html`
```html
Material-ui Sample
```
用浏览器打开`build/mui.html`，一个漂亮的Material Design风格按钮展现在眼前，大功告成。
## 9. 常见问题
___
### 未找到 npm/webpack 命令
检查一下PATH路径下有没有这两个程序，将程序所在的目录加入PATH。
加入PATH地方法：
> Windows
推荐一个工具RapidEE，很好用
> Linux
```shell
$ sudo gedit /etc/profile
// 在打开文件的最后一行加入
export PATH="/path/to/node-linux/bin":$PATH
```
## 10. 注意事项
- 不要用jsx-loader
导入react-dom时使用jsx-loader编译会导致失败，原因不明。