前文有对React+ES6知识进行了总结，下面正式进入实战。
温馨提示：为了能支持es6，请下载4.0以上版本的node.js。有了node和在node中集成的npm，为了加快框架的下载速度，建议输入以下命令切换至淘宝源：
npm config set registry http://registry.npm.taobao.org/
1、全局安装Webpack, Babel, Webpack-dev-server
cnpm install babel webpack webpack-dev-server -g
2、建立项目目录，用npm init 初始化
mkdir react-hello-world
cd react-hello-world
npm init
注：执行npm init命令时会让你输入各种项目信息，一般直接回车就好，会自动填写默认值。但是，要注意name不能跟我们的模块和项目文件目录同名。如果你要问我mkdir和cd是什么意思，我希望你回家种地，不要问我为什么。。。
我设置的名字是project
3、在项目中安装 react, react-dom
cnpm install react react-dom --save
注：请不要问我为什么一会用cnpm，一会用npm，因为我喜欢，没有为什么。。。
4、在项目中安装 Babel 转换器，需要用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 规范，包括了 Async/Await 这些新特性。
cnpm install babel-loader babel-core babel-preset-react babel-preset-latest --save
5、创建项目文件，main.js 即项目入口文件，App.js 即 React 组件主文件
touch index.html App.js main.js webpack.config.js
注：也许你对touch感觉很陌生，这是什么鬼！我也很陌生，自己可以手动新建上面四个文件。有人不知道手动吗？应该没有吧，呵呵呵。。。
6、到这一步，项目的结构应该如下图，如果有和下面的不一样的麻烦你把它变一样。。。至于怎么变，我不关心。。。
7、配置webpack，编辑webpack.config.js
module.exports={
entry: './main.js', // 入口文件路径
output: {
path: '/',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/, // babel 转换为兼容性的 js
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'latest']
}
}
]
}
}
如果你感觉看桌不舒服，下面把截图奉上：
8、开始写项目
index.html：
App.js：
main.js：
9、配置 npm scripts, 编辑 package.json，在"scripts"属性处添加一行：
"scripts": {
"start": "webpack-dev-server"
},
10、基本的框架搭建完毕，npm start 然后打开 http://localhost:3333 试试：
npm start
网友评论