# react-demos
**Repository Path**: mirrors_Binaryify/react-demos
## Basic Information
- **Project Name**: react-demos
- **Description**: a collection of simple demos of React.js(ES6)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-22
- **Last Updated**: 2026-01-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# React ES6 Version
This is a collection of simple demos of React.js for using ES6.
这是一个React使用ES6语法的简易教程,这个实例教程在阮一峰老师的[React入门实例教程](http://www.ruanyifeng.com/blog/2015/03/react.html)的基础上使用ES6重写而来
[origin github website](https://github.com/ruanyf/react-demos)
[原github地址](https://github.com/ruanyf/react-demos)
>你只需要跟着每一个 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
```html
Document
```
# Class
```js
//ES5
var NotesList = React.createClass({
render: function() {
return (
{
React.Children.map(this.props.children, function (child) {
return - {child}
;
})
}
);
}
});
```
```js
//ES6
class NotesList extends React.Component{
render(){
return (
{
React.Children.map(this.props.children, function (child) {
return - {child}
;
})
}
);
}
}
```
# State
```js
//ES5
getInitialState: function() {
return {liked: false};
}
```
```js
//ES6
constructor(props) {
super(props);
this.state= {
liked:false
}
}
```
# isMounted
ES6 is no support `this.isMounted()`
# Event
```js
//ES5
```
```js
//ES6
{this.handleChange(e)}} />
```
# This is also hava a React-webpack-ES6 demo
[github](https://github.com/zhuangtongfa/react-webpack-ES6-demo)
Try it!