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

本文轉載自查看原文 2017-11-30 19:28 3024

編程領域中的“腳手架（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> ) } }