babel配置
webpack配置
vscode配置
啟動專案
將專案開發基礎檔案react-mobx-starter-master.zip解壓縮，並用這個目錄作為專案根目錄。
在專案根目錄中，執行下面的命令，就會自動按照package.json的配置安裝依賴模組。
$ npm install或者$ npm i
安裝完成後，會生成乙個目錄node_modules，裡面是安裝的所有依賴的模組
專案目錄結構
.├── .babelrc
├── .gitignore
├── index.html
├── jsconfig.json
├── license
├── .npmrc
├── package.json
├── readme.md
├── src
│ ├── index.html
│ └── index.js
├── node_modules
│ ├── ...
├── webpack.config.dev.js
└── webpack.config.prod.js
$ npm init產生的檔案，裡面記錄專案資訊，所有專案依賴
可指定到對應的git倉庫
"repository"
:
"scripts"
:
start指定啟動webpack的dev server開發用web server主要提供2個功能：靜態檔案支援、自動重新整理和熱替換hmr(hot module replacement)
build使用webpack構建打包。對應$ npm run build
"devdependencies"
:
react-hot-loader
source-map
webpack的 loader
"dependencies"
:
axios非同步請求支援
polyfill解決瀏覽器api不支援的問題。寫好polyfill就讓你的瀏覽器支援，幫你抹平差異化
react開發的主框架
react-dom支援dom
react-router支援路由
react-router-domdom繫結路由
mobx狀態管理庫，透明化。
mobx-react mobx和react結合的模組
react和mobx是乙個強強聯合
.babelrcbabel轉譯的配置檔案
module.exports匯出
devtool：'source-map』
entry入口
output輸出
resolve解析
module 模組
module:]}
,,,]
},,,
]}]}
,
exclude排除的，/node_modules/打包排除目錄。這一句一定要有，否則，編譯就把這個目錄下所有檔案也拿進來了，巨大無比
use使用模組的useentries列表中的loader
rules中對.js結尾的但不在node_modules目錄的檔案使用轉譯babel-loader
載入器：倒著寫，先應用陣列中的最後乙個
css好處簡單易學，但是壞處是沒有模組化、復用的概念，因為它不是語言
less是一門css的預處理語言，擴充套件了css，增加了變數、mixin、函式等開發語言的特性，從而簡化了css的編寫
less本身是一套語法規則及解析器，將寫好的less解析成css。less可以使用在瀏覽器端和伺服器端
@color: #4d926f;
#header
h2
#header
h2
$ npm install less，本專案目錄已經安裝過了
編譯輸出到控制台
$ node_modules/
.bin/lessc test.less
編譯輸出到檔案
$ node_modules/
.bin/lessc test.less test.css
plugins:
[new
webpack.optimize.occurrenceorderplugin
(true),
newwebpack.hotmodulereplacementplugin()
,new
webpack.defineplugin(}
)
devserver:
, proxy:}}
}
jsconfig.json是vscode的配置檔案，覆蓋當前配置
以上是所有配置檔案的解釋。拿到這個資料夾後，需要修改name專案名稱、version版本、description描述，需要修改repository倉庫位址，需要修改author作者、license許可證資訊。這些資訊修改好之後，就可以開始開發了
在專案根目錄，使用
啟動成功應該就可以訪問了
webpack使用babel轉譯、打包，較為耗時，需要等一會兒
webpack 1 x構建react專案簡單配置
var path require path var webpack require webpack var openbrowserplugin require open browser webpack plugin var htmlwebpackplugin require html webpack...
webpack構建react應用
一 新建乙個資料夾。mkdir webpack react demo二 在此資料夾下建立package.json檔案 右鍵新建檔案也行。這裡使用 npm init 初始化專案的方式自動生成。在webpack react demo資料夾下進入cmd命令列，輸入npm init，一路enter就行。三 ...
react專案優化
1 key react diff演算法同層級比較時利用key來判斷old tree是否存在這樣的乙個key，如果存在則只需更新渲染否則元件會被銷毀並建立key最好如資料庫id一樣。2 shouldcomponentupdate 預設返回true,當判斷nextstate與this.state並thi...