初始化项目
我们先建立个空文件夹，然后初始化 package.json ,填写一些基础信息。
$ npm init接下来我们最先装置依靠项，我的 package.json 的依靠项以下
"devDependencies": {
"babel": "^5.5.6",
"babel-core": "^5.5.6",
"babel-loader": "^5.1.4",
"history": "^1.13.1",
"react": "^0.13.3",
"react-hot-loader": "^1.2.7",
"react-router": "^0.13.3",
"webpack": "^1.12.6",
"webpack-dev-server": "^1.12.1"
} 运转敕令:
$ npm install 项目建立好后，我们接下来建立一些必要的文件和目次；
$ mkdir js css && touch index.html webpack.config.jswebpack
webpack （更多）是一款模块处置惩罚器，他会将你统统的代码打包成静态文件，放到你的开辟的App中。
翻开webpack.config.js，然后增加下面的代码:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: __dirname + '/build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
这份文件大概有四个设置项entry, output, module, plugins.
entry:指定打包的进口文件，每有一个键值对，就是一个进口文件。
output：设置打包效果，path定义了输出的文件夹，filename则定义了打包效果文件的称号，filename内里的[name]会由entry中的键替代,例子中的/build/bundle.js就是天生的文件。
resolve：定义了剖析模块途径时的设置，经常运用的就是extensions，能够用来指定模块的后缀，如许在引入模块时就不须要写后缀了，会自动补全.
module：定义了对模块的处置惩罚逻辑，这里能够用loaders定义了一系列的加载器，以及一些正则。当须要加载的文件婚配test的正则时，就会举行处置惩罚。这里我们运用了react-hot 和 babel。babel-loader是我们运用ES-6举行开辟时用于天生JS文件。
末了我们天生了一个style.css仅仅做个例子，通知我们怎样引入款式文件，实际上我们能够加载诸如sass-loader如许的加载器。
loader对文件举行处置惩罚，这正是webpack壮大的缘由。比方这里定义了通常.js末端的文件都是用babel-loader做处置惩罚，而.jsx末端的文件会先经由jsx-loader处置惩罚，然后经由babel-loader处置惩罚。固然这些loader也须要经由过程npm install装置。
plugins: 这里定义了须要运用的插件，比方commonsPlugin在打包多个进口文件时会提掏出公用的部份，天生common.js。
NoErrorsPlugin: 定义代码涌现错误时的时受否自动从新加载。
这个时刻我们再package.json中到场script 字段，
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
}这个时刻我们输入一个npm start敕令时刻我们会启动一个webpack server这个时刻你能够接见localhost:8080/webpack-dev-server/#/;假如你运用npm run build时刻能够将文件自动天生到bulid/下。
接下来我们新建index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New React App</title>
</head>
<body>
<section id="react"></section>
<script src="bundle.js"></script>
</body>
</html> 如今我们接见浏览器能够便会引进新建立的bundle.js,实际上你能够引进任何你想要的资本。
React-router
完成项目的基础建立，接下来我们建立app.js项目的进口文件。代码以下:
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import LoginHandler from './components/Login.js';
let App = React.createClass({
render() {
return (
<div className="nav">
<Link to="app">Home</Link>
<Link to="login">Login</Link>
{/* this is the importTant part */}
<RouteHandler/>
</div>
);
}
});
let routes = (
<Route name="app" path="/" handler={App}>
<Route name="login" path="/login" handler={LoginHandler}/>
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
文章头部是我们将要用的react和react-router的插件包引进来。同事我们还引入login.js作为我们的Login React 组件。接着，我们运用React 建立一个类。这个例子中，实在就是一个简朴的导航条会涌现统统的子组件中。我们简朴的Link到我们的路由:App和Login.然后React route将会被RouteHandler组件初始化。
在这个App中，我们定义路由而且指定了响应的处置惩罚顺序（React 组件）。我们定义了我们的根途径为app，而且其他的地点将会是App的子组件。这个例子中，我们增加了一个登录页面，用于用户登录到App中。
末了，React-router会将我们定义的统统加载到document.body中来。这就是index.html转变成我们React App.
Components
弄到这了，我们须要增加组件(Components).在我们的 /js 目次下，我们须要最先建立组件。我们建立Login.js：
import React from 'react';
let Login = React.createClass({
render() {
return(<div>Welcome to login</div>);
}
});
export default Login; 实在那只是一个异常简朴的组件，内容为显现”Welcaome to Login”。这个时刻我们能够运转下我们的app。npm start 然后接见http://localhost:8080/webpack-dev-server/#
这个时刻，你能够见到一个导航条上有两个链接Home 和 Login.假如点击Login这个时刻能够显现我们方才建立的内容。
假如上面统统顺利，那末如今你能够本身建立更多内容来充分本身App.假如你项目中运用Flux(强烈推荐，地点),你能够在你的js 文件夹下运用任何构造。Facebook 官方也有一个运用flux谈天Demo可供进修。
宣布
实际上我们有许多要领能够上线你的效劳，然则异常好的一件事变是webpack 能够轻松的运用天生的文件。个中你能够疾速的将这些资本文件放到cdn上，然后将index.html放到主机上，更新我们的剧本途径就能够了。
博客地点:http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/
假如有什么问题能够发送邮件给我 kakashjack@gmail.com 以及原作者
