react 部分ES6寫法

react+react-router+antd 栗子：https://github.com/Aquarius1993/reactApp

模塊：

1. 引入模塊

import React from 'react';

 

2. 導出組件

export default App;

 

3. 引用

import App from './APP.jsx';

 

組件：

1.  結構

class App extends React.Component {}

 

2. 設置state

用 constructor 代替 getInitialState：

getInitialState() {
return {liked: false};
}

 

======》

constructor(props) {
super(props);
this.state = {
liked: false
}
}

 

3. 設置默認Props

class LinkButton extends React.Component {
getDefaultProps() {
 return {
     name: 'Runoob'
    };
}
 
}

 

=====》

LinkButton.defaultProps = {name: 'Runoob'}

 

4.  props驗證propTypes

propTypes: {
   title: React.PropTypes.string.isRequired,
 },

 

======》

LinkButton.propTypes = {title: React.PropTypes.string.required}

 

5. 事件綁定

<p onClick={this.handelClick}>點我切換狀態</p>

 

=======》

<p onClick={e=>this.handelClick(e)}>點我切換狀態</p>