在生產環境中如果依靠前端引用JSXTransformer.js檔案來實現JSX向JavaScript的轉換，那是絕對不靠譜的。所以，使用Reactjs的童鞋就需要使用更有逼格的方式來完成這項任務。作為現在最常用的前端構建工具gulp搭配上Browserify來搞定這個問題那真是拉風的不要不要的 ：）
廢話不多說，我們們來點直接的吧。
原始碼
我們這次的任務就是讓這段滿目瘡痍的原始碼變得更優化，千里之行，這是開始。如果有童鞋看不懂這段程式碼是用來做神馬的，那麼我只能說，“媽媽叫你回家看基礎了。”回家之路（看不懂程式碼的，請猛戳）。
<div id="app"></div>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<div> Hello World </div>
);
}
});
React.render(<HelloWorld />, document.getElementById('app'));
</script>
<script type="text/jsx">
var Child = React.createClass({
render: function() {
return (
<div> The Child </div>
);
}
});
var Parent = React.createClass({
render: function() {
return (
<div> Hello World </div>
<Child/>
);
}
});
React.render(<Parent />, document.getElementById('app'));
</script>優化
前面把兩個元件都寫到一塊了，現在來分割成獨立的檔案。其中一個命名為js/components/Parent.jsx,內容如下：
var Child = require('./Child.jsx');
var Parent = React.createClass({
render: function(){
return (
<div>
<div> Hello World </div>
<Child/>
</div>
)
}
});
module.exports = Parent;Parent 的子元器件Child寫到js/components/Child.jsx中，內容如下:
var Child = React.createClass({
render: function(){
return (
<div> The Child </div>
)
}
});
module.exports = Child;寫到這裡，我們已經將兩個元件做了初步的拆分，如果有童鞋對module.exports是神馬還是一知半解或者根本不懂這是要搞什麼飛機，那麼請去百度自行谷歌commonjs，相信度娘會很嫵媚的幫你解惑。
如果要真正讓元器件顯示在頁面上需要執行React.render函式，這個是寫在js/app.js中的，內容如下：
var Parent = require('./components/Parent.jsx');
React.render(<Parent />, document.getElementById('app'));做到這裡，我們還順帶了做了一件很有意義的事情，就是對檔案檔案目錄做了優化，元件放置在/components資料夾中，啟動放置在根目錄/js下，清晰明瞭。
使用Browerify之後，html檔案中只需要引入一個自定義script檔案就好了 ，如下：
<script src='js/bundle.js'></script>所有依賴的js內容未來都會被編譯到bundle.js檔案中。
安裝 Browserify
工欲善其事，必先利其器。如果還沒有安裝gulp的童鞋可以參考我曾經寫的《這年頭，不用點道具（gulp），你都不好意思說你是做前端的》來安裝一下（名字略長略長，但有沒有很貼心，服務就是要做全套嘛）。
如果你在命令列敲擊如下命令
gulp -v輸出結果大概如下面這個這樣子的話，那就說明你已經成功安裝了gulp。
CLI version 3.9.0
Local version 3.9.0在這個基礎上，進入專案目錄還需要來區域性安裝 gulp ，browserify 以及相關的輔助工具：
npm install --save-dev gulp browserify vinyl-source-stream reactify使用Mac的童鞋不要忘記加sudo喲。
說一下上面四個包的各自作用：
gulp 是任務執行環境，用來進行任務排程
browserify 用來 require js 的模組
vinyl-source-stream 把 browserify 輸出的資料進行準換，使之流符合 gulp 的標準
reactify 使用它來實現 JSX 編譯功能
然後到 gulpfile.js 中，填寫如下內容：
var gulp = require("gulp"),
browserify = require('browserify'),
reactify = require('reactify'),
source = require('vinyl-source-stream');
gulp.task('jsx', function() {
browserify('./js/app.js')
.transform(reactify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('js'));
});來解釋一下上面的指令碼流程。首先就是把入口檔案 app.js 交給 browserify 進行處理，對於 jsx 的編譯，官方推薦使用的就是reactify。下一步，執行 bundle()來把所有依賴都打包成 bundle.js ，但是注意，browserify 不是一個專門為 gulp 寫的包，所有它輸出的資料流並不能直接 pipe 給 gulp 使用，所以，需要用到 source()介面，也就是 vinyl-source-stream 這個工具來處理一下，然後 pipe 給 gulp ，gulp.dest 會把輸出的 bundle.js 檔案儲存到 js 資料夾中。
任務寫好了，在命令列執行：
gulp jsx這樣就生成了 js/bundle.js 檔案了。由於這個檔案的標籤已經新增到 index.html 中了，所以直接用 chrome 開啟就可以看到執行效果了。