本文主要介紹的是使用React-router和Webpack如何快速構建一個react程式，下面話不多說，感興趣的可以一起學習學習。
初始化項目
我們先建立個空檔案夾，然後初始化 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);});
文章頭部是我們將要用的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 檔案夾下使用任何結構。
發布
實際上我們有很多方法可以上線你的服務，但是非常好的一件事情是webpack 可以輕鬆的使用產生的檔案。其中你可以快速的將這些資源檔放到cdn上，然後將index.html放到主機上，更新我們的指令碼路徑就可以了。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。謝謝大家對雲棲社區的支援。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
