大綱

• 前言
• 必會的 RS6 相關語法

前言
為了要配合接下來另一個系統的開發，將使用完全的前後端分離，前端將採用 React，後端將使用 Ruby on Rails，兩這之間就透過各式各樣的 API 溝通。哪未來我將負責的是 React 這個部分，因此，這 ES6 的語法我一定要會且要熟悉。

必會的 RS6 相關語法：Modules
import 是使用 import 用法：

import React from 'react';
import MyComonent form './MyComponent';

export 是使用 export default 用法：
export default class MyComponent extends React.Component {
 ...
}

必會的 RS6 相關語法：Classes
class 用法：

class Photoextends React.Component {
  render() {
    return <img alt={this.props.description} src={this.props.src} />;
  }
}
ReactDOM.render(<Photo />, document.getElementById('main'));

在 ES6 我們會在 constructor 建構子中定義生命週期並且希望在 render 前執行，且只會執行一次，其語法如下：

class Photo extends React.Component {
  constructor(props) {
    super(props);
  }
}

必會的 RS6 相關語法：Method definition
在 ES6 我們使用了 Method 之後，就可以忽略 function 和 ,，整體使用上就會更簡潔：

class Photo extends React.Component {
  handleClick(e) {}
  render() {}
}

必會的 RS6 相關語法：Property initializers
在 ES6 中會參考 ES7 的 Property initializers 來使用 class 的靜態屬性 (static properties) 來定義：

class Todo extends React.Component {
  render() {
    return(
      <View />
    );
  }
}
Todo.defaultProps = {
  checked: false,
  maxLength: 10,
},
Todo.propTypes = {
  checked: React.PropTypes.bool.isRequired,
  maxLength: React.PropTypes.number.isRequired,
};

必會的 RS6 相關語法：State
在 ES6 中我們初始化 state，會在建構式初始化，這樣的好處是，方便，方便順便做一點邏輯運算：

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      maxLength: this.props.maxLength,
    };
  }
}

必會的 RS6 相關語法：Default Parameters
在 ES6 可以用更簡潔的方式，來支援預設值的設定：

var link = function(height = 50, color = 'red') {
 ...
}