前言
前幾天學習react，看了阮一峯的react入門博客，參考鏈接：
http://www.ruanyifeng.com/blog/2015/03/react。
在這篇博客中，所有的例子都是通過引入三個相關的js文件來實現react。下面看下第一個demo代碼：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>對於引入的這三個js文件，作者這樣寫到：
“上面代碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。“
也就是說在上面的例子中，我們給瀏覽器的是一個JSX文件。瀏覽器需要將JSX轉化成ES6，然後再將ES6轉爲ES5，最後執行ES5。而這些轉化很消耗時間，所以做線上項目的時候，我們就需要在線下先將這些文件進行轉化，然後給客戶端瀏覽器直接返回轉化好的ES5。這樣，用戶端的渲染速度就大大提升，從而提高用戶體驗。
下面就說一下如何搭建一個react環境，來實現上面所說的功能。
1、Node.js
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
我們需要使用npm進行包管理，所以需要先安裝nodejs。安裝參考官方文檔：
http://nodejs.cn/download/。
可以使用如下命令來測試是否安裝成功：
node -v
npm -v2、使用npm進行項目初始化
在用nodejs進行創作前，首先應該初始化配置文件，這條命令主要爲了自動生成package.json。
按提示，一步步來完成項目文件的配置，沒有的可以不寫，直接enter,這樣初始
化時會創建默認的文件，最後創建完的目錄如下所示:
每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。
package.json這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令可以自動創建這個package.json文件。
輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不準備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認即可。
具體更詳細的關於package.json的文檔，可以參考如下文檔：
http://javascript.ruanyifeng.com/nodejs/packagejson.html
3、使用NPM配置react環境
執行以下命令，加載相關依賴：
npm install --save react react-dom babelify babel-preset-react babel-preset-es20154、webpack熱加載配置
首先在跟目錄下新建一個index.html的頁面，新建一個index.js。
頁面內容如下：
<div id="example">123</div>
<script type="text/javascript" src="./src/index.js"></script>var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>hello react</h1>,
document.getElementById("example")
);此時如果直接引入index.js文件，瀏覽器是會報錯的。因爲它不知道如何解析JSX。下面就介紹下如何用webpack實現熱加載。
首先在根目錄下新建一個package.config.js，文件內容如下：
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: __dirname + '/src',
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/index.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
}
}
]
},
output: {
path: __dirname + '/src/',
filename: "bundle.js"
}
};之後安裝webpack：
npm install -g webpack//全局安裝webpack
npm install -g webpack-dev-server//全局安裝webpack開發的服務器
npm install -save webpack-dev-server //在目錄文件夾下安裝
npm install -save webpack
npm install --save-dev babel-loader babel-core//安裝babel-loader babel-core執行完以上命令之後，package.json文件的內容如下：
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "timor",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
}
}執行webpack，會生成一個bundle.js。然後在index.html中引入這個js。刷新頁面，我們就可以看到剛剛所寫的內容。
爲了避免沒次修改代碼都要手動的打包一次，再來做點配置：
webpack --watch//監聽變動並自動打包此時，我們已經不需要沒次都手動的去打包代碼了，每次改動代碼以後webpack都會自己重新打包，重新刷新頁面就可以看到修改後的效果了。
那麼，想不想讓你的瀏覽器監測你都代碼的修改，並自動刷新修改後的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，可以實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作爲項目依賴。
npm install --save-dev webpack-dev-server這時候，剛剛配置的webpack-server就派上用場了。
直接執行命令 webpack-dev-server --hot --inline
在瀏覽器輸入http://localhost:8080/就可以了～
大功告成，最後附上項目目錄：
