分享硬件，软件，材料， 化学等原创内容
React小练习
互联网开发
React小练习
互联网开发

React小练习

  1. Hello， React
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const VDOM = <h1>hello, react</h1>
        ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
</body>
</html>

2. JSX语法规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSX语法规则</title>
    <style>
        .title{
            background-color:orange;        
            width: 250px;
        }
    </style>
</head>
<body>
    <div id="test">
    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myid="aiGuiGu"
        const mydata="hello, react"
        const VDOM = (
            <div>
            <h1  className="title" id={myid}>
            <span style={{color:'white', fontSize:'50px'}}>{mydata}</span>
            </h1>
            <input type="text" />
            </div>  
        )
        ReactDOM.render(VDOM, document.getElementById("test"));
        // 注释2
    </script>
    <!-- 注释 -->
</body>
</html>

3. 数组遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-react数组遍历</title>
</head>
<body>
    <div id="test">
    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const lessons=['angular', 'react', 'vue']
        const VDOM = (
            <div>
                <h1>前端学习</h1>
                    <ul>
                        {
                            lessons.map((item, index) =>  <li key={index}>{item}</li>)
                        }
                    </ul>
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
</body>
</html>

4. 函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04-函数式组件</title>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建组件
        function Mycomponent(){
            return <h1>我是函数式组件(适用于简单组件)</h1>
        }
        // 2. 渲染组件到页面
        ReactDOM.render(<Mycomponent />, document.getElementById("test"));
    </script>
</body>
</html>

5. 元素渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-元素渲染</title>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建函数式组件
        function Tick(){
            const mydate = (
                <div>
                <h1>Hello world</h1>
                <h2>现在时间是: {new Date().toLocaleTimeString()}.</h2>
                </div>
            ) 
            //ReactDOM渲染放在函数声明内
            ReactDOM.render(mydate, document.getElementById("test"));
        }
        //原生js调用方法,下面Tick，不能带()
        setInterval(Tick, 1000)
       
        
    </script>
</body>
</html>

6. 元素渲染2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-元素渲染2</title>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建函数式组件,使用props传入众多属性
        function Clock(props){
            return(
                <div>
                <h1>Hello world</h1>
                <h2>{props.date.toLocaleTimeString()}</h2>
                <h2>{props.myprop}</h2>
                </div>
            )
        }

        function Tick(){
            //此处date虽然爆红，但在浏览器中无错误，date指的是上面props.date这个date参数
            ReactDOM.render(<Clock date={new Date()} myprop="我的参数" />, document.getElementById("test"));
        }
        //原生js调用方法,下面Tick，不能带()
        setInterval(Tick, 1000)
       
        
    </script>
</body>
</html>

7. 元素渲染3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-元素渲染3</title>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件,注意此处Component为大写
        class Clock extends React.Component{
            render(){
                return (
                    <div>
                    <h1>Hello world</h1>
                    <h2>{this.props.date.toLocaleTimeString()}</h2>
                    <h2>{this.props.myprop}</h2> 
                    </div>
                );
            }           
        }

        function tick(){
            //此处date虽然爆红，但在浏览器中无错误，date指的是上面props.date这个date参数
            ReactDOM.render(<Clock date={new Date()} myprop="我的参数" />, document.getElementById("test"));
        }
        //原生js调用方法,下面Tick，不能带()
        setInterval(tick, 1000)
       
        
    </script>
</body>
</html>

8. 元素渲染4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-元素渲染4-补充</title>
</head>
<body>
    <div id="test">
    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.注意定义css样式的语法
        var myStyle={color:"red", Alignment:"center"}
        //2. 注意定义类组件的方法
        class Name extends React.Component{
            render(){
                //取属性的名称this.props.name
                return <h1 style={myStyle}>网站名称：{this.props.name}</h1>
            }           
        }
        class Url extends React.Component{
            render(){
                return <h1 style={myStyle}>网站地址:{this.props.url}</h1>
            }
        }
        class Email extends React.Component{
            render(){
                return<h1 style={myStyle}>邮箱地址:{this.props.email}</h1>
            }
        }
        //3. 在function中用App来包裹三个组件
        function App(props){
                   return(
                       <div>
                       <Name name={props.name} />
                       <Url url={props.url} />
                       <Email email={props.email}/>
                        </div>
                   )        
        }
        
        //4.渲染中，注意属性传值
        ReactDOM.render(
            <App name={"菜鸟论坛"} url={"www.runoob.com"} email={"youdao@163.com"}/>, 
            document.getElementById('test'))     
    </script>
</body>
</html>

9. JSX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSX</title>
</head>
<style>
    .foo{
        color: red;
    }
</style>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <div id="test4"></div>
    <div id="test5"></div>
    <div id="test6"></div>
    <div id="test7"></div>
    <div id="test8"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel" src="./06-helloword_react.js"></script> <!- 2.独立js文件引入需要使用text/babel,而不是text/javascript-!>
    <script type="text/babel">
        //1.使用className来增加class属性
        var myDivElment = <div className="foo">test1</div>
        ReactDOM.render(myDivElment, document.getElementById("test1"));
        //3. 使用自定义属性，要使用data-开头
        ReactDOM.render(<div>
                        <h1 data-myyattribute="somevalue">菜鸟论坛</h1>
                        </div>
        , document.getElementById("test2"));
        //4. javascript表达式写在{}中                
        ReactDOM.render(
            <h1>1+1={1+1}</h1>,document.getElementById("test4")
        )
        //5. JSX中没有if..else, 需要使用三元表达式               
        ReactDOM.render(
            <h1>{1==1? '男':'女'}</h1>,document.getElementById("test5")
        )
        // 6. React采用内联样式，驼峰原则fontSize                
        var myStyle = {color:"red", fontSize:100}
        ReactDOM.render(<h1 style={myStyle}>runoob</h1>, document.getElementById("test6"))
        // 7. 注释写在{}内
        ReactDOM.render(
            <div>
            {/* 此处填注释*/}
            <h1>科技人生</h1>{/* 此处填注释*/}
            </div>,
            document.getElementById('test7')
        )
        // 8. JSX数组定义与插入数组
        var arr = [
            <h1>youdao.fun</h1>,
            <h2>lingyoudao@163.com</h2>
        ] 
        ReactDOM.render(
            <div>
            <div>{arr[0]}</div>
            <div>{arr[1]}</div>
            </div>,
            document.getElementById('test8')     
        )  
        
    </script>
</body>
</html>

10. 元素组件

-<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test">

    </div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        function Name(props){
            return <h1>网站名称: {props.name}</h1>
        }
        function Url(props){
            return <h1>网站地址: {props.url}</h1>
        }
        function Nickname(props){
            return <h1>网站小名: {props.nickname}</h1>
        }
        function App(){
            return(
                <div>
                    <Name name="菜鸟教程"/>
                    <Url url="http://www.runoob.com"/>
                    <Nickname nickname="Runoob" />
                </div>
            )
        }
        ReactDOM.render(<App />, document.getElementById("test"));
    </script>
</body>
</html>

发表评论

您的电子邮箱地址不会被公开。