React項目模板-從項目搭建到部署

技術選型

參考范圍大致三種：AngularJS，Angular，React。

這里可能會有些困惑，AngularJS和Angular不是一個東西嗎？

沒錯，它們是一個東西，但也不是一個東西。好了，廢話少說，首先說明一下AngularJS和Angular的區別。

引用官方文檔中的一句話

Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.

這回很清晰了。

Angular：指的是 v2.x 及以后的版本

AngularJS：特指 v1.x

由於Angular從2.0以后版本更新比較大，所以為了做區分，只能想出這么一招了。

好了，回歸正題，這三種技術怎么選擇？

以下是我當時的考慮：

AngularJS：由於之前兩個項目一直在用AngularJS，所以使用起來並不陌生，相對buffer也會少很多(前面說了，時間比較緊，只有一個月)。碰到問題還可以和大家商量一下。
但是AngularJS性能及體積是個問題，尤其是要在手機端運行。

Angular: 性能不是問題，體積也還好。但是接觸比較少，之前只做過一個Web端的項目。

React: 前一段時間剛剛研究過，性能，體積都不是問題。但是同Angular一樣，沒有實際項目經驗啊，出了問題就只能百度了。

經過以上的一番權衡，其實我心里是想用React的。其中一個原因是經過前一段時間的學習，很想通過一個項目積累一些React的開發經驗，
另外一個原因是React無論從性能上（得益於Virtual DOM）還是思想上（組件化）都更為先進。

基於以上兩點原因，所以在和項目經理確定技術選型的時候，我極力推薦React，雖然可能會存在一些buffer，但是從可持續化發展的角度考慮（自己瞎猜的...），最終項目經理同意了。

項目框架搭建

在GitHub上看了很多的boilerplate工程，或多或少都和自己的需求有些出入。
所以，最終自己通過React官方的create-react-app cli搭建了一個seed工程。

1. 准備環境

node.js

2. 安裝creat-react-app cli

npm install -g create-react-app 

3. 創建工程

create-react-app react-seed 

然后進入項目根目錄react-seed安裝相關依賴

cd react-seed
npm install 

4. 暴露配置項

由於采用create-react-app創建的項目webpack等配置信息都是封裝好的，所以為了靈活修改相關配置，可以通過以下命令讓封裝好的配置文件暴露出來。

npm run eject 

創建好的項目目錄如下：

5. 本地服務啟動

// 啟動本地server用於開發
npm run start 

將會在本地 3000 端口啟動

redux集成

熟悉React的可能都知道，React是單向數據流，所以有些情況下單單依賴React自身無法實現組件之間的通信，這時就需要Redux登場了。

本文不介紹Redux的語法及思想，只說明如何集成。

首先需要安裝Redux相關依賴，由於不同版本之間可能存在兼容性問題，所以安裝的時候最好制定版本：

npm install redux@3.7.2 --save npm install redux-thunk@2.1.0 --save npm install react-redux@5.0.6 --save 

然后就可以在項目中引入redux了，可以像如下方式組織目錄結構：

路由集成

react-router

npm install react-router@3.0.5 --save 

路由支持嵌套，代碼如下：

const routes = (
    <Router history={hashHistory}> <Route path="/home" component={Layout} onEnter={onEnter}> <IndexRoute getComponent={home} onEnter={onEnter}/> <Route path="/home" getComponent={home} onEnter={onEnter}/> <Route path="/detect" getComponent={detect} onEnter={onEnter}/> <Route path="/about" getComponent={about} onEnter={onEnter}/> </Route> <Route path="/unauthorized" getComponent={unauthorized}/> <Redirect from="*" to="/home" /> </Router> ); export default routes; 

國際化方案

采用的是常用的react-intl

npm install react-intl@2.4.0 --save 

UI組件集成

基於React的UI組件在這里推薦兩個，一個是螞蟻金服的Ant Design；另外一個是Material-UI。

兩個都很不錯，本人使用的是Ant Design。

npm install antd@2.13.10 --save 

fetch集成

關於請求數據有很多種方式，本人用的是fetch。

npm install fetch@1.1.0 --save 

可以簡單封裝一下，如下：

import 'whatwg-fetch' import loggerService from './logger' let notAuthorizedCounter = 0; let fetchService = { fetch: (url, method, header, body) => { if (!header) { header = {} } return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) { loggerService.log('fetchService failed:', exception); // token過期，重新獲取token並發起請求 if (exception.code === '401' || exception.code === '403') { notAuthorizedCounter++; // 最多重試3次 if (notAuthorizedCounter > 2) { notAuthorizedCounter = 0; loggerService.warn("401 or 403 received. Max attemps reached."); return; } else { return fetchService.fetch(url, method, header, body); } } }); }, get: (url, header) => { return fetch(url, { method: 'GET', headers: header }).then((response) => { return response.json(); }); }, post: (url, header, body) => { header['Content-Type'] = 'application/json'; return fetch(url, { method: 'POST', headers: header, body: JSON.stringify(body) }).then((response) => { return response.json(); }); } }; export default fetchService; 

項目部署

首先對項目進行打包。

npm run build 

可以通過以下命令在本地環境運行打包后的項目。

serve -s build 

注意：

如果項目中引入路由的時候使用的是BrowserRouter, 那么當執行npm run build打包之后，本地打開index.html文件，會出現空白頁面。

原因是BrowserRouter是用瀏覽器history對象的方法去請求服務器，
如果服務器沒有配置相對應的路由去指向對應的頁面，路由會找不到資源。

BrowserRouter會變成類似這樣的路徑http://111.230.139.105:3001/detail/9459469， 這樣的路徑在訪問服務器時，服務器會認為是請求查找某個接口數據。

所以這時候必須使用HashRouter，這時候訪問具體頁面時就是http://111.230.139.105:3001/#/detail/9459469

---

項目源碼已經開源到github上，喜歡的給個Star支持下吧！（^_）

react-seed