React ES6 Version

This is a collection of simple demos of React.js for using ES6.

这是一个React使用ES6语法的简易教程,这个实例教程在阮一峰老师的React入门实例教程的基础上使用ES6重写而来

你只需要跟着每一个 Demo 做一遍，就能初步掌握 React 。当然，前提是你必须拥有基本 JavaScript 和 DOM 知识，但是你读完就会发现，React 所要求的预备知识真的很少。

How to use

$ git clone git@github.com:zhuangtongfa/react-demos.git

use http-server in the folder,open the '127.0.0.1:8080'

How to install http-server

npm install http-server -g

HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.min.js"></script>
  <script type="text/babel" src=js/app.jsx>
  </script>
</head>
<body>
<div id="example">
</div>
</body>
</html>

Class

//ES5
var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
        {
          React.Children.map(this.props.children, function (child) {
            return <li>{child}</li>;
          })
        }
      </ol>
    );
  }
});

//ES6
class NotesList extends React.Component{
  render(){
    return (
      <ol>
        {
          React.Children.map(this.props.children, function (child) {
            return <li>{child}</li>;
          })
        }
      </ol>
    );
  }
}

state

//ES5
getInitialState: function() {
    return {liked: false};
  }

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

isMounted

ES6 is no support this.isMounted()

event

//ES5
<input type="text" value={value} onChange={this.handleChange} />

//ES6
<input type="text" value={value} onChange={e=>{this.handleChange(e)}} />

this is also hava a React-webpack-ES6 demo

try it!

Evan-ZTF / react-demos