瞭解babel

1. Babel 是一個普遍使用的轉碼器，將 es6 轉成 es5 ，從而在現有的環境執行，因此無需擔憂環境的問題，就能夠使用es6語法

    另外，Traceur也能夠將將 es6 轉成 es5

2. 配置文件.babelrc  或者在 package.json配置

{「presets」: [], ‘plugins’: []}

    presets字段設定轉碼規則

 {「presets」: [「es2015」, 「react」, 「stage-2」], plugins: []}

   

ps：npm install --save 與 npm install --save-dev 的區別是分別安裝在dependencies （生產環境）和 devDependencie（開發環境）

其中

        1> npm install默認會安裝兩種依賴 

        2> npm install packagename —dev (安裝devDependencies)

        3> npm install packagename (只會安裝dependencies)

3. 與其餘工具配合

   例如：eslint靜態檢查代碼的風格和語法

       1> 安裝：npm install —save-dev aslant babel-eslint

       2> 根目錄新建配置文件 .eslint , 加入 parser 字段

 {‘parser’: ‘babel-eslint’, rules: {}}

       3>  package.json 中加入 scripts 腳本

          

具體閱讀： http://www.ruanyifeng.com/blog/2016/01/babel.html

react on es6+

 

1. 使用 React.Component instead React.createClass

2. constructor 與 componentWillMount 用法相同

// The ES5 way
var EmbedModal = React.createClass({
  componentWillMount: function() { … },
});

constructor 默認返回實例對象（即this），

子類必須在constructor方法調用super方法，不然新建實例時會報錯，由於子類繼承了父類的this對象

也就是調用了父類的構造函數，react但願把全部props和state的定義都放在父類進行，子類中須要繼承父類的構造函數來使用這些值

// The ES6+ way
class EmbedModal extends React.Component {
  constructor(props) {
    super(props);
    // Operations usually carried out in componentWillMount go here
  }
}

3. 屬性的初始化

// The ES5 way
var Video = React.createClass({
  getDefaultProps: function() {
    return {
      autoPlay: false,
      maxLoops: 10,
    };
  },
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops,
    };
  },
  propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  },
});

// The ES6+ way
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

4.箭頭函數

https://babeljs.io/blog/2015/06/07/react-on-es6-plus

5.動態屬性名

對於想要訪問 「變量+’Value’」 動態屬性名能夠使用 [`${}Value`], 例如：

class Form extends React.Component {
  onChange(inputName, e) {
    this.setState({
      [`${inputName}Value`]: e.target.value,
    });
  }
}

6.傳遞屬性

其中，this.props 含有 className 屬性

1> 下面 className 爲 override

<div {...this.props} className="override">
  …
</div>

2> 下面 clasName 爲 this.props裏面的值

<div className="base" {...this.props}>
  …
</div>