React--Top-Level API

12 Jun 2015

                    
                    //1.React.Component--using ES6 classes to defined react components
                    //you have to lower to es5 with babel
                    // class Hello extends React.Component {
                    //  render(){
                    //    return(
                    //      <h1>Hello!</h1>
                    //    );
                    //  }
                    // }

                    //2.React.createClass--Create a component class, given a specification
                    // render method return must be one single child
                    // var Hello = React.createClass({
                    //  render:function(){
                    //    return(
                    //      <h1>Hello!</h1>
                    //    );
                    //  }
                    // });

                    //3.React.createElement
                    //if you use jsx ,need not use it

                    //4.React.cloneElement
                    //New children will replace existing children. 
                    //Unlike React.addons.cloneWithProps, 
                    //key and ref from the original element will be preserved.

                    //5.React.createFactory
                    //if you use jsx ,need not use it

                    var Hello = React.createClass({
                      //13.React.PropTypes
                      //When an invalid value is provided for a prop, a warning will be shown in the JavaScript console
                      propTypes:{
                        title: React.PropTypes.string.isRequired,
                      },
                      deleteP: function(){
                        //7.React.unmountComponentAtNode
                        //Returns true if a component was unmounted and false if there was no component to unmount.
                        // var hereP = document.getElementById("test1");
                        // React.unmountComponentAtNode(hereP);

                        //???if you delete hereP ,it is not work,because you can not find hereP. you can use another way like setState to control hereP

                        //11.React.findDOMNode
                        //This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements
                        //or you can do like below--no use just reading values
                        //you can use React.findDOMNode to acheve text/value but no delete  
                        var hereP = React.findDOMNode(this.refs.hereP);
                        console.log(hereP.innerHTML);
                      },
                      render:function(){
                        return(
                          <div>
                            <h1>{this.props.title}</h1>
                            <h1 onClick={this.deleteP}>Delete P!!!</h1>
                            <p id="hereP" ref="hereP">test deleteMe!!!</p>
                          </div>
                        );
                      }
                    });

                    //10.React.isValidElement--Verifies the object is a ReactElement.
                    //there is no use,why?
                    //you check just element can work like below, it print true
                    //here you do not set title prop,so you have s warning in console
                    var elementHello = <Hello />;
                    //console.log( "111:"+React.isValidElement(elementHello) );

                    //6.React.render
                    //it has the third parameter callback
                    //If the optional callback is provided, it will be executed after the component is rendered or updated.
                    var title="I come from props";
                    React.render(
                      <Hello title={title}/>,
                      document.getElementById("test1")
                    );

                    //8.React.renderToString--This should only be used on the server
                    //9.React.renderToStaticMarkup Similar like 8

                    //12.React.DOM
                    //if you use jsx ,need not use it

                    //14.React.initializeTouchEvents 
                    //waiting...

                    //15.this.props.children 取得当前组件的子元素
                    //有map/forEach/count/only 四个方法