React入門之HelloWorld及環境搭建
關注React也已經很久了，一直沒能系統地深入學習，最近準備好好研究一下，並且親自動手做一些實踐。
學習一門語言也好，學習一個框架也好，都是從最初的hello world程式開始的，今天我們也來用React寫一個hello world出來，瞭解一下如何編寫及執行React。
在官方文件中，有一種方式是基於npm的，我比較喜歡這種方式，這也是官方比較推薦的，下面我們就一步一步建立一個React的簡單應用。
首先我們建立一個react-test目錄，進入該目錄後執行“npm install –yes”生成一個預設的package.json檔案，然後建立一個main.js檔案，用於放置React的原始碼，如下：
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);上面我們使用到了require語法載入react和react-dom庫的程式碼中，另外程式碼中還有React的JSX語法，所以我們需要對這個檔案做一些操作，把原始碼轉換成目前瀏覽器識別的目的碼。轉換操作涉及到了一個工具：Browserify，官方首頁是這麼介紹的：
Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.
言簡意賅，Browserify就是負責把依賴到的庫和當前檔案打包到一起，比如上面我們依賴到了react和react-dom庫，那麼在經過Browserify處理之後，main.js和react以及react-dom會被打包到一個檔案裡面。要想打包，首先我們應該安裝Browserify包，只需一個簡單的命令即可：
npm install -g browserify為了將main.js轉換成可用的目標檔案，我們需要使用下面的命令安裝相關的依賴庫：
npm install --save-dev react react-dom babelify babel-preset-react
其中babelify包是Browserify的babel轉換器，而babel-preset-react是針對React的babel轉碼規則包。在安裝完這幾個依賴庫之後，目錄結構如下圖所示：
我們就可以使用Browserify對main.js處理及打包了，在當前目錄中執行下面的命令即可：
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js執行完這條命令後，當前目錄下會生成一個bundle.js，如圖所示：
有了bundle.js檔案，我們只需在應用中引入即可，現在我們在當前目錄建立一個index.html，內容如下：
<html>
<body>
<div id="example"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>在瀏覽器中直接開啟這個檔案即可看到我們的hello world程式了，可以從開發工具中看的到，React的確起作用了：
到目前為止，我們已經實現了React的hello world程式，不過使用browserify命令時後面跟那麼多引數，十分的不便，我們考慮將其移至package.json中的scripts中：
"scripts": {
"bundle": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}配置完成之後，我們就可以安裝並使用本地的browserify來打包應用了，並且使用npm的命令來執行：
npm uninstall -g browserify
npm install browserify --save-dev
npm run bundle以後再改動main.js時，只需執行npm run bundle即可完成轉譯和打包。
以上介紹瞭如何編譯打包JSX程式碼，如果在專案實際應用時，上面的操作可能滿足不了我們的需求，比如實時監測檔案變化自動構建等功能。下面我會使用gulp來搭建一個簡易的自動化構建系統，用於將React原始碼轉譯打包和壓縮。
首先，我們建立一個react-dev的專案，結構如下：
這個專案包含一個app目錄，裡面又包含jsx目錄和index.html，然後在jsx目錄裡我們放置了React的原始碼main.jsx檔案。
大家也可以看到gulpfile.js和package.json，我們逐一介紹。
首先是package.json，裡面列舉了我們專案所需的依賴包：
"devDependencies": {
"babel-preset-react": "^6.5.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-browserify": "^0.5.1",
"gulp-connect": "^3.2.2",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"react": "^0.14.8",
"react-dom": "^0.14.8"
}這些依賴包負責轉譯、打包、壓縮以及啟動Web服務。首先我們需要使用npm install將這些依賴包安裝在本地。
然後介紹gulpfile.js，我們在這個構建檔案中定義了幾個簡單的任務：
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var connect = require('gulp-connect');
//this task is responsible for compiling, bundling, renaming, compressing, and generating the released JS file.
gulp.task('build', function() {
return gulp.src('app/jsx/*')
.pipe(babel({
presets: ['react']
}))
.pipe(browserify())
.pipe(rename('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/js'))
});
//this task will watch any change in app/jsx folder and then re-build it.
gulp.task('watch', function() {
gulp.watch([
'app/jsx/*'
], function() {
//any changed detected, call build task
gulp.run('build');
});
});
//this task will run a server listening at port 8080
gulp.task('server', function() {
connect.server({
root: 'app',
port: 8080,
livereload: true
});
});build任務負責執行一次構建任務，watch任務負責監聽jsx目錄變化，如有改動則立即再次執行構建任務，server任務負責啟動一個服務，在8080埠監聽。
最後如果要執行裡面的任務，我們需要先在全域性安裝命令列工具：
npm install --global gulp-cli然後，在專案當前目錄下，執行一個任務：
gulp watch開啟一個新的命令列，啟動Web服務：
gulp server之後在瀏覽器中輸入localhost:8080就可以看到我們的index.html內容了。