2、React中的JSX使用

1、介绍

JSX全称为JavaScript XML（JS+XML），是React定义的一种类似于XML的JS扩展语法。

作用：用来简化创建React虚拟DOM。

优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。

注意：JSX并非标准的JS语法，浏览器、nodejs均无法识别，需要借助@babel/plugin-transform-react-jsx包解释该语法（JSX=>JS），babel中文官网：https://www.babeljs.cn。

2、语法

定义虚拟DOM时，不要写引号（JSX语法规定）。
只能有一个根标签。
所有标签必须闭合。
标签中混入JS表达式时要用{}，不能混入JS语句（JS表达式和语句的区别：xxx）。
标签的类名指定不要用class，要用className（class是ES6中定义类的关键字）。
内联样式，要用style={{key:value}}的形式写（外层{}代表JS表达式容器，内层{}代表JS对象）。
标签首字母大小写问题：

①若小写字母开头，则将该标签转为html中同名标签，若html中无该标签对应的同名元素，则报错。

②若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

3、演示使用

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jsx语法title>
    head>
    <body>
        
        <div id="container">div>

        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js">script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js">script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js">script>

        
        <script type="text/babel" >
            let hello = "Hello React";
            //1.创建虚拟DOM
            const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
                // 根标签只能有一个
                // 标签的class属性，要用className，不要用class
                <div title="rootTag" className="rootTag">
                    
                    {/*内联样式，要用style={{key:value}}的形式写*/}
                    <div style={{color:'red',width:'100px',height:'100px',background:'grey'}}>
                        {/*标签中混入JS表达式时要用{}*/}
                        {hello}
                    </div>
                </div>
            )
            //2.渲染虚拟DOM到页面
            ReactDOM.render(VDOM,document.getElementById('container'))
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

运行结果：

在这里插入图片描述

相关阅读:
构建AR视频空间大数据平台（物联网及工业互联网、视频、AI场景识别）
使用canal和rocketmq同步mysql数据到elasticsearch中【canal，rocketmq，elasticsearch】
线上化变迁，使得销售与市场的脱节像一场濒临破裂的婚姻！
Mall脚手架总结(五) —— SpringBoot整合MinIO实现文件管理
软考网工选择题易错总结（2020下~2022下）
【Vue3】scoped 和样式穿透
DGL学习笔记——第一章图
Vue3.0种中新增的teleport和suspence标签
bcn_timout,ap_probe_send_start
模型压缩（一）通道剪枝-BN层

原文地址：https://blog.csdn.net/xiao_yu_gan/article/details/126798250