這是模塊化開發、主流框架和最新版的ECMAScript語法規範的一個小demo 準備工作 安裝 nodeJs 首先進入node官網，去下載最新版的nodeJs webpack 安裝webpack npm install webpack -g 參數-g表示全局安裝webpack，你在cmd命令中哪個文 ...
這是模塊化開發、主流框架和最新版的ECMAScript語法規範的一個小demo
準備工作
安裝 nodeJs
首先進入node官網，去下載最新版的nodeJs
webpack
安裝webpack
npm install webpack -g
參數-g表示全局安裝webpack，你在cmd命令中哪個文件夾下都可以使用webpack的命令，如果不加-g的話，是只可以在你安裝webpack的目錄下使用webpack這個命令
webpack 也有一個 web 伺服器
npm install webpack-dev-server -g
-g道理同上
配置webpack
1、先確認一下項目的目錄結構
|-app |--component |---component.js |--app.js |-build |--css |--img |--js |--index.html |-webpack.config.js
2、配置webpack.config.js
在使用webpack的時候，需要創建一個名為 webpack.config.js 的配置文件，這個文件在安裝webpack的時候，是不會自動創建的，是需要手動創建，文件的位置要放在當前安裝webpack根目錄下
var path = require('path'); module.exports = { entry: path.resolve(__dirname, './app/app.js'), output: { path: path.resolve(__dirname, './build'), filename: 'js/build.js' }, module: { loaders: [{ test: /\.js|.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] } }
這是一個簡單的webpack的配置，首先先引用了path對象。
entry是一個入口文件，在這個文件中的所有內容，會被打包到output指定目錄的指定文件當中。
path.resolve是一個來格式化路徑的方法，path.resolve的方法參數有兩個path.resolve(from，to)，from這裡的__dirname是為了獲取當前模塊文件所在的目錄，to這裡的./app/app.js是一個相對路徑，ouput是出口，ouput中的path和entry的方法同理，這裡不做贅述。
filename是指向一個指定文件，入口打包的所有文件，最後代碼都會在這個出口文件中看到。
module中添加的loaders這個數組，裡面的對象是用來轉換模塊的，現在這裡只添加了一個js的模塊，用來轉換es6語法和react
這個時候，還需要安裝一個 babel-loader
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
3、修改html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>React + Webpack + es6</title> </head> <body> <div id="aaa"></div> <script src="js/build.js"></script> </body> </html>
修改完 index.html 後，開始編寫js:
在 app.js 中，添加 alert('hello world')
然後在cmd命令行中，運行 webpack ，打包完成後打開 index.html ，會彈出一個系統彈窗，"hello world"。
這個時候證實了，我們的配置是正確的，可以正常運行。
react
安裝react
首先，還是和上面一樣，需要安裝對應的插件
npm install react react-dom --save-dev
安裝完成後，打開component.js，修改為:
import React from 'react'; export class Component extends React.Component { render() { return ( < div > hello world < /div>) } }
打開 app.js ，修改為:
import React from 'react'; import {Component} from './component/component.js'; import {render} from 'react-dom'; render(<Component />,document.querySelector('#aaa'));
import是es6中的一個新方法，是用來載入模塊的，上面的 import 是用來載入React的, export 定義了對外介面，這裡要註意，載入模塊定義的名稱和類的名稱首字母必須大寫，如果不大寫，會報錯。
運行 webpack ，這個時候就完成了一個簡單的 webpack + react + es6 的模塊化開發，可以直接雙擊打開 index.html 查看演示，也可以運行 webpack-dev-server 打開本地伺服器，瀏覽器打開 http://localhost:8080/build/index.html 查看演示
React組件生命周期
1、getDefaultProps
作用於組件類，只調用一次，返回對象用於設置預設的props，對於引用值，會在實例中共用。
2、getInitialState
作用於組件的實例，在實例創建時調用一次，用於初始化每個實例的state，此時可以訪問this.props。(es6不支持)
3、componentWillMount
在完成首次渲染之前調用，此時仍可以修改組件的state。
4、render
必選的方法，創建虛擬DOM，該方法具有特殊的規則：
1）只能通過this.props和this.state訪問數據
2）可以返回null、false或任何React組件
3）只能出現一個頂級組件（不能返回數組）
4）不能改變組件的狀態 5、不能修改DOM的輸出
5、componentDidMount
真實的DOM被渲染出來後調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調用。
6、componentWillReceiveProps
組件接收到新的props時調用，並將其作為參數nextProps使用，此時可以更改組件props及state。
7、shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過後續的生命周期方法，通常不需要使用以避免出現bug。在出現應用的瓶頸時，可通過該方法進行適當的優化。
在首次渲染期間或者調用了forceUpdate方法後，該方法不會被調用
8、componentWillUpdate
接收到新的props或者state後，進行渲染之前調用，此時不允許更新props或state。
9、componentDidUpdate
完成渲染新的props或者state後調用，此時可以訪問到新的DOM元素。
10、componentWillUnmount
組件被移除之前被調用，可以用於做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創建的定時器或添加的事件監聽器。
React調試（ React Developer Tools ）
如果直接在瀏覽器調試的話，我們只能在Element中看到渲染後的DOM分層結構，如果想看到React組件的分層結構，就會需要到一個調試工具，因為本人比較喜歡使用chrome瀏覽器進行調試，所以這裡暫時只拿chrome瀏覽器來舉例。
1、擴展程式商店下載（推薦）
首先，要保證你的瀏覽器是可以訪問谷歌擴展程式商店,接著我們在商店中搜索 React Developer Tools，然後就會出現一個擴展程式，擴展程式商店下載的，直接啟用就好。
2、網上安裝包下載
如果是網上下載的安裝包，就找一下包裡面會有一個.crx文件擴展名的文件，拖放到擴展程式中即可。
個人說明
上述所有內容都是本人的個人理解，如果出現不正確的地方，請及時評論方便做出修改
