react学习——04jsx语法规则

一叶飘零晋

已于 2024-06-20 14:28:54 修改

阅读量261

点赞数 5

分类专栏： react 文章标签： react.js 学习 javascript

于 2024-06-20 14:08:34 首次发布

本文链接：https://blog.csdn.net/ChenJin_2/article/details/139831150

版权

react 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsx语法规则.html</title>
    <style>
        .red{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    const myId = 'aTguiGu'
    const myClassName = 'red'
    const myData = 'Hello,rEaCT'
    //1.创建虚拟DOM
    const vdom =(
        <div>
            <h1 id={myId.toLowerCase()} className="red">
                <span style={{color:'white',fontSize:'20px'}}>{myData.toLowerCase()}</span>
            </h1>
            <h1 id={myId.toUpperCase()} className="red">
                <span style={{color:'white',fontSize:'20px'}}>{myData.toLowerCase()}</span>
            </h1>
            <input type="text"/>
            <good>123</good>
            // <Good>123</Good>
        </div>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vdom,document.getElementById('root'))
    /*
    jsx语法规则：
        1.定义虚拟DOM时，不要写引号，引号会报错
        2.标签中混入JS表达式时要用{}
        3.样式类名不要写引号，如果要写，要使用className
        4.内嵌样式时，要用style={{key:value,key:value}}}的形式去写
        5.只有一个根标签
        6.标签必须闭合
        7.标签首字母
            （1）如果以小写字母开头，则将改标签转为html同名元素，若不存在，则报错
            （2）如果以大写字母开头，则react会创建对应的组件，若不存在，则报错
     */
</script>
</body>
</html>

总结
jsx语法规则：
1.定义虚拟DOM时，不要写引号，引号会报错
2.标签中混入JS表达式时要用{}
3.样式类名不要写引号，如果要写，要使用className
4.内嵌样式时，要用style={{key:value,key:value}}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母
（1）如果以小写字母开头，则将改标签转为html同名元素，若不存在，则报错
（2）如果以大写字母开头，则react会创建对应的组件，若不存在，则报错