This is a collection of simple demos of React.js for using ES6.
这是一个React使用ES6语法的简易教程,这个实例教程在阮一峰老师的React入门实例教程的基础上使用ES6重写而来
你只需要跟着每一个 Demo 做一遍，就能初步掌握 React 。当然，前提是你必须拥有基本 JavaScript 和 DOM 知识，但是你读完就会发现，React 所要求的预备知识真的很少。
$ git clone [email protected]:zhuangtongfa/react-demos.git
use http-server in the folder,open the '127.0.0.1:8080'
npm install http-server -g
<!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>//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>
);
}
}//ES5
getInitialState: function() {
return {liked: false};
}//ES6
constructor(props) {
super(props);
this.state= {
liked:false
}
}ES6 is no support this.isMounted()
//ES5
<input type="text" value={value} onChange={this.handleChange} />//ES6
<input type="text" value={value} onChange={e=>{this.handleChange(e)}} />Try it!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent