这本书分成许多章节。我曾经试着让每个章节的阅读时间保持在5分钟左右，有一些章节包含着更复杂的主题所以会花费10分钟。这样设计能让你按照想法随时停下和开始，如果你没有完全理解某个章节能更快的找到问题，从一个章节到下一个章节的跳跃也会比较小。
注意：如果你看到下面带有文件名的代码块，意味着你要将这些代码写入上面的文件里。
dist/somefile.js
把里面这些代码放到 dist文件夹下的somefile.js里
前面没有文件名的代码是用终端运行的，或者是一些作为参考的代码，作为参考的代码前面都会写上比如“下面的是伪代码”。有的时候你会看到一些带文件名的代码块在伪代码的上下文中，这是为了能更好地体现代码的功能。
举个例子，我可能会说"在正常情况下，这是你代码应该有的样子。":
一些代码
好了，解释的有点多了。如果你准备好了我们就开始，打开你的终端然后输入以下代码来创建你的项目根目录：
cd Desktop
mkdir hwr
cd hwr
npm init -y
如果你之前从来没用过命令行，推荐你在OSX平台上用Spotlight，windows平台上用Command Prompt，Linux平台，那就不用说了。
第一个命令会切换到你的桌面目录，这样能让你的项目容易被找到。
第二个命令创建了一个名为hwr的新文件夹。Hacking with React的缩写，名字可以随便取，问题不大。
注意：文件夹名称叫“react”会出问题，最好起正常一点的名字。
第三条命令进入了你新创建的文件夹，我们会在这里开始本教程的所有部分。这就是你的项目文件夹了，今后的所有终端命令都是在此目录下输入的。
最后一个命令用npm创建了一个新的项目， 这样准备工作就已经完成了：
创建一个项目的框架只需要4条命令。你需要适应使用终端命令，因为我们以后会用得更多。
在我们写代码之前，我们需要进行一些无聊的设置。很可惜这是无法避免的，不过同时这些设置是有很大用处的。你接下来几个小时都要花在这项目上，所以多花费5分钟让下面的工作更简单不也挺好的么。
在终端输入以下命令：
npm install --save-dev webpack webpack-dev-server react-hot-loader
npm install --save-dev babel-core babel-loader
npm install --save-dev babel-preset-es2015 babel-preset-react
npm install --save react react-dom history react-router
注意：如果npm报错command not found，这意味着你还没安装Node.js 你应该先去http://nodejs.cn/下一个。安装好了再试一遍。
注意：在中国大陆npm 命令下载是很慢的，可以通过淘宝镜像来提高安装速度。
这些指令会花费一些时间，因为你在下载一些小的程序依赖。前三条命令是只在我开发时需要的依赖，第四条是在生产和开发时都需要的依赖。
Babel是一种编译工具，能把React和ES6代码转换成通常的JS代码在浏览器里运行。因为ES6的很多新特性在浏览器里还没有得到支持，使用Babel能避免兼容性问题。
这些都安装好之后下一步是告诉这些工具如何合作。找到根目录下的package.json在"license": "ISC":中添加下面的代码:
package.json
"babel": {
"presets": [
"es2015",
"react"
]
},
注意：最后的逗号不能省略，如果你不知道添加到哪里，下面是一个完整的package.json
{
"name": "hwr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^2.0.1",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
}
}
最后一步是配置webpack，用来打包你的整个项目，部署到服务器上 。webpack配置文件webpack.config.js现在并不存在，所以要在根目录手动创建一个，它包含以下代码:
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
这是webpack运行时会读取的配置文件，它会将我们所有的源码打包成dist目录下的bundle.js (distribution的缩写)
我们还没有这个目录，所以请手动创建。同时创建src目录，source的缩写，这是我们放源码的地方。
我们在src目录下写代码，打包后的代码在dist目录。下一步是让我们的项目运行起来。在src下创建index.js文件，包含以下代码：
src/index.js
console.log('React is up and running!');
如果一切正常，代码运行后会在终端输出这句话。
注意，在现在版本的webpack下，上面的webpack.config.js会报错(作者写书的那个时代上面的配置是可用的（适用于webpack1.x）)，下面给出新的写法（适用于webpack2.x）：
var webpack = require('webpack');
var path = require("path");
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: [".js", ".json"]
},
resolveLoader: {
moduleExtensions: ["-loader"]
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
在dist目录下创建index.html文件：
dist/index.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
有两个值得注意的地方.
第一, <div id="app"></div> 是react组件的根目录。
第二，<script src="bundle.js"></script>是对打包后js文件的引用。
创建这两个文件之后，在终端运行webpack，运行结果如下：
Hash: 696d94eec4dc3cb40865
Version: webpack 1.12.9
Time: 1304ms
Asset Size Chunks Chunk Names
bundle.js 940 kB 0 [emitted] main
[0] multi main 52 bytes {0} [built]
+ 245 hidden modules
如果报错“command not found” 可以尝试以下命令，或用管理员权限运行npm install
sudo npm install -g webpack webpack-dev-server
这条命令为你的系统全局安装了2个重要组件，所以需要输入你的系统密码（除windows平台外）
希望这样能得到正确的结果。
