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

來源:互聯網
上載者:User

標籤:資料互動   extends   fine   css   用戶端   設定   blog   rom   跳轉   

 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 [email protected] 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   用來建立路由

[email protected]  最新版的antd-mobile 模板  手機端用的      假設要是做響應式安裝 react-responsive   [email protected] 是pc端  [email protected] 是ipad端

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

browser-cookies 用戶端擷取,設定cookie 

babel-plugin-import 按需載入

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

body-parser 讀取前端發送的資料

cookie-parser用於服務端設定cookie

4:安裝完成之後。彈出配置項

npm run eject

完成之後可以在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

重複點擊路由問題:

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

比如:

 

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.