React的JSX语法

一、概念

①HTML语言直接写在JavaScript语言中，不加任何引号，这就是JSX语法。它允许HTML和JavaScript混写

②JSX是一种 JavaScript 的语法扩展。 它完全是在 JavaScript 内部实现的。用来声明 React 当中的元素

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        ReactDOM.render(<h1>hello world</h1>,document.getElementById('app'))
    </script>

二、环境配置

①非模块化环境：babel-standalone，执行时编译，速度比较慢，只适用于开发环境测试

②模块化环境：结合webpack配置babel响应的工具完成预编译，浏览器执行的是预编译的结果，

③babel REPL 环境：https://babeljs.io/repl

三、基本语法规则

①必须有一个根节点

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const element = (
            <div>
                <h1>hello world</h1>
                <p>hello react</p>
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

②换行或者多标签，推荐加括号，避免JavaScript自动分号不往后执行的问题

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        function getEl() {
            return (
                <div>
                    <h1>hello world</h1>
                    <p>hello react</p>
                </div>
            )
        }
        ReactDOM.render(getEl(),document.getElementById('app'))
    </script>

③单标签必须以 /> 结束

   <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        function getEl() {
            return (
                <div>
                    <b />hello react
                </div>
            )
        }
        ReactDOM.render(getEl(),document.getElementById('app'))
    </script>

④在JSX中嵌入JavaScript表达式：遇到 < 按html解析，遇到 { 按JavaScript解析

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const user ={
            name:'eric',
            age:18,
            gender:0
        }
        const element = (
            <div>
                <h3>姓名：{user.name}</h3>
                <h3>年龄：{user.age}</h3>
                <h3>性别：{user.gender}</h3>
                <h3>三元表达式：{user.gender === 0 ? '男': '女'}</h3>
                <h3>数字相加：{ 1 + 1}</h3>
                <h3>字符串拼接：{'hello' + 'world'}</h3>
                <h3>es6字符串拼接：{`hello' ${user.name}`}</h3>
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

⑤注释：推荐单行注释

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const element = (
            <div>
                <h3>hello</h3>
                {
                    //注释1
                    //注释2
                }
                <h3>hello</h3>
                {/*注释3*/}
                <h3>hello</h3>
                {
                    /*注释4*/
                    /*注释5*/
                }
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

⑥在JavaScript中嵌入JSX

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const user ={
            name:'eric',
        }
        function getHi(user) {
            if (user) {
                return <h1>hello {user.name}</h1>
            }
            return <h1>hello world</h1>
        }
        const element = getHi(user)
        //const element = getHi()
        ReactDOM.render(element,document.getElementById('app'))
    </script>

⑦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>
        .box{
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        const user ={
            name:'eric',
        }
        // 绑定属性值，有些关键字冲突，需要修改名字，比如，class改为className，for改为hmtlFor
        // 在属性中使用表达式，不使用“”，否则会渲染会字符串
        const element = (
            <div className='box' title={user.name}>
                <laber htmlFor='name'>姓名</laber>
                <input type='text' id='name' />
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>
</body>
</html>