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.props
props提供的语法糖，可以将父组件中的所有属性复制给子组件

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')
   );