React與ES6系列：
- React與ES6（一）開篇介紹
- React和ES6（二）ES6的類和ES7的property initializer
- React與ES6（三）ES6類和方法綁定
- React與ES6（四）ES6如何處理React mixins
ES2015（也就是ES6）帶來了很多新的語言特性。比如：類、箭頭方法、rest參數、promise、generator等很多。如果你對ES6還不是很熟悉的話可以看這里。
但是瀏覽器對於ES6的支持還不是很好。你可以看看這個ES6兼容表。顯而易見的是不同瀏覽器對於ES6的兼容參差不齊。於是就有人想把ES6的代碼轉成ES5的不就可以兼容了嗎。
這其中做的最好的就是Babel, 一個非常棒的工具。后面會詳細的介紹如何使用。
准備開發環境
為了可以正常開發，那么就需要用到webpack。這個工具可以把模塊和相關的依賴項都打包到一起。之后，只要在瀏覽器中引用打包的腳本。
- 首先你需要安裝nodejs。如果你還沒有安裝的話，直接去官網下載最新的安裝包安裝即可。
- 接下來安裝
webpack。npm install webpack --save-dev。 - 安裝
babel-loader。npm install babel-loader babel-preset-es2015 babel-preset-react --save。有了babel-loader和對應的preset，就可以把ES6的代碼轉換為ES5了。但是，之前還需要配置babel-loader。 - 安裝react以及相關包。
npm install react react-dom --save。
下面就是babel-loader和webpack的配置。首先配置babel-loader否則webpack無法使用babel轉碼。
在根目錄添加文件.babelrc，並在提其中添加如下內容：
{
"presets": ["es2015", "react"]
}
接下來配置webpack。在根目錄創建文件webpack.config.js, 之后在文件中添加如下代碼：
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel'
}
]
}
};
module.exports = config;
最后，在package.json文件中的scripts節點下添加如下內容：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
現在可以運行命令npm run dev開始開發，這時webpack會監視源代碼的改變，任何對源代碼的修改都會觸發重新打包的動作。
更多關於webpack和babel-loader的配置方面的內容請移步這里。本文不再多做介紹。
JSX和Babel
你可能已經注意到，我們使用的是.jsx后綴而不是js。JSX是ReactJs團隊開發的一個JavaScript的擴展。點擊這里查看更多關於JSX的內容。
使用ES6寫第一個React組件
是不是已經等不及了。
先來看看項目結構：
project
|--src
|--client
|--app
|--public
|--index.html
|--.babelrc
|--package.json
|--webpack.config.js
在app目錄下創建一個文件index.jsx作為React項目的入口文件。之后添加hello-world.jsx文件。在其中添加如下代碼：
import React from 'react'; // 1
// 2
export default class HelloWorld extends React.Component {
// 3
render() {
// 4
return <h1>Hello from {this.props.phrase}</h1>
}
}
解釋一下上面的代碼：
- 把React庫import引入到
React變量中。 - 定義了一個我們自己的組件
HelloWorld，這個組件繼承（extends）自React.Component。注意：在類的前面還有關鍵字export default，在別的模塊中import並使用HelloWorld組件。 - 覆蓋React組件的
render方法。 render方法返回JSX定義的html元素，這個元素內部顯示的文本通過解析this.props.phrase獲得。
組合到一起
在之前已經創建好的index.js文件內添加如下內容：
import React from 'react';
import {render} from 'react-dom';
import HelloWorld from './hello-world';
class App extends React.Component {
render() {
return (<div>
<HelloWorld phrase="ES2015" />
</div>);
}
}
render(<App />, document.getElementById('app'));
打開index.html文件，如果你還沒有創建這個文件的話，那么創建一個。目錄位置參考前面的項目目錄一節。在index.html文件中添加如下內容：
<html>
<head>
<meta charset="utf-8">
<title>React & ES6</title>
</head>
<body>
<div id="app" />
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
所需要的全部材料都有了。現在就可以用webpack打包了。運行命令npm run dev，稍后js代碼就會轉碼，打包到bundle.js文件中了。
在瀏覽器中打開這個html文件。你就會看到運行結果了。