当前位置：首页 > news >正文

React基础教程(三)：JSX语法

news 2026/1/30 1:50:41

React基础教程(三)：JSX语法

1、JSX简介

全称：JavaScript XML
react定义的一种类似于XML的JS扩展语法：JS+XML
本质是React.createElement(component, props, ...children)方法的语法糖
作用：用来简化创建虚拟DOM（注意：它不是字符串，也不是HTML/XML标签；它最终产生的就是一个JS对象）
标签名任意：HTML标签或其他标签

2、JSX语法规则

定义虚拟DOM的时候不要写引号
标签中混入JS表达式时要用{}
样式的类名指定不要用class，要用className
内联样式，要用style={{key:value}}的形式去写
虚拟DOM必须只有一个根标签
标签必须闭合
标签首字母：①若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。②若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello React</title><!--    引入react核心库--><script src="../js/react.development.js"></script><!--    引入react-dom，用于支持react操作dom--><script src="../js/react-dom.development.js"></script><!--    引入babel，用于将jsx转为js--><script src="../js/babel.min.js"></script>
</head>
<body>
<!--    准备容器-->
<div id="test"></div><!--此处一定要写babel-->
<script type="text/babel">const myId = "react";const myData = "Hello React !!!";// 1、创建虚拟DOMconst virtualDOM = (<div><h1 className={'title'} id={myId}><span style={{color: "red", fontSize: '29px'}}>{myData}</span></h1><h1 className={'title'} id={myId.toUpperCase()}><span style={{color: "red", fontSize: '29px'}}>{myData}</span></h1><label><input type="text"/></label></div>);// 2、渲染虚拟DOMReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>
<style>.title {background-color: bisque;}
</style>

3、JSX小练习

需求：动态展示如下列表：
在这里插入图片描述

小插曲：什么是表达式？

一个表达式会产生一个值，可以放在任何一个需要值的地方。
- 下面这些都是表达式
  - a
  - a+b
  - func(1)
  - arr.map()
  - function test(){}
语句/代码
- 下面这些都是语句/代码
  - if(){}
  - for(){}
  - switch(){case:xxxx}

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title><!--    引入react核心库--><script src="../js/react.development.js"></script><!--    引入react-dom，用于支持react操作dom--><script src="../js/react-dom.development.js"></script><!--    引入babel，用于将jsx转为js--><script src="../js/babel.min.js"></script>
</head>
<body>
<!--    准备容器-->
<div id="test"></div>
<!--此处一定要写babel-->
<script type="text/babel">// 模拟一些数据const data = ['Angular', 'React', 'Vue'];// const obj = {name1:'Angular', name2:'Angular', name3:'Angular'};// 1、创建虚拟DOMconst virtualDOM = (<div><h2>前端js框架列表</h2><ul>{data.map((item, index)=>{return <li key={index}>{item}</li>})}</ul></div>); /*此处一定不要写引号，因为不是字符串。这是JSX语法*/// 2、渲染虚拟DOMReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>

React基础教程(三)：JSX语法

React基础教程(三)：JSX语法 1、JSX简介全称：JavaScript XMLreact定义的一种类似于XML的JS扩展语法：JSXML本质是React.createElement(component, props, ...children)方法的语法糖作用：用来简化创建虚拟DOM（注意&…...

编程日记 2023/6/16 5:54:06

软件测试岗位都是女孩子在做吗？

听我一朋友说，测试岗位基本都是女孩子做。” 不知道是不是以前“软件测试岗”给人印象是“不需要太多技术含量”的错觉，从而大部分外行认为从业软件测试的人员中女生应占了大多数。比如有人就觉得：软件测试主要是细心活，所以女生…...

编程日记 2023/6/16 5:20:45

ARP协议，带你了解ARP协议

目录一、ARP协议概述二、使用ARP的四种情况三、ARP缓存四、ARP的工作原理 1. 地址解析 2. 地址缓存五、ARP报文格式 1. ARP请求报文格式 2. ARP响应报文格式六、免费ARP 七、代理ARP 一、ARP协议概述 ARP（Address Resolution Protocol）地…...

编程日记 2023/6/16 4:47:24

基于Java汽车客运站管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍： ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…...

编程日记 2023/6/16 4:14:03

0203使用规则-索引-MySQL

文章目录 1 联合索引1.1 最左前缀法则1.2 范围查询 2 索引失效2.1 常见情况2.2 数据分布影响 3 SQL提示4 覆盖索引和回表查询5 前缀索引6 单列和联合索引7 设计原则结语 1 联合索引 1.1 最左前缀法则在Mysql数据库中创建了联合索引（或称复合索引，即包含…...

编程日记 2023/6/16 3:40:42

LVS+Keepalived群集

一、Keepalived概述 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案，可以解决静态路由出现的单点故障问题。在一个LVS服务集群中通常有主服务器（MASTER）和备份服务器（BACKUP）两种角色的服务器&#xff0c…...

编程日记 2023/6/16 3:07:21

抖音矩阵系统源代码开发部署--源码搭建

抖音矩阵系统是一个具有强大功能的开放性平台，通过数据挖掘技术能够实现精准的用户画像和个性化推荐，这也是抖音成为国内最受欢迎的短视频平台之一的原因之一。矩阵系统的开发需要大量的技术支持和数据分析，同时也需要综合运用大数据、机器学…...

编程日记 2023/6/16 2:33:59

如何用Jmeter进行接口测试，这应该是全网最详细的教程了

一、Jmeter 的使用步骤打开Jmeter 安装包，进入\bin 中，找到"jmeter.bat", 点击打开即可。在下图打开的Jmeter 页面中，右键“测试计划” -> “添加” -> "Threads(Users)" -> “线程组”， 建立线…...

编程日记 2023/6/16 2:00:38

C语言---malloc(0)会产生什么结果，真的是空指针吗？

前言 （1）几天前在一个交流群中看到有人说，面试问malloc(0)会怎么样是真的恶心。 （2）这个突然激起了我的好奇心。居然还可以malloc(0)？！ （3）经过测试最后，发现…...

编程日记 2023/6/16 1:27:17

建模助手618 | 谁不囤点Revit插件我都会生气！

大家好，这里是建模助手。早在5月份，我们已经就“618”这个事情高调了一番，以提前放“价”的姿势，让许多用户以躺赢的状态拉开了年中大促的序幕。（5月购买的盆友，切记看完全文，内附彩蛋活动反…...

编程日记 2023/6/16 0:53:56

【“职场程序员是否会保护自己的隐私？为何要求程序员之间保密薪资？”】

职场程序员之间确实有一些秘密，其中之一便是对薪资保密。这并非完全是程序员们的独立行为，而是因为一些公司或组织规定员工之间不能互相透露薪水信息。第一个原因是保护公司自身利益。如果一个程序员知道其他同事的薪资水平比自己高，他可能…...

编程日记 2023/6/16 0:20:35

企业工程管理系统源码之提高工程项目管理软件的效率

高效的工程项目管理软件不仅能够提高效率还应可以帮你节省成本提升利润在工程行业中，管理不畅以及不良的项目执行，往往会导致项目延期、成本上升、回款拖后，最终导致项目整体盈利下降。企企管理云业财一体化的项目管理系统，确保…...

编程日记 2023/6/15 23:47:14

创新指南 | 推动销售的17个可落地的集客式营销示例

无论您是开启集客式的营销有一段时间还是处于起步阶段，了解像您这样的企业是如何粉碎竞争对手的的集客式策略总是有帮助的。无论您的公司做什么，它所服务的行业，是B2B还是B2C ，您都可以在这里找到许多可以使用的示例。在本文中&…...

编程日记 2023/6/15 23:13:53

ASEMI代理光宝光耦LTV-0314的应用与优势

编辑-Z 在电子设备的设计和制造过程中，光耦合器是一种至关重要的组件。它们在电路中起到隔离作用，保护电子设备免受电压冲击和电流过载的影响。今天，我们将深入探讨一种特殊的光耦合器——LTV-0314，它的特性、应用以及优势。一、…...

编程日记 2023/6/15 22:40:32

Apikit 自学日记: Apikit 如何发起测试

进入 API 文档详情页，点击上方测试标签，进入 API 测试页，系统会根据API文档自动生成测试界面并且填充测试数据。填写请求参数首先填写好请求参数。请求头部您可以输入或导入请求头部。批量导入的数据格式为 key : value ，…...

编程日记 2023/6/15 22:07:11

python-glob模块_表格及代码样例

glob模块文章目录 glob模块1. glob.glob(pathname)：根据指定的模式匹配文件路径，并返回匹配的路径列表2. glob.iglob(pathname)：返回一个迭代器，逐个匹配文件路径，适用于大量文件的情况3. glob.escape(pathname)&…...

编程日记 2023/6/15 21:33:50

GitHub Copilot 最全安装、使用

GitHub Copilot 最全安装、使用教程一、温馨提示 GitHub Copilot 目前为止可以免费试用一个月，但是试用的前提是必须要绑定银行卡，因为后续会自动扣费，所以请注意试用结束日期，自己定好闹钟关闭订阅。订阅价格为每月10美刀&a…...

编程日记 2023/6/15 21:00:29

C语言指针（特别篇）

本篇目录 C语言指针（特别篇）内存地址简要介绍C语言指针C语言的指针可以指向什么?取地址符 &（Address-of Operator）C语言中的 * 号运算符示例集：指向变量的指针指向数组的指针指向字符串的指针二级指针指针数组的…...

编程日记 2023/6/15 20:27:08

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递（5月26日论文合集）

文章目录一、检测相关(9篇)1.1 Energy-based Detection of Adverse Weather Effects in LiDAR Data1.2 Anomaly Detection with Conditioned Denoising Diffusion Models1.3 Mask Attack Detection Using Vascular-weighted Motion-robust rPPG Signals1.4 Improved Multi-Sca…...

编程日记 2023/6/15 19:53:46

网络编程与自动化（python）

20.1 网络编程与自动化概述传统网络运维困境大家在日常的网络运维中是否遇到过如下问题：设备升级：现网有数千台网络设备，你需要周期性、批量性地对设备进行升级。配置审计：企业年度需要对设备进行配置审计。例如要求所有设备开启sTelnet功能，以太网交换机配置生成树安全…...

编程日记 2023/6/15 19:20:25

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/1/26 20:42:47

Linux 文件类型，目录与路径，文件与目录管理

文件类型后面的字符表示文件类型标志普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。目录文件：d（directory） 用来存放其他文件或子目录。设备…...

编程新知 2026/1/24 21:40:53

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制指定固定的延迟级别通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/1/20 12:44:11

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2026/1/12 14:38:19

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 （结构体大小计算及位段详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...

编程新知 2026/1/23 8:19:40

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2026/1/24 21:15:37

《通信之道——从微积分到 5G》读书总结

第1章绪论 1.1 这是一本什么样的书通信技术，说到底就是数学。那些最基础、最本质的部分。 1.2 什么是通信通信发送方接收方承载信息的信号解调出其中承载的信息信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2026/1/28 6:31:15

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/15 5:22:27

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights）多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

React基础教程(三)：JSX语法

1、JSX简介

2、JSX语法规则

3、JSX小练习

相关文章：