1 React语法规则

1.1 使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>
<body>
    <!--准备好一个“容器”-->
     <div id="test"></div>
    <!--  引入react核心库  -->
    <script type="application/javascript" src="../js/react.development.js"> </script>
     <!--  引入react-dom,用于支持react操作dom  -->
    <script type="application/javascript" src="../js/react-dom.development.js"> </script>
    <!--  引入babel,用于jsx转js  -->
    <script type="application/javascript" src="../js/babel.min.js"> </script>
    <script type="text/babel">
        // 定义一个虚拟DOM
        const VDOM = <h1>Hello, React</h1>
        // 渲染虚拟DOM到真实DOM上
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>
</html>

1.2使用js创建虚拟DOM

        const VDOM = React.createElement('h1',{id: 'root'}, React.createElement('span', {}, 'Hello, React'))
        ReactDOM.render(VDOM, document.getElementById('test'))

1.3虚拟DOM与真实DOM

        const VDOM = React.createElement('h1',{id: 'root'}, React.createElement('span', {}, 'Hello, React'))
        const TDOM = document.getElementById('demo')
        ReactDOM.render(VDOM, document.getElementById('test'))
        console.log('虚拟DOM：', VDOM)
        console.log('真实DOM：', TDOM)

1.4jsx语法规则

    const myId = 'wTF'
    const myData = 'HeLlo, rEAct'
    const VDOM = (
        <div>
            <h1 className="title" id={myId.toLowerCase()}>
                {/* 可以在标签上写样式，但是必须写双花括号 */}
                <span style={{color: 'white'}}>{myData.toLowerCase()}</span>
            </h1>
            <h1 className="title" id={myId.toUpperCase()}>
                <span style={{color: 'white'}}>{myData.toLowerCase()}</span>
            </h1>
            <label>
                <input type="text" />
            </label>
        </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))

1.4jsx小练习

    const data = ['Angular', 'React', 'Vue']
    const VDOM = (
        <div>
            <h1>前端js框架</h1>
            <ul>
                {
                    data.map((res, index) => {
                    return (
                        <li key={index}>{res}</li>
                    )
                })
                }
            </ul>
        </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))

React语法规则

1 React语法规则

1.1 使用jsx创建虚拟DOM

1.2使用js创建虚拟DOM

1.3虚拟DOM与真实DOM

1.4jsx语法规则

1.4jsx小练习

相关文章