react中jsx的语法规则

1.react核心库react.development.js

2.react_dom库,用于支持react操作dom(react-dom.development.js)

3.引入bable,解析jsx语法的库,用于将jsx转换为js(babel.min.js)

上述三个库是写基础react的基本库

下面我将用一个例子来总结jsx语法规则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
    <style>
        .title {
            color: blue;
            background-color: aqua;
        }
    </style>
</head>

<body>

    <!-- 引入react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 ,用于支持react操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 引入babel 解析jsx语法的库,用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    </script>

    <!-- 准备一个容器用于渲染接收 -->
    <div id="test"></div>



    <script type="text/babel">

        const myId = 'aiXueXi'
        const myData = 'HeLLo,ReaCt'
        // 创建虚拟DOM
        // toLocaleLowerCase()转换成小写字母
        // toUpperCase()转换成大写字母
        const VDOM = (
            <div>
                <h2 className='title' id={myId.toLocaleLowerCase()}>
                    <span>{myData.toLocaleLowerCase()}</span>
                </h2>
                <h3 className='title' id={myId.toUpperCase()}>
                    <span >{myData.toUpperCase()}</span></h3>
                <input type="text" />
                <good>测试</good>

            </div>

        )


        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

        

    </script>
</body>

</html>

上面一个例子我简单利用react的jsx创建虚拟dom来进行渲染页面

从而总结jsx语法规则如下

  1. 定义虚拟dom的时候不要写引号
  2. 标签中混入js表达式的时候要用花括号
  3. 样式的类名不能用class,要用className
  4. 内联样式,style={{key:value}}的形式去写
  5. 只有一个根标签
  6. 标签首字母分大小写两种情况
  7. 如果首字母小写字母开头,则将改标签转换为html中的同名元素,如果html中没有该标签对应的同名元素就会报错
  8. 如果首字母是大写字母开头,react就会去渲染对应的组件,如果没有该组件就会报错

相关推荐

  1. reactjsx语法规则

    2024-07-09 22:06:05       8 阅读
  2. js == 比较规则

    2024-07-09 22:06:05       40 阅读
  3. reactpackage.json版本号规则

    2024-07-09 22:06:05       43 阅读
  4. vue使用jsx语法

    2024-07-09 22:06:05       33 阅读
  5. C语言命名规则(期末版)

    2024-07-09 22:06:05       36 阅读
  6. [C++] Makefile语法规则

    2024-07-09 22:06:05       42 阅读
  7. <span style='color:red;'>react</span>-<span style='color:red;'>jsx</span>

    react-jsx

    2024-07-09 22:06:05      24 阅读
  8. Js数组实用语法

    2024-07-09 22:06:05       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 22:06:05       3 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 22:06:05       3 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 22:06:05       2 阅读
  4. Python语言-面向对象

    2024-07-09 22:06:05       2 阅读

热门阅读

  1. transformer的了解

    2024-07-09 22:06:05       8 阅读
  2. Pytest中的钩子函数

    2024-07-09 22:06:05       8 阅读
  3. Vue-插值表达式

    2024-07-09 22:06:05       8 阅读
  4. json数据

    2024-07-09 22:06:05       8 阅读
  5. 小型简易GIT服务器搭建和使用

    2024-07-09 22:06:05       8 阅读
  6. 开源许可(Open Source License)

    2024-07-09 22:06:05       8 阅读
  7. 使用 HAProxy 进行 MySQL 负载均衡

    2024-07-09 22:06:05       8 阅读
  8. 【Tools】了解人工通用智能 (AGI):未来的智能体

    2024-07-09 22:06:05       8 阅读
  9. HTML最快速最简单

    2024-07-09 22:06:05       9 阅读
  10. 等保测评推动黑龙江数字化转型中的安全保障

    2024-07-09 22:06:05       8 阅读