使用React-route和Webpack快速構建一個react程序
來自： https://segmentfault.com/a/1190000004543791
初始化項目
我們先創建個空文件夾，然后初始化 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.js
webpack
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); });</pre>文章頭部是我們將要用的 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; </pre>
其實那只是一個非常簡單的組件，內容為顯示"Welcaome to Login"。這個時候我們可以運行下我們的app。 npm start 然后訪問 http://localhost :8080/webpack-dev-server/#
這個時候，你可以見到一個導航條上有兩個鏈接Home 和 Login.如果點擊Login這個時候可以顯示我們剛剛創建的內容。
如果上面一切順利，那么現在你可以自己創建更多內容來充實自己App.如果你項目中使用Flux(強烈推薦， 地址 ),你可以在你的js 文件夾下使用任何結構。非死book 官方也有一個使用flux聊天 Demo 可供學習。
發布
實際上我們有很多方法可以上線你的服務，但是非常好的一件事情是webpack 可以輕松的使用生成的文件。其中你可以快速的將這些資源文件放到cdn上，然后將index.html放到主機上，更新我們的腳本路徑就可以了。
博客地址: http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/
如果有什么問題可以發送郵件給我 kakashjack@gmail.com 以及 原作者
</div>