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

react学习笔记——3. jsx语法规则

news 2025/11/23 10:14:14

jsx是什么？

  • jsx全称：javaScript XML
  • 是react定义的一种类似于XML的js扩展语法，是js+xml。
    • xml早期用于存储和传输数据，是标签加数据的形式。只不过后来慢慢的变成了json
  • 其本质就是React.createElement(标签,属性,内容)方法的语法糖
  • 其作用是为了简化虚拟dom

jsx语法规则

  1. 定义虚拟dom时，不写引号。
  2. 虚拟dom标签中混入js 表达式 时，需要使用大括号。这里表达式不是指js代码。下面将js语句（代码）和js表达式进行区分。
    1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。例如
      1. a。一个变量名
      2. a+b。两个变量相加
      3. demo(1)。调用函数，并传递1
      4. arr.map()。对数组进行加工的方法
      5. function test(){}。定义一个函数
      6. 总结：就是在左边定义一个 const x= 然后用于接收，如果能接收到，就是表达式。
    2. 语句（代码）：不能进行接收的，也就是不会产生一个值。例如
      1. for(){}
      2. if(){}
      3. switch(){case:xxx}
      4. 总结：左侧不能用一个变量去接收。
  3. 如果想用class样式，不是写class=“”，而是className=“”
  4. 内联样式，则需要两个大括号，第一个表示要写js，第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
  5. 虚拟dom必须只有一个根标签
  6. 标签必须要闭合
  7. 标签首字母
    1. 首字母小写，则直接转为html中找同名元素，若没有该标签对应的同名元素就报错
    2. 首字母大写，则react会渲染对应的组件，如果组件没有定义，则报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这是进行移动端适配的 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法规则</title><style>.title {background-color: orange;width: 400px;}</style>
</head><body><!-- 准备“容器” --><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">const myId = "njTech"const myData = "hello,React"// 1、创建虚拟domconst VDOM = (<div><h2 className="title" id={myId}><span style={{ color: "white", fontSize: "40px" }}>{myData.toLowerCase()}</span></h2><input type="text" /><good>这个会找html中对应的标签，但是html中没有这个good标签，所以会给一个警告</good><Good>这个会找组件，但是没有定义Good组件，所以会报错</Good></div>// <input type="text">// 这样是报错的)// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))/*** jsx语法规则*      1、定义虚拟dom时，不写引号。*      2、虚拟dom标签中混入js表达式时，需要使用大括号*      3、如果想用class样式，不是写class=""，而是className=""*      4、内联样式写法style={{}}，需要两个大括号，第一个表示要写js，第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。*      5、虚拟dom必须只有一个根标签*      6、标签必须要闭合*      7、标签首字母*          1）首字母小写，则直接转为html中找同名元素，若没有该标签对应的同名元素就报错。*          2）首字母大写，则react会渲染对应的组件，如果组件没有定义，则报错。*/</script>
</body></html>

相关文章：

react学习笔记——3. jsx语法规则

jsx是什么&#xff1f; jsx全称&#xff1a;javaScript XML是react定义的一种类似于XML的js扩展语法&#xff0c;是jsxml。 xml早期用于存储和传输数据&#xff0c;是标签加数据的形式。只不过后来慢慢的变成了json 其本质就是React.createElement(标签,属性,内容)方法的语法糖…...

编程日记 2023/8/13 16:12:30

MySQL分表实现上百万上千万记录分布存储的批量查询设计模式

我们知道可以将一个海量记录的 MySQL 大表根据主键、时间字段&#xff0c;条件字段等分成若干个表甚至保存在若干服务器中。唯一的问题就是跨服务器批量查询麻烦&#xff0c;只能通过应用程序来解决。谈谈在Java中的解决思路。其他语言原理类似。这里说的分表不是 MySQL 5.1 的…...

编程日记 2023/8/13 16:11:29

射频入门知识-1

信号源 示波器 综合测试仪 功率计 噪声测试仪 频谱分析仪 频谱分析仪: 放大器的噪声系数测试 放大器增益测试 噪声和增益是放大器的最关键指标&#xff0c;学学怎么用频谱仪做放大器的噪声测试 那个 hbf740 输入和输出阻抗匹配具体怎么搞 《ADS2011射频电路设计与…...

编程日记 2023/8/13 16:10:28

基于注解函数式编程实现组件解耦设计

随着业务系统的不断发展，系统架构变得越来越复杂，多种业务交叉写在一起，不仅带来了维护层面的困难，而且新人也很难以入手修改代码，业界通常采用组件模块化开发模式，用于降低系统的复杂度，本文主要针对组件化具体实施过程中，组件层面的方法解耦进行了详细讲解。 1前言 …...

编程日记 2023/8/13 16:09:27

并查集、树状数组

并查集、树状数组、线段树 并查集树状数组树状数组1 (单点修改&#xff0c;区间查询)树状数组2 (单点查询&#xff0c;区间修改) 并查集 【模板】并查集 题目描述 如题&#xff0c;现在有一个并查集&#xff0c;你需要完成合并和查询操作。 输入格式 第一行包含两个整数 …...

编程日记 2023/8/13 16:08:26

ES6中Null判断运算符(??)正确打开方式-

读取对象属性的时候&#xff0c;如果某个属性的值是null或者undefined&#xff0c;有时候需要为它们指定默认值。常见的作法是通过||运算符指定默认值。 const headerText response.settings.headerText || Hello, world!; const animationDuration response.settings.anima…...

编程日记 2023/8/13 16:07:23

java的内存模型

Java内存基础 并发编程模型的两个关键问题 线程之间如何通信及线程之间如何同步 线程之间的通信机制有两种&#xff1a;共享内存和消息传递。 在共享内存的并发模型里&#xff0c;线程之间共享程序的公共状态&#xff0c;通过写-读内存中的公共状态 进行隐式通信。在消息传…...

编程日记 2023/8/13 16:06:22

基于 CentOS 7 构建 LVS-DR 群集 配置nginx负载均衡

环境配置&#xff1a; RHCE客户机192.168.100.146node1lvs192.168.100.145node2RS192.168.100.147node3RS192.168.100.148 配置ipvsadm httpd&#xff1a; [rootnode1 ~]# yum install ipvsadm.x86_64 [rootnode2 ~]# yum install http -y [rootnode2 ~]# systemctl …...

编程日记 2023/8/13 16:05:21

CSS练习

CSS练习 工具代码运行结果 工具 HBuilder X 代码 <!DOCTYPE html> <!-- 做一个表格&#xff0c;6行4列实现隔行换色&#xff08;背景色&#xff09;并且第3列文字红色第一个单元格文字大小30px。最后一个单元格文字加粗--> <html><head><meta ch…...

编程日记 2023/8/13 16:04:19

基于深度学习的3D城市模型增强【Mask R-CNN】

在这篇文章中&#xff0c;我们描述了一个为阿姆斯特丹 3D 城市模型自动添加门窗的系统&#xff08;可以在这里访问&#xff09;。 计算机视觉用于从城市全景图像中提取有关门窗位置的信息。 由于这种类型的街道级图像广泛可用&#xff0c;因此该方法可用于较大的地理区域。 推荐…...

编程日记 2023/8/13 16:03:18

LabVIEW对并行机器人结构进行建模仿真

LabVIEW对并行机器人结构进行建模仿真 为了对复杂机器人结构的数学模型进行建模、搜索、动画和验证&#xff0c;在工业机器人动态行为实验室中&#xff0c;设计并实现了具有五个自由度的单臂型机器人。在研究台上可以区分以下元素&#xff1a;带有直流电机和编码器的机器人;稳…...

编程日记 2023/8/13 16:02:17

【算法题】1281. 整数的各位积和之差

题目&#xff1a; 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1&#xff1a; 输入&#xff1a;n 234 输出&#xff1a;15 解释&#xff1a; 各位数之积 2 * 3 * 4 24 各位数之和 2 3 4 9 结果 24 - 9 15 示…...

编程日记 2023/8/13 16:01:16

（一）ES6 介绍

为什么学习ES6 ES6的版本变动内容最多&#xff0c;具有里程碑意义ES加入许多新的语法特性&#xff0c;编程实现更简单、搞笑ES6是前端发展趋势&#xff0c;就业必备技能 什么是ECMA ECMA&#xff08;European Computer Manufacturers Association&#xff09;&#xff0c;中…...

编程日记 2023/8/13 16:00:14

窥孔优化（Peephole Optimization）

窥孔优化&#xff08;Peephole Optimization&#xff09;是编译器中的一个技术&#xff0c;用于优化生成的中间代码或目标代码。该优化方法通过查看代码的小部分&#xff08;或称为“窥孔”&#xff09;来识别并提供更高效的代码替代方案。 1. 基本概念 定义&#xff1a;窥孔优…...

编程日记 2023/8/13 15:59:12

Docker安装ElasticSearch/ES 7.4.0

目录 前言安装ElasticSearch/ES安装步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 安装步骤2&#xff1a;拉取ElasticSearch镜像1 拉取镜像2 查看已拉取的镜像 安装步骤3&#xff1a;创建容器创建容器方…...

编程日记 2023/8/13 15:58:11

无涯教程-Perl - readline函数

描述 此函数从EXPR引用的文件句柄中读取一行,并返回输出。如果要直接使用FILEHANDLE,则必须将其作为typeglob传递。 Simply readline function is equvivalent to <>. 语法 以下是此函数的简单语法- readline EXPR返回值 此函数在标量context中仅返回一行,而在列表…...

编程日记 2023/8/13 15:57:09

类与对象（入门）

目录 1.前言 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1 访问限定符 4.2 封装 5.类的作用域 6.类的实例化 7. 结构体内存对齐规则 8.this指针 8.1 this指针的引出 8.2 this指针的特性 1.前言 C 是 基于面向对象 的&#xff0c; 关注 的是 对象 &#xff0c;…...

编程日记 2023/8/13 15:56:08

刷题记录（2023-08-12）

1. 小美的排列询问 AC代码&#xff1a; #include <iostream> #include <vector> using namespace std;int main() {int n;cin >> n;vector<int> nums(n);int a, b;for (int i 0; i < n; i) {cin >> nums[i];}cin >> a >> b;for…...

编程日记 2023/8/13 15:55:07

GPT内功心法：搜索思维到GPT思维的转换

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…...

编程日记 2023/8/13 15:54:06

在WebStorm中通过live-server插件搭建Ajax运行环境

1.下载node.js 官网: https://nodejs.cn/download/ 2.配置Node.js的HTTPS 使用淘宝的镜像&#xff1a; npm config set registry https://registry.npm.taobao.org 也可以使用cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 配置之后可以验证是否成…...

编程日记 2023/8/13 15:53:05

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/11/19 13:17:46

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/11/16 22:28:40

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/11/16 23:22:11

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/11/23 5:23:31

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/10/1 1:44:36

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/11/16 12:24:47

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/11/17 10:39:39

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/11/18 8:10:21

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/11/18 6:33:37