使用Yarn+Webpack+Babel6搭建React.js環境
Facebook開源的React.js已經改變了世人對前端UI的思考方式。這種基於組件方式的優勢之一，就是使View更加的簡單，因為React.js的View就是一個關於props和state的js function。同時，React.js是前端的模塊化開發，更加簡單和快捷，這也是極大誘惑。
React.js的學習曲線，相對於其他的前端框架，還是先對平緩的，特別對於來自桌面的開發者。但圍繞React.js的工具（Babel、Webpack、Yarn）和庫還是有不少挑戰。
事實上，這些工具對於React.js開發來說不是必須的，但為了最大程度利用ES6和JSX的特性，他們還是十分有必要的。因此，這里會使用這些工具一步一步的搭建React的開發環境。
這些僅僅是我學習React.js的一個記錄。
開始
這里會使用Yarn,一個Facebook開源的Js包管理器，借鑒和改進了npm，並且和npm是兼容的。這里非常樂意推薦大家去嘗試和使用Yarn。
新建一個新的Project
mkdir helloworld
cd helloworld
yarn init
使用默認的配置
安裝和配置webpack
Webpack是當下最為火熱的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
使用Yarn安裝webpack
yarn add webpack
新建一個webpack的配置文件：webpack.config.js
touch webpack.config.js
並使用一下內容更新webpack.config.js
var webpack = require('webpack')
//import webpack from 'webpack'
module.exports = {
devtool: 'eval',
entry: [
'./index.js'
],
output: {
path: __dirname,
filename: 'bundle.js'
}
}
新建一個index.js文件
document.write("Hello world react")
新建一個index.html文件
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>
編譯index.js並打包到bundle.js
$ yarn run webpack index.js bundle.js
打包過程顯示日志：
Hash: 8b231dfafb36fcecaafd
Version: webpack 2.13.3
Time: 86ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./index.js 28 bytes {0} [built]
Done in 0.67s.
在瀏覽器中打開index.html
添加loader
使用hot loader熱替換
添加Chrome React.js調試插件
未完待續