1.Hello, world!

ReactDOM.render(    
Hello, world!
,    document.getElementById('example'));

2.遍历数组

var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(    
    
         {      names.map(function (name) {        return 
     
      Hello, {name}!
     
      })    }    
    
,    document.getElementById('example'));

3.数组渲染

var arr = [    
Hello world!
,    
React is awesome
,];ReactDOM.render(    
    
     {arr}
    
,    document.getElementById('example'));

4.属性值传递

var HelloMessage = React.createClass({    render: function() {      return 
Hello {this.props.name}
;    }});ReactDOM.render(    
    ,    document.getElementById('example'));

5.子元素传递

var NotesList = React.createClass({    render: function() {      return (        
    
               {            React.Children.map(this.props.children, function (child) {              return 
     
{child}
;            })          }        
    
      );    }});ReactDOM.render(    
          
     hello      
     world    
    ,    document.body);

6.属性类型限制

var data = 123;var MyTitle = React.createClass({    propTypes: {      title: React.PropTypes.string.isRequired,    },        render: function() {      return 
 {this.props.title} 
;    }});ReactDOM.render(    
    ,    document.body);

7.事件

var MyComponent = React.createClass({  handleClick: function() {    this.refs.myTextInput.focus();  },  render: function() {    return (      
    
        
             
           
    
    );  }});ReactDOM.render(  
    ,  document.getElementById('example'));

8.利用state制作LikeButton

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 (        
            You {text} this. Click to toggle.        
        );    }});ReactDOM.render(    
    ,    document.getElementById('example'));

9.利用state制作input

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 (        
    
          
               
     
{value}
        
    
      );    }});ReactDOM.render(, document.body);

10.定时器

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 (        
    
               Hello {this.props.name}        
    
      );    }});ReactDOM.render(    
    ,    document.body);

11.与jquery配合实现ajax

var UserGist = React.createClass({  getInitialState: function() {    return {      username: '',      lastGistUrl: ''    };  },  componentDidMount: function() {    $.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: function() {    return (      
    
             {this.state.username}'s last gist is 
     here.      
    
    );  }});ReactDOM.render(  
    ,  document.body);

12.利用state实现一个组件的loading/error画面

var RepoList = React.createClass({  getInitialState: function() {    return {      loading: true,      error: null,      data: null    };  },  componentDidMount() {    this.props.promise.then(      value => this.setState({loading: false, data: value}),      error => this.setState({loading: false, error: error}));  },  render: function() {    if (this.state.loading) {      return Loading...;    }    else if (this.state.error !== null) {      return Error: {this.state.error.message};    }    else {      var repos = this.state.data.items;      var repoList = repos.map(function (repo) {        return (          
{repo.name} ({repo.stargazers_count} stars) 
 {repo.description}
        );      });      return (        
    
          
     
Most Popular JavaScript Projects in Github
          
     
      {repoList}
     
        
    
      );    }  }});ReactDOM.render(  
    ,  document.body);