淘先锋技术网

首页 1 2 3 4 5 6 7

需要引入三个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