webstorm用create-react-app腳手架快速構建React開發環境__web

使用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.處理跨域請求

"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

重複點擊路由問題：

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

比如：