使用Facebook的create-react-app腳手架快速構建React開發環境（ant.design，redux......）

 

編程領域中的「腳手架（Scaffolding）」指的是可以快速搭建項目「骨架」的一類工具。例如大多數的React項目都有src，public，webpack配置文件等等，而src目錄中又包含components目錄等等。每次在新建項目時，手動建立這些固定的文件目錄。腳手架的做用就是幫助你完成這些重複性的工做，包括一鍵生成主要的目錄結構、安裝依賴等等。

create-react-app是來自於Facebook出品的零配置命令行工具腳手架，可以幫你自動建立基於Webpack+ES6的最簡易的React項目模板

1：首先在webstorm中新建一個項目

2：假若不是最新版本的npm   ,   安裝最新版本npm     

npm install npm@latest

3: 安裝項目中經常使用的相關的配置

yarn add react-redux redux redux-thunk react-router-dom thunk antd-mobile@next babel-plugin-transform-decorators-legacy browser-cookies babel-plugin-import utility body-parser cookie-parser --save

react-redux把狀態映射到子組件 分發reducer

redux  建立reducer action store等   

react-thunk  thunk處理髮送請求異步。

react-router-dom   用來建立路由

antd-mobile@next  最新版的antd-mobile 模板  手機端用的      假設要是作響應式安裝 react-responsive   ant-design@next 是pc端  ant-pro@next 是ipad端

babel-plugin-transform-decorators-legacy   語法轉換 用@後面加上函數名字 也能夠用來轉換view層中的class屬性

browser-cookies 客戶端獲取，設置cookie 

babel-plugin-import 按需加載

utility 登陸註冊的時候進行md5加密用的。設置uuid等等 

body-parser 讀取前端發送的數據  cookie-parser用於服務端設置cookie    (項目若是是純前端 不搞後臺這兩個能夠不用安裝)

安裝：prop-types （驗證props的屬性的類型）        

yarn add prop-types -d

(yarn 下  --save-dev 能夠爲-d     --save能夠爲-s)

安裝 react-helmet 支持單頁面應用對seo的友好性

安裝方法用法地址：yarn add react-helmet 或者npm install --save react-helmet

https://www.npmjs.com/package/react-helmet 

4：安裝完成以後。彈出配置項

npm run eject 彈出配置文件，能夠自定義配置 webpack

 

完成以後能夠在package.json中查看相關的配置

5：package.json中配置babel的babel-plugin-transform-decorators-legacy和babel-plugin-import插件

 方法：修改package.json中的babel和presets同級別

添加：

"plugins": [

      [

        "import",

        {

          "libraryName": "antd-mobile",

          "style": "css"

        }

      ],

      "transform-decorators-legacy"

    ]

6：設置後臺端口反向代理.處理跨域請求

"proxy":"tapi.12yuwen.com"

若是多個能夠設置成數組      "proxy":["tapi.12yuwen.com","tapia.12yuwena.com"]

 7：基本配置完成，啓動項目：yarn start(優先)或者 npm start

8：建立項目目錄

Actions redux中建立action

Components 建立木偶組件（純展現不涉及數據交互）

Config裏是一些基本配置。接口名字等等

Constants 裏是一些常量

Containers 智能組件 處理數據層和業務層。傳遞屬性到視圖層等等

Fetch是發送請求

Reducer redux中各個子reducer合併起來

Router 建立路由

Store 存放redux中相應的狀態

Uil（能夠不要。處理公共數據用的）

9：Index.Js 啓動首屏  app.js

10：Componets中建相應的路由頁面 以下圖。

每一個頁面中基本：語法

import React from 'react' export default class Index extends React.Component { constructor(props, context) { super(props, context); } render() { return ( <div>
                <h1>index頁面</h1>
            </div> ) } }

11：想要在項目中使用antd-mobile 先在index.js中引入css

import 'antd-mobile/dist/antd-mobile.min.css'

在根據https://mobile.ant.design/components/tabs-cn/中按需加載想要的組件

以下圖：

 

12：配置路由地址

App.js和Componets中的index都是指的是首頁  

想要去掉只留下一個index

配置路由能夠經過ant-design中改寫  例如：點擊跳轉頁面

若是打印出來是undefined的話。就要以下圖：就要引入withRouter          

注意：@withRouter

重複點擊路由問題：

頁面屬性中引入的時候應該也有：

好比：