本文是作為一個(gè)幾乎不了解一系列框架工具的小白的入門筆記，也為與我一樣面對(duì)框架工具迷茫不知道如何學(xué)起如何構(gòu)建項(xiàng)目的同學(xué)們提供一條學(xué)習(xí)路線杏愤。
具體學(xué)習(xí)內(nèi)容參考貼出的鏈接左医，本文更多的是筆記扛禽。
我認(rèn)為較好的學(xué)習(xí)路線是先學(xué)習(xí)基礎(chǔ)（第一熟妓、二部分貼出的教程），然后是一個(gè)項(xiàng)目的組建過程慈俯、思路（第三部分）渤刃，然后是動(dòng)手跟著教程做一遍框架的搭建與項(xiàng)目建立（第四部分）。
這之后將繼續(xù)學(xué)習(xí)webpack和es6贴膘。

第一部分：react基礎(chǔ)

參考React 入門實(shí)例教程
筆記：

• 最后一個(gè) <script> 標(biāo)簽的 type 屬性為 text/babel 卖子。這是因?yàn)?React 獨(dú)有的 JSX 語法，跟 JavaScript 不兼容刑峡。凡是使用 JSX 的地方洋闽，都要加上 type="text/babel" 玄柠。
• ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言诫舅，并插入指定的 DOM 節(jié)點(diǎn)羽利。
• JSX允許 HTML 與 JavaScript 的混寫。 JSX 的基本語法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭）刊懈，就用 HTML 規(guī)則解析这弧；遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析虚汛。插入的變量是一個(gè)數(shù)組匾浪，則會(huì)展開這個(gè)數(shù)組的所有成員
• React.createClass 方法就用于生成一個(gè)組件類，然后插入網(wǎng)頁中卷哩。然后用<xxx />生成組件實(shí)例蛋辈。實(shí)例內(nèi)可以放入屬性。組件的屬性可以在組件類的 this.props 對(duì)象上獲取将谊。
  組件類只能包含一個(gè)頂層標(biāo)簽冷溶，否則也會(huì)報(bào)錯(cuò)。組件類的第一個(gè)字母必須大寫
• 添加組件屬性尊浓，有一個(gè)地方需要注意逞频，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor 眠砾，這是因?yàn)?class 和 for 是 JavaScript 的保留字虏劲。
• this.props.children 屬性托酸。它表示組件的所有子節(jié)點(diǎn)褒颈。this.props.children的值有三種可能：如果當(dāng)前組件沒有子節(jié)點(diǎn)，它就是 undefined ;如果有一個(gè)子節(jié)點(diǎn)励堡，數(shù)據(jù)類型是 object 谷丸；如果有多個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型就是 array 应结。所以刨疼，處理 this.props.children的時(shí)候要小心。React 提供一個(gè)工具方法 [React.Children] 來處理 this.props.children 鹅龄。我們可以用 React.Children.map 來遍歷子節(jié)點(diǎn)揩慕，而不用擔(dān)心 this.props.children的數(shù)據(jù)類型是 undefined 還是 object。
• 組件類的PropTypes屬性扮休，就是用來驗(yàn)證組件實(shí)例的屬性是否符合要求迎卤。getDefaultProps 方法可以用來設(shè)置組件屬性的默認(rèn)值。
• 用組件插入的都是虛擬的dom玷坠，無法獲得用戶輸入蜗搔，在需要真實(shí)dom的場(chǎng)景下劲藐，必須為組件的子節(jié)點(diǎn)添加ref屬性然后 this.refs.[refName] 就會(huì)返回這個(gè)真實(shí)的 DOM 節(jié)點(diǎn)。必須等到虛擬 DOM 插入文檔以后樟凄，才能使用這個(gè)屬性聘芜，否則會(huì)報(bào)錯(cuò)。
• getInitialState 方法用于定義初始狀態(tài)缝龄，也就是一個(gè)對(duì)象汰现，這個(gè)對(duì)象可以通過 this.state 屬性讀取。當(dāng)用戶點(diǎn)擊組件二拐，導(dǎo)致狀態(tài)變化服鹅，this.setState 方法就修改狀態(tài)值，每次修改以后百新，自動(dòng)調(diào)用 this.render 方法企软，再次渲染組件。由于 this.props 和 this.state 都用于描述組件的特性饭望，可能會(huì)產(chǎn)生混淆仗哨。一個(gè)簡單的區(qū)分方法是，this.props 表示那些一旦定義铅辞，就不再改變的特性厌漂，而 this.state 是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性。
• 文本輸入框的值斟珊，不能用 this.props.value 讀取苇倡，而要定義一個(gè) onChange 事件的回調(diào)函數(shù)，通過 event.target.value 讀取用戶輸入的值囤踩。textarea 元素旨椒、select元素、radio元素都屬于這種情況
• 組件生命周期分為3種：已插入堵漱、已移除综慎、重新渲染。React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)will和did勤庐，一個(gè)是進(jìn)入狀態(tài)之前調(diào)用示惊，一個(gè)是進(jìn)入狀態(tài)后進(jìn)入狀態(tài)之前調(diào)用。 還提供兩種特殊狀態(tài)的處理函數(shù)愉镰。
  componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用
  shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用
• 組件的style屬性的設(shè)置方式也值得注意米罚，不能寫成style="opacity:{this.state.opacity};"而要寫成style={{“opacity”: this.state.opacity}}

第二部分：創(chuàng)建react項(xiàng)目

參考：React 教程
筆記：

• 創(chuàng)建項(xiàng)目：

$ create-react-app my-app
$ cd my-app/
$ npm start```
- 元素添加自定義屬性需要使用 data- 前綴
- 在 JSX 中使用 JavaScript 表達(dá)式。表達(dá)式寫在花括號(hào) {} 中
- 在 JSX 中不能使用 if else 語句丈探，但可以使用 conditional (三元運(yùn)算) 表達(dá)式來替代录择。
- React 推薦使用內(nèi)聯(lián)樣式。我們可以使用 camelCase 語法來設(shè)置內(nèi)聯(lián)樣式. React 會(huì)在指定元素?cái)?shù)字后自動(dòng)添加 px 。注釋需要寫在花括號(hào)中{/*注釋...*/}
- 不能在組件內(nèi)部通過this.state修改狀態(tài)糊肠，因?yàn)樵摖顟B(tài)會(huì)在調(diào)用setState()后被替換辨宠。
- 一些組件api參考[React組件API](http://www.runoob.com/react/react-component-api.html)
這里有一個(gè)[3分鐘創(chuàng)建一個(gè)hello world react程序](https://daveceddia.com/test-drive-react/)
---
###第三部分：實(shí)踐
參考[十分詳細(xì)的React入門實(shí)例](https://link.zhihu.com/?target=http%3A//blog.csdn.net/a153375250/article/details/52667739)
內(nèi)含代碼下載，以及詳盡的代碼解釋货裹。主要是理解一個(gè)項(xiàng)目的搭建思路嗤形。
筆記：
- 用`export default class StaffItem extends React.Component`來替代`React.createClass`
- 綁定函數(shù)用法類似于`onChange={this.handlerOrderChange.bind(this)}`
- 利用在組件中添加ref屬性來抓住dom，調(diào)用時(shí)弧圆，使用`React.findDOMNode(this.refs.xxx);`獲取下拉選項(xiàng)的值： `sel.options[sel.selectedIndex].value;`
- 寫完源碼后放入src文件夾中赋兵，寫好webpack.config.js和package.json，運(yùn)行npm install和npm start,在build中生成bundle.js搔预，將其引入index.html中即可打開項(xiàng)目霹期。
---
###第四部分：實(shí)戰(zhàn)
參考[Learn React & Webpack by building the Hacker News front page](https://github.com/theJian/build-a-hn-front-page)

這篇文章感覺比較好，因?yàn)閷?duì)于我個(gè)人來說一開始對(duì)于webpack等工具的使用都是一頭霧水拯田，很多實(shí)踐教程一上來就默認(rèn)初學(xué)者已經(jīng)懂了實(shí)際不然历造，這個(gè)教程算是手把手教你如何創(chuàng)建一個(gè)項(xiàng)目并且跑起來。
流程：
- 先安裝webpack和webpack服務(wù)器
```npm install webpack -g
npm install webpack-dev-server -g```
- 創(chuàng)建webpack配置文件
- 在根目錄下運(yùn)行`npm init -y`創(chuàng)建package.json文件船庇，修改鍵值
```"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}```
- 安裝react和jquery吭产、babel
```npm install react react-dom --save
npm install jquery --save
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev```
- 修改webpack配置文件：

var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/app.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
]
}
};

- 創(chuàng)建入口文件app.js放置于app的文件夾內(nèi)，希望 webpack 將它打包輸出為 build/ 目錄下的 bundle.js鸭轮。創(chuàng)建build文件夾臣淤，內(nèi)部創(chuàng)建index.html文件，其中 script 引入了 bundle.js窃爷。
- 運(yùn)行npm run build 和npm run start即可開啟服務(wù)器邑蒋，訪問http://localhost:8080/build/index.html即可
- 開發(fā)一個(gè)項(xiàng)目，首先構(gòu)思好樹形結(jié)構(gòu)按厘，分別構(gòu)建對(duì)應(yīng)js文件医吊，并且將總框架引入進(jìn)app.js
- 對(duì)于圖片和文件的引入，需要安裝相應(yīng)的loader：
`npm install url-loader file-loader --save-dev`
配置 webpack.config.js：

loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
{
test: /.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192' // 這里的 limit=8192 表示用 base64 編碼 <= ８K 的圖像
}
]```
然后像引入js文件一樣引入圖片刻剥，調(diào)用時(shí)：<img src={引入的圖片名} />（注意此處img標(biāo)簽要自閉合）

• 對(duì)于用方法引入的內(nèi)容遮咖，使用的時(shí)候用{this.xxx()}
• 添加樣式滩字，也要用模塊化引入方法：
  npm install css-loader style-loader --save-dev
  （css-loader 處理 css 文件中的 url() 表達(dá)式.style-loader 將 css 代碼插入頁面中的 style 標(biāo)簽中.）
  并處理webpack配置文件
  { test: /\.css$/, loader: 'style-loader!css-loader' }
  引入則直接引入 ： import ‘./xxx.css’
• 對(duì)于父子組件間的通信, 可以使用屬性傳遞. 子組件可以使用 this.props 訪問到父組件傳入的屬性數(shù)據(jù).如父組件使用<NewsItem item={data} />傳入數(shù)據(jù)造虏，子組件就可以使用this.props.item訪問
• 對(duì)于地址的處理需要引入U(xiǎn)RL：import URL from 'url'; URL.parse()將一個(gè)URL字符串轉(zhuǎn)換成對(duì)象并返回，