ホームページ > 記事 > ウェブフロントエンド > React_html/css_WEB-ITnose のいくつかの基本的な構成スキーム
React_html/css_WEB-ITnose のいくつかの基本的な構成スキーム
- WBOYオリジナル
- 2016-06-21 08:47:201238ブラウズ
对于没有使用过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组件，并且放到 dc6dce4a544fdca2df29d5ac0ea9906b 的React节点中，最后渲染到 0668f9b9672fb8bee085b6d77157e8a916b28748ea4df4d9c2150843fecfba68 的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文件，并且给 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素设置 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"面板查看到所加载的一切：
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)); // 121console.log(diag(4, 3)); // 5class 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)); // 121console.log(diag(4, 3)); // 5class 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：核心技术与案例实战 》。