React.js - a flux example with ES6 and Babel

這篇介紹一下用最新的 ECMAScript 6 的語法並搭配 Babel 來開發一個簡單的 react/flux 的程式

同樣這次的範例程式會放在 GitHub 上 >>在這裡<<

不知道 react/flux 的可以看我>>上一篇的教學<< 有寫一個簡單的 react/flux app

對 flux 有疑問或不清楚的可以 google 找一下資料，而我之前也有寫一篇對 flux 的>>心得分享<<

接下來回到主題，ECMAScript 6 以下都會簡稱 ES6，在2014確定了所有的新功能與語法

預定在今年 2015 6月左右會正式發佈，接下來瀏覽器會慢慢完全支援 ES6 的語法

所以這篇就用 ES6 來重寫一次 react/flux 的程式

雖然目前瀏覽器並沒有完全支援 ES6 的語法，不過我們可以透過 Babel 這個工具進行轉換

Babel 的原名叫做 6to5，也就是一個能夠將 ES6 轉換為 ES5 的工具，所以也不用擔心瀏覽器對 es6 的相容性問題了

至於為什麼要這麼快用 ES6 來開發程式？如果看過 ES6 的新功能之後，確實是蠻讓人期待的，之後有空再來介紹

另外也是因為有了 Babel 這類的工具，讓目前尚未完全支援 ES6 的情況下

可以開始專攻 ES6，等到之後 ES6 完全被瀏覽器支援後，你也不用考慮要重新寫程式了，因為你已經是在寫 ES6了


接下來這次的範例程式跟 >>React.js - react/flux 範例<< 的程式目的一樣，差別只是在於以下幾點

• 用 ES6 語法的新特性 Module 來取代取原本 react/flux 範例中使用的 require，而是用 import

• 用 ES6 最新的 class 特性來負責繼承，取代掉原本 react/flux 在 Store 中用的 object-assign

• 利用 Babel 對 JSX 與 React 的支援，讓你在 build (babelify) 的時候也能夠轉換 JSX 語法

• 另外也會用到一些比較零星的 ES6 語法，這裡就不再特別強調了

接下來就開始撰寫本次的範例，首先道專案根目錄下執行建立 package.json，內容如下

完成後執行以下指令安裝 react, flux, browserify 以及 babel(babelify)

接下來，因為程式邏輯都跟 >>React.js - react/flux 範例<< 一模一樣，只是用ES6再寫一次而已

當然建議你要對 ES6 的基本語法要有相當地認知會比較好

所以下面我就單純列出每支程式的內容

src/app.js

src/components/DemoApp.react.js

src/components/Header.react.js

src/components/Content.react.js

src/actions/DemoAction.js

src/dispatcher/DemoDispatcher.js

src/stores/DemoStore.js

src/constants/DemoConstants.js

最後是 index.html

同樣的我們需要透過 browserify 進行 build 的動作才能正常執行

所以在前面一開始的指令除了透過 npm 安裝了 browserify 之外也額外裝了 babelify

babelify 跟上一篇講到的 reactify 同樣都是一種 browserify 的 transform

因為沒有 babelify，就無法將 ES6 轉回 ES5，也不能轉換 JSX 語法

所以同樣的我們要把 transform 的資訊加到 package.json

並執行以下指令

browserify -t babelify src/*.js -o ./build/bundle.js

這樣就可以運行 index.html 看到結果了

跟上次教學一樣，我也額外提供透過 gulp 的方式來 build 程式

但要先透過 npm 安裝一些東西

安裝完成後撰寫 gulpfile.js

最後這次範例原始碼有在 >>GitHub<< 上，請自行下載。如果你覺得不錯，在 GitHub 上給個 Star 吧