ReactJS结合ES6入门Template

一、前言

二、介绍

1. ReactJS
2. ECMAScript 6

三、入门DEMO

1. "Hello,XXX“ 输出

　　ES5写法

<div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
 </script>

　　ES6

import React,{Component} from 'react';
class HelloMessage extends Component{
  constructor() {
    super();
  }
  render(){
    return <h1>Hello {this.props.name}</h1>;
  }
}
class Output extends Component{
  constructor() {
    super();
  }
  render(){

    return (
      <div>
          <HelloMessage name="John" />
      </div>
    );
  }
}
export default Output;

　　2. 数组遍历显示

　　ES5

　

<script type="text/jsx">
      var names = ['Alice', 'Emily', 'Kate'];

      React.render(
        <div>
        {
          names.map((name)=>return <div>Hello, {name}!</div>; );
        }
        </div>,
        document.getElementById('example')
      );
    </script>

<script type="text/jsx">
      var arr = [
        <h1>Hello world!</h1>,
        <h2>React is awesome</h2>,
      ];
      React.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>

　　ES6

class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    var arr = [
      <h1>Hello world!</h1>,
      <h2>React is awesome</h2>,
    ];
    var names = ['Alice', 'Emily', 'Kate'];
    return (
      <div>
      {arr}
      {
        names.map((name) =>{return <div>Hello, {name}!</div>;} )
      }
      </div>
    );
  }
}
export default RepeatArray;

　　3. ol与li的实现

　　ES5

<script type="text/jsx">
      var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
                this.props.children.map(function (child) {
                  return <li>{child}</li>
                })
              }
            </ol>
          );
        }
      });

      React.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.body
      );
    </script>

　　ES6

class RepeatLi extends Component{
  render(){
    return (
      <ol>
      {
        this.props.children.map((child)=>{return <li>{child}</li>})
      }
      </ol>
    );
  }
}
class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    return (
      <div>

      <RepeatLi>
        <span>hello</span>
        <span>world</span>
      </RepeatLi>

      </div>
    );
  }
}
export default RepeatArray;

　　4. Click事件

　　ES5

script type="text/jsx">
var MyComponent = React.createClass({
  handleClick: function() {
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

React.render(
  <MyComponent />,
  document.getElementById('example')
);
    </script>

　　ES6

class FocusText extends Component{
  handleClick(){
    React.findDOMNode(this.refs.myText).focus();
  }
  render(){
    return(
      <div>
        <input type="text" ref="myText" />
        <input type="button" value="focus the text input" onClick={this.handleClick.bind(this)} />
      </div>
    );
  }
}
class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    return (
      <div>
      <FocusText />
      </div>
    );
  }
}
export default RepeatArray;

　　5. State的用法，以toggel显示文字为例

　　ES5

    <script type="text/jsx">
var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  document.getElementById('example')
);
    </script>

　　ES6

class StateUse extends Component{
  constructor(){
    super();
    this.state={
      like:true
    }
  }
  handleClick(){
    this.setState({like:!this.state.like});
  }
  render(){
    var text = this.state.like?'Like':"Unlike";
    return(
      <div>
        <p onClick={this.handleClick.bind(this)}>
        You {text} this.Click the toggle;
        </p>
      </div>
    );
  }
}
class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    return (
      <div>
      <StateUse />
      </div>
    );
  }
}
export default RepeatArray;

　　6. onChange事件，以及变量值的同步

　　ES5

<script type="text/jsx">
      var Input = React.createClass({
        getInitialState: function() {
          return {value: 'Hello!'};
        },
        handleChange: function(event) {
          this.setState({value: event.target.value});
        },
        render: function () {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        }
      });

      React.render(<Input/>, document.body);
    </script>

　　ES6

class AsyncText extends Component{
  constructor(){
      super();
      this.state={
        value:'Hello!'
      }
  }
  handleChange(e){
    this.setState({value:e.target.value});
  }
  render(){
    var value= this.state.value;
    return(
      <div>
        <input type="text" value={value} onChange={this.handleChange.bind(this)} />
        <p>
          {value}
        </p>
      </div>
    );
  }
}
class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    return (
      <AsyncText />
      </div>
    );
  }
}
export default RepeatArray;

　　7. 定时任务事件的嵌入

　　ES5

<script type="text/jsx">
      var Hello = React.createClass({
        getInitialState: function () {
          return {
            opacity: 1.0
          };
        },

        componentDidMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
          }.bind(this), 100);
        },

        render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });

      React.render(
        <Hello name="world"/>,
        document.body
      );
    </script>

　　ES6

class OpacityWord extends Component{
  constructor(){
    super();
    this.state={
      opacity:1.0
    }
  }
  componentWillMount(){
    let time  =  setInterval(()=>{
      let opacity = this.state.opacity;
      opacity -= 0.5;
      if (opacity<0.1) {
        opacity=1.0;
      }
      this.setState({opacity:opacity});
    }.bind(this),100);
  }
  render(){
    return (
      <div style={{ opacity:this.state.opacity }}>
        Hello, {this.props.name}!
      </div>
    );
  }

}

class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    return (
      <div>
       <OpacityWord />
      </div>
    );
  }
}
export default RepeatArray;

　　8. 从服务端获取数据

　　ES5

  <script type="text/jsx">
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];

        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });

    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}s last gist is
         <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

React.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);
    </script>

　　ES6

class UserGist extends Component{
  constructor(){
    super();
    this.state={
      username:'',
      lastGistUrl:''
    }
  }
  componentWillMount(){
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      //if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      //}
    }.bind(this));
  }
  render(){
    return(
      <div>
        {this.state.username} ..
        <a href={this.state.lastGistUrl} >here</a>
      </div>
    );
  }
}
class RepeatArray extends Component{
  constructor() {
    super();
  }
  render(){
    return (
      <div>
      <UserGist source="https://api.github.com/users/octocat/gists" />
      </div>
    );
  }
}
export default RepeatArray;