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

時間 2019-11-24

標籤 react 項目模板搭建部署欄目 React 简体版

原文原文鏈接

前一段時間作了一個小項目，時間比較緊，就一我的月。最終但願可以經過微信公衆號連接啓動應用。項目的業務細節就很少說了，主要是想分享一下作這個項目技術方面的一些經驗。html

技術選型

參考範圍大體三種：AngularJS，Angular，React。node

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

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

引用官方文檔中的一句話git

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

即web

Angular：指的是 v2.x 及之後的版本npm

AngularJS：特指 v1.xjson

因爲Angular從2.0之後版本更新比較大，因此爲了作區分，只能想出這麼一招了。redux

好了，迴歸正題，這三種技術怎麼選擇？

如下是我當時的考慮：

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;
複製代碼