react基础demo

使用时需要引入相关库文件：

 <script src="../static/build/react.js"></script> <script src="../static/build/react-dom.js"></script> <script src="../static/build/browser.min.js"></script>

一个用于显示react效果的div：

<div id="container"></div>

      var names = ['Alice', 'Emily', 'Kate'];      ReactDOM.render(        <div>        {          names.map(function (name, index) {            return <div key={index}>Hello, {name}!</div>          })        }        </div>,        document.getElementById('container')      );       /*在react中使用选择器样式设置组建样式时，属性名不能使用class，要使用className替换       类似的，使用htmlFor替换for       * */

注意所有的react需要写在

<script type="text/babel">
</script>标签中

       var hStyle={            backgroundColor:"red"        };       var Message=React.createClass({            render:function () {                return (                        <div style={{backgroundColor:"yello"}}>                            <h1 style={hStyle}>                                {this.props.firstRow}                            </h1>                            <p className="pStyle">                                {this.props.secondRow}                            </p>                        </div>                );            }        });        ReactDOM.render(            <Message firstRow="张三" secondRow="李四"/>,            document.getElementById('container')        );

/*复合组件*/    var WebName=React.createClass({        render:function () {            return <h1>复合组件</h1>;        }    });    var WebLine=React.createClass({        render:function () {            return <a href="http://www.baidu.com">百度</a>;        }    });    var WebShow=React.createClass({        render:function () {            return (                    <div>                        <WebName></WebName>                        <WebLine></WebLine>                    </div>            );        }    });    ReactDOM.render(        <WebShow/>,        document.getElementById('container')    );

var Webname=React.createClass({        render:function () {            return <h1>{this.props.webname}</h1>;        }    });    var Weblink=React.createClass({        render:function () {            return <a href={this.props.weblink}>{this.props.weblink}</a>;        }    });    var WebShow=React.createClass({        render:function () {            return (                <div>                    <Webname webname={this.props.webname}/>                    <Weblink weblink={this.props.weblink}/>                </div>            );        }    });    ReactDOM.render(        <WebShow webname="title" weblink="http://www.baidu.com"/>,        document.getElementById('container')    );

...this.propsprops提供的语法糖，可以将父组件中的所有属性复制给子组件

var Link=React.createClass({        render:function () {            return <a {...this.props}>{this.props.name}</a>;        }    });    ReactDOM.render(        <Link href="http://www.baidu.com" name="baidu"/>,        document.getElementById('container')    );

 var ListComponent=React.createClass({        render:function () {            return (                    <ul>                        {                            /*                            列表项的内容和数量不确定，                            利用this.props.children从父组件获取需要展示的列表项内容                            获取到列表项内容后，需要遍历children，逐项进行设置                            使用React.children.map方法                            返回值，数组对象                            这里激活素组元素中的对象是<li>                            */                            React.Children.map(this.props.children,function (child) {                                /*child是遍历得到的子节点*/                                return <li>{child}</li>                            })                        }                    </ul>            );        }    });  ReactDOM.render(          <ListComponent >              <h1>                  li标签              </h1>              <a href="http://www.baidu.com">百度</a>          </ListComponent>,      document.getElementById('container')  );
用于验证组件实例的属性是否符合要求
var ShowTitle=React.createClass({       propTypes:{           title:React.PropTypes.string.isRequired       },       render:function () {           return <h1>{this.props.title}</h1>       }    });    ReactDOM.render(        <ShowTitle title="baidu"/>,        document.getElementById('container')    );
用于验证组件实例的属性是否符合要求
var ShowTitle=React.createClass({       propTypes:{           title:React.PropTypes.string.isRequired       },       render:function () {           return <h1>{this.props.title}</h1>       }    });    ReactDOM.render(        <ShowTitle title="baidu"/>,        document.getElementById('container')    );
设置组件的属性默认值
var Mytitle=React.createClass({       getDefaultProps:function () {           return {               title:"baidu"           };       },       render:function () {           return <h1>{this.props.title}</h1>       }   });   ReactDOM.render(       <Mytitle/>,       document.getElementById('container')   );
事件处理
var MyButton=React.createClass({       handleClick:function () {            alert("点击事件");       },       render:function () {           return <button onClick={this.handleClick}>{this.props.buttonTitle}</button>       }   });   ReactDOM.render(       <MyButton buttonTitle="test"/>,       document.getElementById('container')   );
var CheckButton=React.createClass({       /*定义初始状态*/       getInitialState:function () {            return {                isCheck:true            }       },       handleChange:function () {           this.setState({            isCheck: ! this.state.isCheck           });       },       /*当组建的状态发生变化时，会调用组件的render方法*/       render:function () {           var text=this.state.isCheck ? "已选中":"未选中";           return (                   <div>                       <input type="checkbox" onChange ={this.handleChange}/>                       {text}                   </div>           );       }   });   ReactDOM.render(       <CheckButton/>,       document.getElementById('container')   );