react項目搭建

標籤：cti   pack   建立   tar   為我   require   ios   art   module   

1.下載安裝node.js，需要node.js環境。

2.經過挑選，決定選擇creat-react-app這個項目腳手架，然後輸入指令安裝          $ npm install -g create-react-app

3.建立項目，然後輸入指令(my-app是名字，自己取)          $ create-react-app my-app    

4.進入項目，然後輸入指令          $ cd my-app

5.運行項目，然後輸入指令          $ npm start

6.選擇react-router-dom這個路由，然後輸入指令安裝          $ npm install --save react-router-dom

7.對比fetch和axios選擇fetch，然後輸入指令安裝          $ npm install whatwg-fetch --save

8.因為我是開發微商城項目，UI組件整合選擇ant-design-mobile，然後輸入指令安裝          $ npm install antd-mobile --save

9.引入 react-app-rewired 並修改 package.json 裡的啟動配置          $ npm install react-app-rewired --save-dev

10.在項目根目錄建立一個 config-overrides.js 用於修改預設配置，輸入代碼

module.exports = function override(config, env) {  // do stuff with the webpack config...  return config;};

11.安裝按需載入組件代碼和樣式的 babel 外掛程式並修改 config-overrides.js 檔案          $ npm install babel-plugin-import --save-dev

const { injectBabelPlugin } = require(‘react-app-rewired‘);
module.exports = function override(config, env) {  config = injectBabelPlugin([‘import‘, { libraryName: ‘antd-mobile‘, style: ‘css‘ }], config);  return config;};

 12.用組件方式來寫css          $ npm install --save styled-components

react項目搭建