一、建立react專案

1.1 install node

1.2 命令列：npx create-react-app my-app （npx comes with npm 5.2+ and higher）

利用react官方提供的腳手架建立專案，建立完一個專案之後,你會發現為什麼沒有配置檔案呢.這是需要執行npm run eject複製出相關的配置檔案

1.3 命令列：npm run eject (可選，618專案暫時不執行)

類似於反編譯出配置檔案

官方釋義：

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

package.json

"dependencies"
 
: {
    //一個為了相容瀏覽器,為樣式自動新增字首的庫
    "autoprefixer": "7.1.2",
    //babel es6->es5
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-preset-react-app": "^3.0.2",
    "babel-runtime": "6.26.0",
    //對於這個外掛不是很瞭解，簡單看了一下文件，應該是為了相容引入外掛時的路徑問題。
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    //for console
    "chalk": "1.1.3",
    //css引入外掛,將css裝載到JavaScript例如 import './index.css'
    "css-loader": "0.28.4",
    //env 處理
    "dotenv": "4.0.0",
    //當你執行或者構建的時候，可以檢查語法的庫。我只能說這個庫非常有用，畢竟有時候除了error致命，warning也非常致命（如果你不注意的話）
    "eslint": "4.4.1",
    "eslint-config-react-app": "^2.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.35.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.1.0",
     //css 打包外掛
    "extract-text-webpack-plugin": "3.0.0",
    //檔案載入打包外掛包括圖片，js檔案等
    "file-loader": "0.11.2",
    //檔案系統擴充套件模組
    "fs-extra": "3.0.1",
     //html生成外掛，可以自動引入css和js
    "html-webpack-plugin": "2.29.0",
    //單元測試工具
    "jest": "20.0.4",
    //目測應該是Object.assign()的相容庫---不懂。。。
    "object-assign": "4.1.1",
    //一種用於修復flexbug的bug的外掛。
    "postcss-flexbugs-fixes": "3.2.0",
    //css構建中，瀏覽器相容庫
    "postcss-loader": "2.0.6",
    //promise庫
    "promise": "8.0.1",
    //內建react相關庫
    "react": "^15.6.1",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.1",
    //樣式載入庫，使JavaScript認識css
    "style-loader": "0.18.2",
    //不是很瞭解，搜了一下應該提供一種web前端的快取方案的庫
    "sw-precache-webpack-plugin": "0.11.4",
    //css和dom屬性中 的各種檔案引入
    "url-loader": "0.5.9",
    //webpack
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-manifest-plugin": "1.2.1",
    //fetch 請求，一種更加優雅非同步載入的請求方式
    "whatwg-fetch": "2.0.3"
  },

config目錄

–env.js 返回客戶端的環境配置

–paths.js 返回各種專案關鍵的目錄位置

–polufills.js 引入promise，fetch，object.assign三種常用方法。

–webpack.config.dev.js webpack開發環境配置檔案

–webpack.config.prod.js webpack生產環境配置檔案

–webpackDevServer.config.js 小型的Node.js Express伺服器

二、react專案開發相關

2.1 裝載scss（摘自github：create-react-app官方文件）

命令列：npm install –save node-sass-chokidar

命令列：npm install –save npm-run-all

在package.json中修改

"scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

然後修改CSS檔案為SCSS字尾即可

2.2 裝載reate-route（摘自github：create-react-app官方文件）

命令列：npm install –save react-router-dom

2.3 裝載mock.js

命令列：npm install mockjs

2.4 裝載moment.js

命令列：npm install moment –save

2.5 裝載axios

命令列：npm install axios –save

2.6 裝載numeral

命令列：npm install numeral –save