React学习过程中的笔记小案例

第一个案例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    
    <body>
        <div id="app">
        </div>
    </body>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //1.自定义的组件，必须小大写字母开头
        //2.跟vue一样，组件中根层只能一个顶层标签
        var MyComponenet = React.createClass({
            render:function(){
                return <div><div>123</div><h1>333</h1></div>
            }
        });
        
        ReactDOM.render(
            <MyComponenet/>,
            document.getElementById('app')
        );
        
        
        
        
        
        
    </script>
</html>



//第二个案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        html,body{
            padding: 0px;
            margin: 0px;
        }
        .myheader{
            background-color:bisque;
            height: 40px;
        }
        .mymain{
            background-color:#8A2BE2;
            height: 70px;
        }
        .myfooter{
            background-color:coral;
            height: 40px;
        }
    </style>
    <body>
        <div id="app">
        </div>
    </body>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel" src="./js/MyHeader.js"></script>
    <script type="text/babel" src="./js/MyMain.js"></script>
    <script type="text/babel" src="./js/MyFooter.js"></script>
    <script type="text/babel" src="./js/MyApp.js"></script>
    <script type="text/babel">
        
        
        ReactDOM.render(
            <MyApp/>,
            document.getElementById('app')
        );
        
        
    </script>
</html>

第二个案例：

MyApp.js文件
var MyApp = React.createClass({
    render:function(){
        return <div>
            <MyHeader/>
            <MyMain/>
            <MyFooter/>
        </div>;
    }
});

MyHeader文件：
var MyHeader = React.createClass({
    render:function(){
        return <div className="myheader">这是头部模块</div>
    }
});
MyMain.js文件
var MyMain = React.createClass({
    render:function(){
        return <div className="mymain">这是中间模块</div>
    }
});
MyFoot。js文件
var MyFooter = React.createClass({
    render:function(){
        return <div className="myfooter">这是尾部</div>
    }
});

第三个案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //state状态
        var Myweb = React.createClass({
            getInitialState:function(){//getInitialState一个函数来的
                return {abc:'你好，前端3班'};
            },
            render:function(){
                return <div>
                    {this.state.abc}//state状态的意思
                </div>;
            }            
        });
        
        ReactDOM.render(
            <Myweb/>,
            document.getElementById('app')
        );
        
        
    </script>
</html>

第四个案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //state状态
        var Myweb = React.createClass({
            getInitialState:function(){
                return {abc:'你好，前端3班'};
            },
            ttt:function(event){
                //this.state.abc='你好，前端4班';
                this.setState({abc:'你好，前端3班的同学'});//设置一个状态
            },
            render:function(){
                return <div>
                    <button onClick={this.ttt}>测试</button>
                    <br/>
                    {this.state.abc}
                </div>;
            }            
        });
        
        ReactDOM.render(
            <Myweb/>,
            document.getElementById('app')
        );
        
        
    </script>
</html>

第五个案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //state状态
        var Myweb = React.createClass({
            getInitialState:function(){
                return {abc:'你好，前端3班'};
            },
            ttt:function(event){
                //this.state.abc='你好，前端4班';
                this.setState({abc:'你好，前端3班的同学'});
            },
            mychangeInput1:function(event){
                //alert(event.target.value);
                this.setState({abc:event.target.value});//把节点目标发生改变的值设置到abc
            },
            //以下input中onChang事件发生改变时（也就是文本内容发生改变就触发mychangInput事件）
            render:function(){
                return <div>
                    <button onClick={this.ttt}>测试</button>
                    <br/>
                    
                    <input value={this.state.abc} onChange={this.mychangeInput1}/>   
                    <br/><br/>
                    {this.state.abc}
                </div>;
            }            
        });
        
        ReactDOM.render(
            <Myweb/>,
            document.getElementById('app')
        );
        
        
    </script>
</html>

HardDream!!!

React学习过程中的笔记小案例

相关推荐