用 ES6 寫 React Component

現在的案子已經靠 Babel （之前叫做 6to5 ），使用 ES6 寫 React(0.12.0) Component 。

用到的特性有：

最後交給 webpack 打包，細節就不詳述。

所以現在是怎麼寫 React Component 的？

以麵包屑為例，一開始先為 component 打個骨架：

import React from 'react';

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

export default Breadcrumbs;

現在這個 Breadcrumbs 啥也不做，只是一個 <nav /> 標籤。使用 ES6 的 import 和 export ，而不是 var React = require('react') 與 module.exports = Breadcrumbs 。在 ES6 的 Enhanced Object Literals 幫助下，可以少打幾個字，而不用寫：

{
  render: function () {
    return <nav />;
  }
}

接著把缺少的部分補上：

import React from 'react';

var Breadcrumbs = React.createClass({
  render() {
    return (
      <nav className="breadcrumbs">
        <a href="index.html">Home</a>
        <span><span className="divider">›</span>React</span>
        <span><span className="divider">›</span>About</span>
      </nav>
    );
  }
});

export default Breadcrumbs;

接著希望它能發揮麵包屑該有的功能，於是在 props 裡給出現在的路徑：

import React from 'react';

var Breadcrumbs = React.createClass({
  getDefaultProps() {
    return {
      path: ['React', 'About'];
    };
  },
  render() {
    var { path } = this.props;
    return (
      <nav className="breadcrumbs">
        <a href="index.html">Home</a>
        {
          path.map((v) => {
            return <span><span className="divider">›</span>{v}</span>
          })
        }
      </nav>
    );
  }
});

export default Breadcrumbs;

這邊使用到 Destructuring ，

var { path } = this.props;

相當於：

var path = this.props.path;

遇到像這樣的狀況，可以少打很多字，又讓 code 好讀：

var { str, con, dex, int, wiz, cha } = this.props;

接著靠 Array.prototype.map 列舉 path 的內容，用 Arrows () => {} 取代長長的 function () {} ，加上 Fat Arrows 會自動綁定 function 裡面的 this ，用在 click 之類的事件上很方便，例如：

render() {
  return <div onClick={() => this.setState({ foo: 'bar' })}>foobar</div>;
}

而不用再寫：

render() {
  var self = this;
  return <div onClick={() => self.setState({ foo: 'bar' })}>foobar</div>;
}

最後 import 該 component 的 scss ，就完成了：

import React from 'react';
import './Breadcrumbs.scss';

別的 Component 怎麼使用這個 Component ？

上層只要 import 即可：

import Breadcrumbs from './Breadcrumbs';

/* 略 */

  render() {
    return (
      <div>
        <Breadcrumbs path={['More', 'React', 'About']} />
      </div>
    );
  }

/* 略 */

參考資料

6to5 改叫 Babel 了，它的教學教了我很多，中文的 ECMAScript 6 入门也很棒，但是沒有個別功能的連結。 @lyforever 還推薦了 Understanding ECMAScript 6 。

EDIT

再次感謝 @lyforever review jsx 。

caasih.net

所以現在是怎麼寫 React Component 的？

別的 Component 怎麼使用這個 Component ？

參考資料

EDIT