React入門

React入門実例教程1、Browser.jsの役割はJSX文法をJavaScript文法に変えることです.このステップは時間がかかります.実際にオンラインする時、サーバーに置いて完成するべきです.コンポーネントは、実際のDOMノードではなく、メモリに存在するデータ構造の一種であり、仮想DOMと呼ばれる.ドキュメントを挿入すると、実際のDOMになります.Reactの設計によると、すべてのDOM変動は仮想DOMで発生し、その後実際に変動が発生した部分を実際のDOMに反映し、このアルゴリズムをDOM diffといい、ウェブページの性能表現を大幅に向上させることができる.

  
    
    
    
  
  
    

    
      var LikeButton = React.createClass({
        //  props
        propTypes: {
            name: React.PropTypes.string.isRequired,
        },
        //     
        getInitialState: function() {
          return {liked: false,value: 'Hello!'};
        },
        btclick: function() {
            //ref    dom
            this.refs.myTextInput.focus();
        },
        handleClick: function(event) {
          //          ,        
          this.setState({liked: !this.state.liked});
        },
        inputchange: function(event) {
            this.setState({value: event.target.value});
        },
        render: function() {
          console.log(this.props.name);//  name  
          var text = this.state.liked ? 'like' : 'haven\'t liked';
          var value = this.state.value;
          return (
              <div>
                <p onClick={this.handleClick}>
                  You {text} this. Click to toggle.
                </p>
                <input type="text" ref="myTextInput"  value={value} onChange={this.inputchange}/>
                <input type="button" value="Focus the text input" onClick={this.btclick} />
                <p>{value}</p>
                <ol>
                    {
                        React.Children.map(this.props.children, function (child) {
                            return <li>{child}</li>;
                        })
                    }
                </ol>
              </div>
          );
        }
      });
      ReactDOM.render(
        <LikeButton name="this.props  ">
          <span>hello</span>
          <span>world</span>
        </LikeButton>,
        document.getElementById('example')
      );