前端开发者学堂 - fedev.cn

React几种基本配置方案

#译文#React
发布于 大漠

对于没有使用过React的同学总觉得它复杂，但在现实中，使用React并不困难。就我个人而言，学习React应该基于创建项目特定类型的设置细节之上(比如Webpack、Redux、ES6、JSX、Babel等)，而不是一下子就去忙于理解所有的设置项。

在这篇文章中列出了有关于React方面的七种设置。大部分的设置我都将会向大家展示，但总的来说，这并不困难。接下来的内容从简单到复杂，介绍React的设置。

方法1：只使用React，不使用JSX

如果在React项目中决定不使用JSX，又想渲染HTML DOM。那么在准备写React代码之前，在你的HTML页面需要引入一个react.js和react-dom.js文件。

react.js文件是创建React节点和组件所需要的核心文件。当你打算在一个HTML中渲染一个组件（比如DOM）还需要react-dom.js文件。react-dom.js文件依赖于react.js文件，所以在引入react-dom.js文件之前要先引入react.js文件。比如下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="./src/js/react.js"></script>
    <script src="./src/js/react-dom.js"></script>
</head>
<body>
    
</body>
</html>

在HTML页面中使用react.js和react-dom.js文件，就可以创建React节点或组件，然后渲染成DOM。接下来创建一个名叫HelloMessage的React组件，并且放到<div>的React节点中，最后渲染到<div id="app"></div>的HTML元素内。

<body>
    <div id="app"></div>
    <script>
        var HelloMessage = React.createClass ({
            displayName: "HelloMessage",
            render: function render () {
                return React.createElement("div", null, "Hello ", this.props.name);
            }
        });
        ReactDOM.render(React.createElement(HelloMessage, {name: "John"}), document.getElementById("app"));
    </script>
</body>

这样使用不需利用JSX或ES 2015。

方法2：通过browser.js转换JSX/ES 2015(非生产设置)

可以按前面的方式，在HTML页面中添加一个额外的脚本，允许使用JSX/ES2015。然后在客户端使用Babel来转换JSX并不是一个适于生产。在客户端运行时处理JSX/ES2015时负担很重，但对于非生产环境下在HTML中添加browser.js文件，可以在客户端中运行时转换JSX。

在HTML页面中使用JSX来实现前面示例中HelloMessage组件:

<body>
    <div id="app"></div>
    <script type="text/babel">
        const HelloMessage = React.createClass({
            render: function (){
                return <div>Hello {this.props.name}</div>;
            }
        });
        ReactDOM.render(<HelloMessage name="Jhon" />, document.getElementById("app"));
    </script>
</body>

代码的转换发生了，那是因为我们引入了browser.js的Babel文件，并且给<script>元素设置type属性的值为type="text/babel"。当browser.js加载后将找到有关于type="text/babel"的脚本，并且将JSX/ES2015转换成ES5 JavaScript。例如，下面代码就是转换后的代码：

var HelloMessage = React.createClass({
    displayName: "HelloMessage",

    render: function render() {
        return React.createElement(
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
});

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.getElementById('app'));

注意，对于Babel项目，使用Babel6将不再需要提供browser.js就可以将JSX代码转换成ES5代码。因此，如果你使用的是老版本的Babel(比如5.8.23版本),需要提供browser.js文件转换JSX/ES。*

方法3：通过system.js/browser.js在浏览器中转找JSX/ES 2015（非生产设置）

接下来可能让你有所激动，至少我是这样。通过jspm CDN加载SystemJS，在运行浏览器时将会解决有关于React，JSX和Babel（比如动态加载）的一些细节。

你所需要做的就是提供下面这样的一个HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://jspm.io/system@0.19.js"></script>
    <script>
        System.config({
            transpiler: "babel",
            babelOptions: {}
        });
        System.import('./main.js');
    </script>
</head>
<body>

</body>
</html>

在main.js文件中引入所需要依赖的文件：

import React from "react"
import ReactDOM from "react-dom"

const Hello = ({name}) => <h1>Hello {name}!</h1>

ReactDOM.render(
    <Hello name={"dude"} />,
    document.body.appendChild(document.createElement("div"))
)

你不需要安装或下载任何文件就能正常运行。当页面加载之后，它将获得所有必要的依赖关系，包括Babel。可以通过Chrome的开发者工具中的"source"面板查看到所加载的一切：

React设置

jspn CDN工作原理就类似于npmcdn.com。使用depCache injnection发送压缩后源码覆盖HTTP/2，使用这种方法可能适合在生产环境中使用。

现在你可能想这只会使用名为jspm包（即jspm注册表中定义过的包），其实你错了。你可以绕过jspm，通过npm来安装包。当然，你必须通过一个package.json文件告诉jspm你要安装的包。例如你可以使用这种方式安装ES 2015模块。

import picturefill from 'github:scottjehl/picturefill'
import async from 'npm:async'

这些开发算是强大的，但在生产中也有一些潜在的未知工具，比如SPDY和HTTP/2。

方法4：使用在线编辑器创建React

当你需要快速设置React，并且分享React的“伪代码”(pseudocode)，你可在在线编辑器(比如，jsbin或jsfiddle)上操作，比如前面的一些设置都可以在上面编辑。

最快和最容易的设置React可以使用JS Bin在线编辑器，下面的视频演示了如何在JS Bin是写React代码。

方法5：在开发过程中使用Babel-cli和npm转换JSX/ES 2015

在整个代码开发过程中，可以使用Babel-cli、Bable预设/插件和npm将JSX/ES 2015代码转成ES5代码。

接下来分七个步骤来介绍整个实现过程。或者使用Github上预设的代码根据下面四个步骤来完成整个设置。

  • 克隆/下载整个代码
  • 遵循下面的步骤一
  • 在克隆下来的项目目录下运行npm install
  • 遵循下面的最后一步

第一步：确定安装了node.js和npm，然后安装全局packages

在这一步中，确保你已经安装了node.js和npm，并且确保其版本是最新的稳定版本。然后运行下面的命令安装browser-sync。

npm install browser-sync -g

如果安装全局的包有可能需要在命令前添加sudo。

第二步：创建目录和文件

在你本地文件系统中创建目录并且按照下面的方式创建子目录和文件：

├── index.html
├── build
├── src
│    └── app.js
└── package.json

打开package.json文件，并且创建一个空的JSON对象：

{

}

第三步：通过npm安装依赖关系

在第二步创建的根目录下运行下面的npm命令：

npm install babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync --save-dev

和：

npm install react react-dom --save

运行上面两行命令将会安装必要的npm包。现在根目录中增加了一个node_modules文件夹，并且需要的npm包都放在这个文件夹下：

├── index.html
├── build
├── src
│   └── app.js
├── node_modules
│   ├── babel-cli
│   ├── babel-preset-es2015
│   ├── babel-preset-react
│   ├── babel-preset-stage-0
│   ├── browser-sync
│   ├── react
│   └── react-dom
└── package.json

第四步：配置Babel和npm

打开package.json文件，你看到的样子像下面这样：

{
  "devDependencies": {
    "babel-cli": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "browser-sync": "^2.12.8"
  },
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

在package.json文件中添加Babel和脚本配置：

{
    "scripts": {
        "babel": "babel src --out-dir build -w",
        "server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"**/*.css\" \"build/**/*.js\" "
    },
    "babel": {
        "presets": [
            "es2015",
            "react"
        ],
        "sourceMaps": false
    },
    "devDependencies": {
        "babel-cli": "^6.9.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "browser-sync": "^2.12.8"
    },
    "dependencies": {
        "react": "^15.1.0",
        "react-dom": "^15.1.0"
    }
}

运行npm cli，更新Babel配置，并且提供两个script。

第五步： 更新index.html

打开index.html文件，并且将下面的代码复制到HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React via Babel</title>
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="build/app.js"></script>
</body>
</html>

注意：从node_modules目录中添加react.js和react-dom.js文件。

第六步：更新app.js

打开app.js文件，并且将下面的JavaScript代码复制到app.js文件中：

const HelloMessage = React.createClass({
    render: function() {
        return <div > Hello { this.props.name } < /div>;
    }
});

ReactDOM.render( < HelloMessage name = "John" / > , document.getElementById('app'));

第七步：运行Babel和Server

在根目录下运行下面的命令：

npm run babel

运行这两行命令开发的代码就能跑起来了。

如果你遵循所有的步骤操作，并且没有出错的话，那么Browsersync应该会打开浏览器在http://localhost:4000这个地址上加载index.html和app.js。Babel和Browsersync会运行所做的修改。

这个设置不是根据你想要创建一个SPA构建的，而是假定你想利用JSX和ES 2015创建HTML页面。

方法6：通过Webpack和Babel-core在开发过程中转换JSX/ES 2015

这个设置是使用Webpack和几个加载器将JSX/ES 2015代码转换成ES5代码。通过使用Webpack，JavaScript模块可以使用ES2015模块加载格式、属性转换和捆绑。

将通过下面七个步骤来完成整个配置。或者从GitHub仓库中预载配置下，按下面的四步完成整个配置。

  • 克隆/下载整个代码
  • 根据下面的第一步做相应操作
  • 在克隆下来的项目目录下运行npm install命令
  • 根据下面的最后一步做相应操作

第一步：确定安装了node.js和npm，然后安装全局packages

在这一步中，确保你已经安装了node.js和npm，并且确保其版本是最新的稳定版本。然后运行下面的命令安装Webpack和browser-sync。

npm install webpack browser-sync -g

有可能全局安装需要在命令前添加“sudo”。

第二步：创建目录和文件

在本地项目中创建需要目录，并且在其下面创建子目录和文件。

├── build
├── index.html
├── package.json
├── src
│   ├── app.js
│   ├── app.css
│   └── math.js
└── webpack.config.js

打开package.json文件，并且创建一个空的JSON对象：

{

}

第三步：通过npm安装依赖关系

在第二步创建的根目录下运行下面的npm命令安装所需要的依赖关系:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync css-loader extract-text-webpack-plugin style-loader webpack --save-dev

接下来运行：

npm install react react-dom @telerik/kendo-react-buttons --save

运行上面两行命令将会安装必要的npm包。现在根目录中增加了一个node_modules文件夹，并且将需要的npm包都放在这个文件夹下：

├── build
├── index.html
├── node_modules
│   ├── @telerik
│   ├── babel-core
│   ├── babel-loader
│   ├── babel-preset-es2015
│   ├── babel-preset-react
│   ├── babel-preset-stage-0
│   ├── browser-sync
│   ├── css-loader
│   ├── extract-text-webpack-plugin
│   ├── react
│   ├── react-dom
│   ├── style-loader
│   └── webpack
├── package.json
├── src
│   ├── app.js
│   ├── app.css
│   └── math.js
└── webpack.config.js

第四步：更新app.js，app.css，math.js和index.html

打开app.js文件，并且添加下面的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import * as KendoReactButtons from '@telerik/kendo-react-buttons';
import '@telerik/kendo-react-buttons/dist/npm/css/main.css';
import { square, diag } from './math.js';
import './app.css';

console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: false
        };
    }
    onClick = () => {
        this.setState({ disabled: !this.state.disabled });
    }
    render() {
        return (
            <div>
                <KendoReactButtons.Button onClick={this.onClick}>Button 1</KendoReactButtons.Button>
                <KendoReactButtons.Button disabled={this.state.disabled}>Button 2</KendoReactButtons.Button>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <p>Button</p>
        <KendoReactButtons.Button>Button test</KendoReactButtons.Button>
        <p>Disabled Button</p>
        <KendoReactButtons.Button disabled>Button</KendoReactButtons.Button>
        <p>Primary Button</p>
        <KendoReactButtons.Button primary>Primary Button</KendoReactButtons.Button>
        <p>Button with icon</p>
        <KendoReactButtons.Button icon="refresh">Refresh</KendoReactButtons.Button>
        <p>Button with icon (imageUrl)</p>
        <KendoReactButtons.Button imageUrl="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Snowboarding</KendoReactButtons.Button>
        <p>Button with a custom icon (iconClass) [FontAwesome icon]</p>
        <KendoReactButtons.Button iconClass="fa fa-key fa-fw">FontAwesome icon</KendoReactButtons.Button>
        <p>Toggleable Button</p>
        <KendoReactButtons.Button togglable>Togglable button</KendoReactButtons.Button>
        <p>onClick event handler</p>
        <ButtonContainer />
    </div>,
    document.getElementById('app')
);

打开app.css文件，并且添加下面的代码：

body{
    margin:50px;
}

打开math.js文件，并且添加下面的代码：

export const sqrt = Math.sqrt;

export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

打开index.html文件，并且添加下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./build/style.css">
</head>
<body>
    <div id="app"></div>
    <script src="./build/appBundle.js"></script>
</body>
</html>

第五步：更新webpack.config.js

打开webpack.config.js文件，并且添加下面的代码：

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: ['./src/app.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'appBundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }, {
            loader: 'babel-loader',
            exclude: /node_modules/,
            test: /\.js$/,
            query: {
                presets: ['es2015', 'react', 'stage-0'],
            },
        }]
    },
    plugins: [
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]
};

第六步：更新package.json

打开package.json文件，你可以看到文件中包括像下面这样的代码：

{
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "browser-sync": "^2.12.8",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "@telerik/kendo-react-buttons": "^0.1.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

更且在package.json文件中添加scripts相关配置：

{
    "scripts": {
        "webpack": "webpack --watch",
        "server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"build/**/*.css\" \"build/**/*.js\" "
    },
    "devDependencies": {
        "babel-core": "^6.9.0",
        "babel-loader": "^6.2.4",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-0": "^6.5.0",
        "browser-sync": "^2.12.8",
        "css-loader": "^0.23.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.1"
    },
    "dependencies": {
        "@telerik/kendo-react-buttons": "^0.1.0",
        "react": "^15.1.0",
        "react-dom": "^15.1.0"
    }
}

第七步：运行webpack和server

在你项目根目录下运行下面的npm命令：

npm run webpack

同时打开另一个命令窗口运行下面的npm命令：

npm run server

运行这两行命令开发的代码就能跑起来了。

如果你遵循所有的步骤操作，并且没有出错的话，那么Browsersync应该会打开浏览器在http://localhost:4000这个地址上加载index.html和app.js。Webpack和Browsersync会运行所做的修改。

这只是设置中的冰山一角。根据您正在构建的应用程序的范围和规模，这个Webpack设置只是最基本的，你可以在很多方面进行配置和重新配置。完全可以从这个基本的配置开始，然后深入学习Webpack。

方法7：通过Babel-core和SystemJs/jspm.io在开发中转换JSX/ES 2015

这个React设置使用SystemJs/jspm-cli转换JSX/ES 2015，加载、和捆绑JavaScript模块和CSS样式。

我想我已经把最好的方案留到最后面了。主要是因为SystemJS/jspm处理配置文件和通过cli的解决方案将是未来的趋势。

接下来通过下面九个步骤来完成整个配置。或者从GitHub仓库中下载已经预设好的配置，并且按下面的四个步骤完成整个配置。

  • 克隆/下载整个代码
  • 遵循下面的步骤一操作
  • 在克隆下来的项目目录下运行npm install && jspm
  • 遵循下面的步骤八操作

步骤一：确保安装node.js和npm，然后安装全局packages

在这一步中，确保你已经安装了node.js和npm，并且确保其版本是最新的稳定版本。然后运行下面的命令安装jspm和browser-sync。

npm install jspm browser-sync -g

步骤二：创建文件夹和文件

在你的本地创建项目目录并且在其下面创建相关的子目录和文件：

├── app.js
├── index.html
├── js
│   └── math.js
├── package.json
└── style
    └── app.css

打开package.json文件，并且创建一个空的JSON对象：

{
    
}

步骤三：安装npm依赖关系

在根目录下运行下面的命令：

npm install jspm browser-sync --save-dev

运行上面命令将会安装必要的npm包。现在项目根目录下添加了node_modules和相应的npm包：

├── app.js
├── index.html
├── js
│   └── math.js
├── node_modules
│   ├── browser-sync
│   └── jspm
├── package.json
└── style
    └── app.css

步骤四：初始化SystemJS/JSPM设置

在你项目根目录下运行下面的jspm-cli命令：

jspm init

将会问你9个问题，每个问题你只需要按回车键就行了。

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

将会在根目录创建一个config.js文件和一个jspm_packagees文件夹。这时项目的目录结构像这样：

├── app.js
├── config.js
├── index.html
├── js
│   └── math.js
├── jspm_packages
│   ├── github
│   ├── npm
│   ├── system-csp-production.js
│   ├── system-csp-production.js.map
│   ├── system-csp-production.src.js
│   ├── system-polyfills.js
│   ├── system-polyfills.js.map
│   ├── system-polyfills.src.js
│   ├── system.js
│   ├── system.js.map
│   └── system.src.js
├── node_modules
│   ├── browser-sync
│   └── jspm
├── package.json
└── style
    └── app.css

打开config.js文件，并且更新babelOptions对象,将下面的代码：

babelOptions: {
    "optional": [
        "runtime",
        "optimisation.modules.system"
    ]
},

更新为：

babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ],
    "stage": 0
},

步骤五： 更新app.js，app.css，math.js和index.html

打开app.js文件，并且添加下面的代码：

import './style/app.css!'; //note, had to add the !
import React from 'react';
import ReactDOM from 'react-dom';
import * as KendoReactButtons from '@telerik/kendo-react-buttons';
import '@telerik/kendo-react-buttons/dist/npm/css/main.css!'; //note, had to add the !
import { square, diag } from './js/math.js';

console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: false
        };
    }
    onClick = () => {
        this.setState({ disabled: !this.state.disabled });
    }
    render() {
        return (
            <div>
                <KendoReactButtons.Button onClick={this.onClick}>Button 1</KendoReactButtons.Button>
                <KendoReactButtons.Button disabled={this.state.disabled}>Button 2</KendoReactButtons.Button>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <p>Button</p>
        <KendoReactButtons.Button>Button test</KendoReactButtons.Button>
        <p>Disabled Button</p>
        <KendoReactButtons.Button disabled>Button</KendoReactButtons.Button>
        <p>Primary Button</p>
        <KendoReactButtons.Button primary>Primary Button</KendoReactButtons.Button>
        <p>Button with icon</p>
        <KendoReactButtons.Button icon="refresh">Refresh</KendoReactButtons.Button>
        <p>Button with icon (imageUrl)</p>
        <KendoReactButtons.Button imageUrl="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Snowboarding</KendoReactButtons.Button>
        <p>Button with a custom icon (iconClass) [FontAwesome icon]</p>
        <KendoReactButtons.Button iconClass="fa fa-key fa-fw">FontAwesome icon</KendoReactButtons.Button>
        <p>Toggleable Button</p>
        <KendoReactButtons.Button togglable>Togglable button</KendoReactButtons.Button>
        <p>onClick event handler</p>
        <ButtonContainer />
    </div>,
    document.getElementById('app')
);

打开app.css文件，并且添加下面的代码：

body{
    margin:50px;
}

打开math.js文件，并且添加下面的代码：

export const sqrt = Math.sqrt;

export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

打开index.html文件，并且添加下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>systemJS/jspm</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
    <div id="app"></div>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
            System.import('app.js');
    </script>
</body>
</html>

步骤六： 使用jspm-cli安装开发包

在你项目根目录下运行下面的jspm-cli命令：

jspm install react react-dom css npm:@telerik/kendo-react-buttons

上面的命令将在jspm_packagees目录下安装React，react-dom，jspm css插件和Kendo UI React按钮。这些依赖关系将会放到package.json文件中。另外，jspm配置文件也将会对应更新，以便安装需要的安装包，而且不需要手动更新config.js文件。

更新后的jspm_packagees目录结构看起来像下面这样：

├── jspm_packages
│   ├── github
│   │   ├── jspm
│   │   └── systemjs
│   ├── npm
│   │   ├── @telerik
│   │   ├── Base64@0.2.1
│   │   ├── Base64@0.2.1.js
│   │   ├── asap@2.0.3
│   │   ├── asap@2.0.3.js
│   │   ├── assert@1.3.0
│   │   ├── assert@1.3.0.js
│   │   ├── babel-core@5.8.38
│   │   ├── babel-core@5.8.38.js
│   │   ├── babel-runtime@5.8.38
│   │   ├── base64-js@0.0.8
│   │   ├── base64-js@0.0.8.js
│   │   ├── browserify-zlib@0.1.4
│   │   ├── browserify-zlib@0.1.4.js
│   │   ├── buffer@3.6.0
│   │   ├── buffer@3.6.0.js
│   │   ├── classnames@2.2.5
│   │   ├── classnames@2.2.5.js
│   │   ├── core-js@1.2.6
│   │   ├── core-js@1.2.6.js
│   │   ├── core-util-is@1.0.2
│   │   ├── core-util-is@1.0.2.js
│   │   ├── domain-browser@1.1.7
│   │   ├── domain-browser@1.1.7.js
│   │   ├── encoding@0.1.12
│   │   ├── encoding@0.1.12.js
│   │   ├── events@1.0.2
│   │   ├── events@1.0.2.js
│   │   ├── fbjs@0.6.1
│   │   ├── fbjs@0.6.1.js
│   │   ├── fbjs@0.8.2
│   │   ├── fbjs@0.8.2.js
│   │   ├── https-browserify@0.0.0
│   │   ├── https-browserify@0.0.0.js
│   │   ├── iconv-lite@0.4.13
│   │   ├── iconv-lite@0.4.13.js
│   │   ├── ieee754@1.1.6
│   │   ├── ieee754@1.1.6.js
│   │   ├── inherits@2.0.1
│   │   ├── inherits@2.0.1.js
│   │   ├── is-stream@1.1.0
│   │   ├── is-stream@1.1.0.js
│   │   ├── isarray@0.0.1
│   │   ├── isarray@0.0.1.js
│   │   ├── isarray@1.0.0
│   │   ├── isarray@1.0.0.js
│   │   ├── isomorphic-fetch@2.2.1
│   │   ├── isomorphic-fetch@2.2.1.js
│   │   ├── js-tokens@1.0.3
│   │   ├── js-tokens@1.0.3.js
│   │   ├── loose-envify@1.2.0
│   │   ├── loose-envify@1.2.0.js
│   │   ├── node-fetch@1.5.2
│   │   ├── node-fetch@1.5.2.js
│   │   ├── object-assign@4.1.0
│   │   ├── object-assign@4.1.0.js
│   │   ├── pako@0.2.8
│   │   ├── pako@0.2.8.js
│   │   ├── path-browserify@0.0.0
│   │   ├── path-browserify@0.0.0.js
│   │   ├── process-nextick-args@1.0.7
│   │   ├── process-nextick-args@1.0.7.js
│   │   ├── process@0.11.3
│   │   ├── process@0.11.3.js
│   │   ├── promise@7.1.1
│   │   ├── promise@7.1.1.js
│   │   ├── punycode@1.3.2
│   │   ├── punycode@1.3.2.js
│   │   ├── querystring@0.2.0
│   │   ├── querystring@0.2.0.js
│   │   ├── react-dom@0.14.8
│   │   ├── react-dom@0.14.8.js
│   │   ├── react-dom@15.0.2
│   │   ├── react-dom@15.0.2.js
│   │   ├── react@0.14.8
│   │   ├── react@0.14.8.js
│   │   ├── react@15.0.2
│   │   ├── react@15.0.2.js
│   │   ├── readable-stream@1.1.14
│   │   ├── readable-stream@1.1.14.js
│   │   ├── readable-stream@2.1.2
│   │   ├── readable-stream@2.1.2.js
│   │   ├── stream-browserify@1.0.0
│   │   ├── stream-browserify@1.0.0.js
│   │   ├── string_decoder@0.10.31
│   │   ├── string_decoder@0.10.31.js
│   │   ├── ua-parser-js@0.7.10
│   │   ├── ua-parser-js@0.7.10.js
│   │   ├── url@0.10.3
│   │   ├── url@0.10.3.js
│   │   ├── util-deprecate@1.0.2
│   │   ├── util-deprecate@1.0.2.js
│   │   ├── util@0.10.3
│   │   ├── util@0.10.3.js
│   │   ├── whatwg-fetch@1.0.0
│   │   └── whatwg-fetch@1.0.0.js
│   ├── system-csp-production.js
│   ├── system-csp-production.js.map
│   ├── system-csp-production.src.js
│   ├── system-polyfills.js
│   ├── system-polyfills.js.map
│   ├── system-polyfills.src.js
│   ├── system.js
│   ├── system.js.map
│   └── system.src.js

步骤七： 更新package.json

打开package.json文件，代码看起来像下面这样：

{
  "devDependencies": {
    "browser-sync": "^2.12.8",
    "jspm": "^0.16.35"
  },
  "jspm": {
    "dependencies": {
      "@telerik/kendo-react-buttons": "npm:@telerik/kendo-react-buttons@^0.1.0",
      "css": "github:systemjs/plugin-css@^0.1.22",
      "react": "npm:react@^15.1.0",
      "react-dom": "npm:react-dom@^15.1.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  }
}

在package.json文件中添加scripts相关配置：

{
    "scripts": {
        "bundle": "jspm bundle app.js --inject",
        "unBundle": "jspm unbundle",
        "server": "browser-sync --port 4000 --no-inject-changes start --server --files \"**/*.html\" \"style/**/*.css\" \"js/**/*.js\" "
    },
    "devDependencies": {
        "browser-sync": "^2.12.8",
        "jspm": "^0.16.35"
    },
    "jspm": {
        "dependencies": {
            "@telerik/kendo-react-buttons": "npm:@telerik/kendo-react-buttons@^0.1.0",
            "css": "github:systemjs/plugin-css@^0.1.22",
            "react": "npm:react@^15.1.0",
            "react-dom": "npm:react-dom@^15.1.0"
        },
        "devDependencies": {
            "babel": "npm:babel-core@^5.8.24",
            "babel-runtime": "npm:babel-runtime@^5.8.24",
            "core-js": "npm:core-js@^1.1.4"
        }
    }
}

步骤八：运行服务器

在你项目根目录下运行下面的jspm-cli命令：

npm run server

如果你遵循所有的步骤操作，并且没有出错的话，那么Browsersync应该会打开浏览器在http://localhost:4000地址将加载`index.html`和`app.js`文件。而且所做的任何修改Browsersync将会自动刷新浏览器。

步骤九：捆绑模式

SystemJS/jspm提供了一个捆绑模式。打开一个新的命令窗口，并且在项目根目录下运行下面的npm命令：

npm run bundle

如果要解除捆绑模式，可以执行下面的命令：

npm run unBundle

开始使用React

希望上面这七种有关于React的开发配置对你学习React有所帮助。一切学习都是从最基本的开始，掌握了基础配置之后，就可以在这个配置环境上使用React，然后学习有关于React更复杂的技能。

本文根据@Cody Lindley的《Taming the React Setup》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://developer.telerik.com/featured/taming-react-setup/。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/react/taming-react-setup.htmlNike Air Flight Huarache