原文：http://egorsmirnov.me/2015/05/22/react-and-es6-part1.html
這是系列的第一篇文章，其中我們將探討React與ECMAScript6的用法。
GitHub上提供了與本文相對應的代碼 。
自從ReactJS v0.13.0 Beta 1發佈以來， 可以將ECMAScript 6的功能用於您的React組件。它給開發者帶來了什麼好處？
ECMAScript6（或ECMAScript 2015）是新標準，它將大量新功能帶入JavaScript世界。這樣的功能包括類(classes)，箭頭函數(arrow functions)，剩餘參數(rest parameters)，迭代器(iterators)，生成器(generators )......等等。
如果您不熟悉ECMAScript 2015的新功能，我強烈建議您使用 此鏈接進行操作。
通過查看ES6兼容性表， 我們可以注意到並非所有瀏覽器都支持ES2015的每個功能。幸運的是，在供應商將ECMAScript 6功能發佈到瀏覽器之前，您不必花費多少時間。已有的解決方案稱爲轉換器，它將您用ES6編寫的代碼轉換爲ES5兼容代碼。這與CoffeeScript將您的Coffee代碼轉換爲JavaScript的方式非常相似。
其中一個解決方案是Babel，非常神奇的工具。非常感謝其作者，Babel支持大量不同的框架，構建系統，測試框架，模板引擎 - 看看這裏。
下面例子能讓您快速瞭解babel如何工作的。比如說，我們在ECMAScript 6中編寫了以下代碼：
var evenNumbers = numbers.filter((num) => num % 2 === 0);
babel轉換後：
var evenNumbers = numbers.filter(function (num) {
return num % 2 === 0;
});
類似的概念適用於其他ES6語言結構。
準備開發環境
爲了與babel建立連續的工作流程，我們將使用Gulp。這是在node.js之上構建的任務運行器，它可以通過自動執行繁瑣的任務來改善您的操作。如果你瞭解Grunt，那麼Gulp也有同樣的目的。
- 顯然，你需要node.js. 如果您沒有它，請將其安裝在您的系統上。
- 接下來，您需要全局安裝Gulp :
npm install --g gulp. - 切換到項目的目錄。
package.json通過使用npm init初始化您的文件。 - 執行
npm install --save react react-dom。這會將reactnpm模塊安裝到您的node_modules文件夾中，並將React庫保存爲package.json文件中的依賴項。 - 執行
npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react。這將爲您安裝更多開發依賴項node_modules。
要了解在步驟5中安裝的不同模塊的更多信息，請參閱我關於Browserify，Babelify和ES6的文章。
創建gulpfile.js
gulpfile.js使用以下內容創建項目根目錄中指定的文件：
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('build', function () {
return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true})
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('watch', ['build'], function () {
gulp.watch('*.jsx', ['build']);
});
gulp.task('default', ['watch'])
上面案例代碼：
- 第1-4行。我們需要安裝node.js模塊並將它們分配給變量。
- 第6行。我們定義
build了可以通過鍵入運行的gulp任務gulp build。 - 第7行。我們開始描述我們的
build任務將會做什麼。我們告訴Gulp使用Browserifyapp.jsx。另外，我們打開調試模式，這有利於開發。 - 第8-11行。我們將Babelify變換應用於我們的代碼。這允許我們將ECMAScript6中編寫的代碼轉換爲ECMAScript5。接下來我們將結果輸出到
dist/bundle.js文件。 - 第14-16行。我們定義了名爲watch的gulp任務，可以通過輸入gulp watch來運行。 每當jsx文件發生任何更改時，此任務都將運行構建任務。
- 第18行。我們定義了可以通過輸入gulp來運行的默認gulp任務。 此任務只執行監視任務。
你需要做的僅僅是輸入gulp終端並按Enter鍵。它將監視React組件內部的更改並不斷重新構建所有內容。
JSX和Babel
您可能已經注意到我們正在使用.jsx擴展而不是.js。JSX是ReactJS團隊開發的特殊JavaScript語法擴展。這種格式是爲了更方便地開發ReactJS組件而提供的。
以下是有關JSX的更多信息。
另一個有用的東西 - Babelify開箱即用瞭解JSX語法（更多關於此內容的
博文）。
使用ECMAScript 6編寫第一個React組件
是時候使用ES6創建我們的第一個非常簡單的組件了。添加名爲hello-world.jsx項目根目錄的文件：
import React from 'react';
class HelloWorld extends React.Component {
render() {
return <h1>Hello from {this.props.phrase}!</h1>;
}
}
export default HelloWorld;
一些解釋：
- 第1行。我們導入React庫並將其放入一個名爲的變量
React。 - 第3-8行。通過擴展
React.Component類使用ES6類創建React組件。我們添加非常簡單的render方法，它返回包含參數的<h1>標籤。 - 第9行。我們使用導出剛剛創建的組件到外部世界
export default HelloWorld。
爲了更簡單的理解，我放置了相同組件的代碼，但是在不使用ES6類的情況下編寫：
import React from 'react';
var HelloWorld = React.createClass({
render: function() {
return (
<h1>Hello from {this.props.phrase}!</h1>
);
}
});
export default HelloWorld;
總結;
讓我們完成我們的簡單例子。
創建名爲的文件app.jsx：
import HelloWorld from './hello-world';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<HelloWorld phrase="ES6"/>,
document.querySelector('.root')
);
這裏我們導入HelloWorld在上一步創建的組件並設置phrase該組件的prop。另請注意，我們使用特殊react-dom包來渲染HelloWorld組件。那是因爲核心React包從React版本0.14開始與渲染包分離。
接下來，讓我們創建index.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ReactJS and ES6</title>
</head>
<body>
<div class="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
現在從終端運行gulp（它將創建dist / bundle.js文件）並在瀏覽器中打開此HTML文件。
你應該看到下面的圖像。
