React.js in es6

React.js 在 v0.13.0 版之後開始支援 ES6 的語法，如果想學習 ES6 語法的人可以看一下這些教學

• ECMAScript 6入门
• Learn ES6

對於最新 ES6 的 React.js 寫法，一個最基本的範例就是建立一個 Component

React Component

以往 ES5 我們會利用類似如下的寫法來建立一個 Component

	var React = require("react");
	var CommentBox = React.createClass({
	render: function() {
	return (
	<div className="commentBox">
	Hello, world! I am a CommentBox.
	</div>
	);
	}
	});
	module.exports = CommentBox;

view raw es5_basic.js hosted with ❤ by GitHub

首先在 ES5 我們會用 require 來引入你需要的模組，再來利用 React.createClass 建立一個 Component

最後透過 module.exports 來 export 一個 Component

至於要如何用 ES6 的語法建立一個 React 的 Component 呢?　如下：

	import React from "react";
	class CommentBox extends React.Component{
	render(){
	return (
	<div className="commentBox">
	Hello, world! I am a CommentBox.
	</div>
	);
	}
	}
	export default CommentBox;

view raw es6-basic.js hosted with ❤ by GitHub

我們可以看到原本的 require 換成了 import {} from "" 而 module.exports 換成了 export default

最重要的是，利用了 ES6 定義的 class 來達到基本的 prototype-based 的 object oriented pattern

所以在 ES6 語法中我們就可以把一個 React 的 Component 透過 class 的定義並繼承 React.Component 來建立一個 Component 的類別

當然大多數 React 所定義的方法都沒有變動，包括 render, componentWillMount, componentDidMount...等等

Prop & PropTypes

接下來我們的 Component 建議最好要定義 props 的型態和預設值，React 會幫你驗證

如果有型態錯誤，會在 console 印出警告。在 ES5 的語法中，我們是這樣寫的

	var CommentBox = React.createClass({
	propTypes: {
	message: React.PropTypes.string
	},
	getDefaultProps: function() {
	return {
	message: 'Hello, world.'
	};
	},
	render: function() {
	return (
	<div className="commentBox">
	{this.props.message}
	</div>
	);
	}
	});

view raw es5-props.js hosted with ❤ by GitHub

至於在 ES6 中，我們會這樣定義：

	class CommentBox extends React.Component{
	render(){
	return (
	<div className="commentBox">
	Hello, world! I am a CommentBox.
	</div>
	);
	}
	}
	CommentBox.propTypes = {
	message: React.PropTypes.string
	};
	CommentBox.defaultProps = {
	message: "Hello, world."
	};

view raw es6-props.js hosted with ❤ by GitHub

個人是認為 ES6 的語法透過 class 的定義方式會稍為簡單明瞭 :)

State

在 ES5 的寫法中，我們會定義 getInitialState 來初始化 Component 的 state 物件，如下所示：

	var CommentBox = React.createClass({
	getInitialState: function() {
	return {nameWithQualifier: 'Mr. ' + this.props.name};
	},
	render: function() {
	return (
	<div className="commentBox">
	{this.state.nameWithQualifier}
	</div>
	);
	}
	});

view raw es5-state.js hosted with ❤ by GitHub

至於在 ES6 的語法中，可以在 constructor (類似Java的建構子) 中透過 this.state 直接定義 state 的物件

Instance method

	class CommentBox extends React.Component{
	constructor(props) {
	super(props);
	this.state = {
	nameWithQualifier: 'Mr. ' + this.props.name
	};
	}
	render(){
	return (
	<div className="commentBox">
	{this.state.nameWithQualifier}
	</div>
	);
	}
	}

view raw es6-state.js hosted with ❤ by GitHub

這裡所謂的 instance method，就是在描述 component 觸發事件 callback function 中，this 的問題，例如 click

這在 ES5 中是沒有這樣的問題的，例如：

	var CommentBox = React.createClass({
	handleBtnClick: function(e) {
	console.log(this.props.message);
	},
	render: function() {
	return (
	<div>
	<div className="commentBox">
	{this.props.message}
	</div>
	<button onClick={this.handleBtnClick}>Click me</button>
	</div>
	);
	}
	});

view raw es5-instancemethod.js hosted with ❤ by GitHub

但是在 ES6 的寫法中，我們必須在 callback function 後面加上 .bind(this)，否則 this 會是觸發事件的那個物件

	class CommentBox extends React.Component{
	handleBtnClick: function(e) {
	console.log(this.props.message);
	},
	render(){
	return (
	<div>
	<div className="commentBox">
	{this.props.message}
	</div>
	<button onClick={this.handleBtnClick.bind(this)}>Click me</button>
	</div>
	);
	}
	}

view raw es6-instancemethod.js hosted with ❤ by GitHub

也可以像以下的方式也是可行的：

<button onClick={(e) => this.handleBtnClick}>Click me</button>

view raw es6-improveinstancemethod.js hosted with ❤ by GitHub

結論

其實利用 ES6 來撰寫 React，改動老實說沒有很大，但你可以多加利用 ES6 的新語法來完成一些新的 JS 特性

並透過類別繼承的方式讓 Component 更能達到 reusable 以及 maintainable

另外值得一提的就是 mixin 在 ES6 的語法中並不支援，但是目前網路上有一些人貢獻一些方式可以達成

但這都不是官方所釋放出來的解決方案，所以這點需要多加考慮

至於要如何將 ES6 的語法轉譯成 ES5，你可以用 babel 或是 traceur 來完成

babel 的話，之前有寫過一個簡單的範例，可以參考>>範例<<