react.js学习demo

需要引入三个js包：browser.min.js、react.js、react-dom.js

-----demo1

<!DOCTYPE html>
<html >
<head>
   <meta charset="UTF-8">
   <title>Hello React</title>
   <script src="react.js"></script>
   <script src="react-dom.js"></script>
   <script src="browser.min.js"></script>
   <style type="text/css">
       #container{
           padding: 50px;
           background-color: #EEE;
       }
       #container h1{
           font-size: 144px;
           font-family: sans-serif;
           color: #0080a8;
       }
   </style>
</head>
<body>
   <div id="container"></div>
   <script type="text/babel">
       var destination = document.querySelector("#container");
       ReactDOM.render(
           <h1>我是谁！</h1>,
           destination
       )

   </script>
</body>
</html>

-------demo2

<!DOCTYPE html>
<html >
<head>
   <meta charset="UTF-8">
   <title>Hello React</title>
   <script src="react.js"></script>
   <script src="react-dom.js"></script>
   <script src="browser.min.js"></script>
</head>
<body>
   <div id="container"></div>
   <script type="text/babel">
       var destination = document.querySelector("#container");
       var Square = React.createClass({
           render : function(){
           var squareStyle = {
               height:150,
               backgroundColor:this.props.color
           }
           return(
               <div style={squareStyle}></div>
           );
       }
       });
       var Label = React.createClass({
           render:function(){
           var labelStyle={
               height:50,
               fontFamily:"sans-serif",
               fontWeight:"bold",
               padding:13,
               margin:0
           };
           return(
               <div style={labelStyle}>{this.props.color}</div>
           );
       }
       });
       var Card = React.createClass({
           render:function(){
           var cardStyle ={
               height:200,
               width:150,
               backgroundColor:"#FFF",
               WebkitFilter:"drop-shadow(0px 0px 5px #666)",
               filter:"drop-shadow(0px 0px 5px #666)"
           };
           return(
               <div style={cardStyle}>
                   <Square color={this.props.color}/>
                   <Label color={this.props.color}/>
               </div>
           );
       }
       });
       ReactDOM.render(
           <Card color="#FFA737"/>,
           destination
       )

   </script>
</body>
</html>

------demo3

<!DOCTYPE html>
<html >
<head>
   <meta charset="UTF-8">
   <title>react component</title>
   <script src="react.js"></script>
   <script src="react-dom.js" ></script>
   <script src="browser.min.js"></script>
</head>
<body>
   <div id="container"></div>
   <script type="text/babel">
       var container = document.querySelector("#container");
       var One = React.createClass({
           render:function(){
           return(
               <div>
                   <p>{this.props.color}</p>
                   <p>{this.props.num}</p>
                   <p>{this.props.size}</p>
               </div>
           );
       }
       });
       var Two = React.createClass({
           render:function(){
           return(
               <One {...this.props}></One>
           );
       }
       });
       var Three = React.createClass({
           render:function(){
           return(
               <Two {...this.props}></Two>
           );
       }
       });
       ReactDOM.render(
           <Three color="deepblue" num="3.14" size="mudium"></Three>,
           container
       );
   </script>
</body>
</html>

----------demo4

<!DOCTYPE html>
<html >
<head>
   <meta charset="UTF-8">
   <title>绘制定时器</title>
   <script src="react.js"></script>
   <script src="react-dom.js"></script>
   <script src="browser.min.js"></script>
</head>
   <body>
   <div id="container"></div>
   <script type="text/babel">
       var destination = document.querySelector("#container");
       var Textpart = React.createClass({
       //进行初始化，加载组件时先进行执行
       getInitialState:function(){
           return{
           strikes:0
       };
       },
       timerTick:function(){
           this.setState({
               strikes:this.state.strikes + 100
           });
       },
       //在render函数被调用前被执行
       //timerTick函数需要进行实现
       componentDidMount:function(){
           setInterval(this.timerTick,1000);
       },
       render:function(){
           var counterStyle={
               color:"#66FFFF",
               fontSize:50
           }
           var count=this.state.strikes.toLocaleString();
           return(
               <h1 style={counterStyle}>{count}</h1>
           );
       }
       });
   var Stylepart=React.createClass({
       render:function(){
           var commonStyle={
               margin:0,
               padding:0
           }
       var divStyle={
       width:250,
       textAlign:"center",
       backgroundColor:"black",
       padding:40,
       color:"#999",
       fontFamily:"sans-serif",
       borderRadius:10
       };
       var textStyle={
           emphasis:{
                   fontSize:38,
                   ...commonStyle
           },
           smallEmpasis:{
               ...commonStyle
           },
           small:{
               fontSize:17,
               opacity:0.5,
               ...commonStyle
           }
       }

       return(
           <div style={divStyle}>
               <Textpart/>
                   <h2 style={textStyle.smallEmpasis}>雷霆打击</h2>
                   <h2 style={textStyle.emphasis}>我们的地球</h2>
           </div>
       );
   }
   });
   ReactDOM.render(
       <Stylepart/>,
       destination
   )
</script>
</body>
</html>

----------demo5

<!DOCTYPE html>
<html >
<head>
   <meta charset="UTF-8">
   <title>Component组件</title>
   <script src="react.js"></script>
   <script src="react-dom.js"></script>
   <script src="browser.min.js"></script>
</head>
<body>
   <div id="container"></div>
   <script type="text/babel">
       //创建自定义标签
       var HelloWorld = React.createClass(
           {
               render:function(){
               return (
                   <div>
                       <p>Hello World!</p>
                       <p>Hello,{this.props.greetTarget}</p>
                   </div>
               );
           }
           }
       );
       ReactDOM.render(
           <HelloWorld greetTarget="jack"/>,
           document.querySelector("#container")
       );
   </script>
</body>
</html>

----------------demo6

<!DOCTYPE html>
<html >
<head>
   <meta charset="UTF-8">
   <title>lifecycle</title>
   <script src="react.js"></script>
   <script src="react-dom.js"></script>
   <script src="browser.min.js"></script>
</head>
<body>
   <div id="container"></div>
   <script type="text/babel">
       var destination=document.querySelector("#container");
       var CounterParent = React.createClass({
           getDefaultProps:function(){
               console.log("getDefaultProps");
               return {};
           },
           getInitialState:function(){
               console.log("getInitialState");
               return {};
           },
           componentWillMount:function(){
               console.log("componentWillMount");
               return;
           },
           componentDidMount:function(){
               console.log("componentDidMount");
               return;
           },
           render:function(){
               return(
                   <h1>CounterParent</h1>
               )
           }
       })

       ReactDOM.render(
           <h2>life cycle</h2>,destination
       )
   </script>
</body>
</html>

---------声明周期函数如下：

componentWillMount
componentDidMount
componentWillUnmount
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillReceiveProps