简单易懂的React魔法(01):从头开始

这本书分成许多章节。我曾经试着让每个章节的阅读时间保持在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平台外）
希望这样能得到正确的结果。