環(huán)境準(zhǔn)備
- MAC安裝npm / cnpm
npm叫node包管理器，Node.js的模塊依賴管理工具，是基于couchdb的數(shù)據(jù)庫，詳細(xì)記錄每個(gè)包的信息，包括作者、版本、依賴、授權(quán)信息等。
brew install nodejs
國內(nèi)使用 npm 速度很慢，使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm提速:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
npm安裝包有兩種方式，一個(gè)是局本地，一個(gè)是全局。區(qū)別如下
本地安裝：npm install package，包會(huì)被下載到當(dāng)前所在目錄，也只能在當(dāng)前目錄下使用。
全局安裝：npm install -g package，包會(huì)被下載到到特定的系統(tǒng)目錄下，能夠在所有目錄下使用。
參考資料
--npm包管理原理--
npm的數(shù)據(jù)庫中存儲(chǔ)著本機(jī)（node_modules文件夾中）已安裝模塊的信息，當(dāng)執(zhí)行npm install或npm update命令后，npm會(huì)根據(jù)registry地址查詢服務(wù)器上對應(yīng)模塊的最新信息，以json格式返回，其中包括模塊版本、下載鏈接以及其他信息。如果本地模塊版本較老或者模塊不存在，npm就會(huì)根據(jù)json中的鏈接下載模塊壓縮包，存放在~/.npm文件夾中，然后解壓到node_modules中。需要注意的是，執(zhí)行npm install命令時(shí)，如果node_modules中已經(jīng)存在同一模塊，那么默認(rèn)是不會(huì)更新模塊的，以便服務(wù)器上的版本較新。如果要使用npm install命令更新已有模塊，需要加上--force或者-f。(參考資料)
- 安裝和使用create-react-app
create-react-app是fb官方的零配置命令行工具，用于快速構(gòu)建react模板工程（參考資料）
安裝
cnpm install create-react-app
使用
create-react-app my-app
# 如果create-react-app下載速度很慢，說明該指令默認(rèn)調(diào)用的是npm，需要手動(dòng)更改registry
npm config set registry https://registry.npm.taobao.org
# 配置后可通過下面方式來驗(yàn)證是否成功
npm config get registry
# 或npm info express
cd my-app
# 進(jìn)入開發(fā)模式
npm start
如果對react足夠熟悉也可自建工程(參考資料)
create-react-app生成的目錄格式如下所示:
my-app/
README.md
index.html
favicon.ico
node_modules/
package.json
src/
App.css
App.js
index.css
index.js
logo.svg
通過修改src/App.js并刷新http://localhost:3000，可以修改默認(rèn)主頁。
??如果使用npm start啟動(dòng)，熱替換處于激活狀態(tài)；如果使用npm run build來編譯得到生產(chǎn)環(huán)境，此時(shí)代碼會(huì)被編譯到build目錄下，此時(shí)會(huì)自動(dòng)將整個(gè)應(yīng)用打包發(fā)布，它會(huì)自動(dòng)使用Webpack控件進(jìn)行優(yōu)化與壓縮。
??除了create-react-app外，還有Webpack-React-Redux-Boilerplate可供選擇，其允許在一個(gè)項(xiàng)目中配置多個(gè)應(yīng)用入口，同時(shí)支持開發(fā)模式、構(gòu)建模式與庫構(gòu)建模式。參考資料
- react庫的引用
可以在官網(wǎng) http://facebook.github.io/react/ 下載最新版。
你也可以直接使用 BootCDN 的 React CDN 庫
<script src="http://cdn.bootcss.com/react/0.14.0-beta3/JSXTransformer.js"></script>
<script src="http://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關(guān)的功能
babel.min.js - Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，使得目前不支持 ES6的瀏覽器能執(zhí)行 React 代碼。Babel 內(nèi)嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個(gè)全新的水平。
注意：使用JSX時(shí)，<script> 標(biāo)簽的 type 屬性需要設(shè)置為 text/babel
參考資料
- webstorm設(shè)置
react代碼輔助設(shè)置
Preferences - Languages & Frameworks - JavaScript - Libraries，點(diǎn)擊Download，查找react選中并下載。參考資料 - react路由
React路由是什么？
坑在哪里？
網(wǎng)上大多數(shù)的教程是react-router 3.0的版本，而最新的是4.*版本，其中已經(jīng)沒有browserHistory，Router和Route的名稱也發(fā)生了話，如果要按照以前教程進(jìn)行學(xué)習(xí)，需要安裝3.0版本的router，npm install --save react-router@3.0.5
參考資料 - react ajax最佳實(shí)踐
最佳實(shí)踐
只因?yàn)樾枰猘jax請求而使用jquery有點(diǎn)得不償失，所以使用fetch-polyfill來替代
https://github.com/github/fetch - 手殘導(dǎo)致git rebase本地代碼嚴(yán)重沖突無法修復(fù)
git reflog 找回最近c(diǎn)ommit的正常代碼sha1值
git reset --hard sha1 恢復(fù)正常
git rebase --abort 放棄rebase - FAQs
5.1 es6和之前版本的區(qū)別
用于狀態(tài)改變的私有變量state，React.creatClass中是getInitialState進(jìn)行初始化，而在es6中，去掉了getInitialState這個(gè)hook函數(shù)，規(guī)定state在constructor中實(shí)現(xiàn)。解決方案
5.2 - 其他資料
vscode代碼自動(dòng)補(bǔ)全 - typings
node部署工具 - pm2
http://www.iamaddy.net/2015/03/first-react-component/
http://www.zhufengpeixun.cn/article/146
http://yeoman.io/
http://imweb.io/topic/57c8cbb27f226f687b365636
待閱資料
如何開發(fā)由Create-React-App-引導(dǎo)的應(yīng)用
React.js學(xué)習(xí)筆記之事件系統(tǒng)
create-react-app修改端口
