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

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

news 2026/4/19 8:30:44

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

如何用 Iterator.from 将类数组转化为具备现代方法的迭代器

Iterator.from 不是转换器&#xff0c;它仅将类数组或可迭代对象包装为标准 Iterator 实例&#xff0c;不生成数组&#xff0c;也不支持 map/filter 等方法&#xff1b;需用 Array.from() 或展开语法转为真实数组才能使用这些方法。Iterator.from 是什么&#xff0c;它能直接把…...

编程新知 2026/4/19 8:05:32

Wan2.1-umt5在网络安全领域的应用：威胁情报分析与漏洞报告生成

Wan2.1-umt5在网络安全领域的应用&#xff1a;威胁情报分析与漏洞报告生成 最近和几个做安全运维的朋友聊天&#xff0c;他们都在抱怨一件事&#xff1a;每天面对海量的日志和告警&#xff0c;眼睛都快看花了&#xff0c;但真正要写一份清晰、专业的分析报告时&#xff0c;又得…...

编程新知 2026/4/19 6:41:10

CoPaw在物联网（IoT）数据分析中的应用：从设备日志到业务洞察

CoPaw在物联网&#xff08;IoT&#xff09;数据分析中的应用&#xff1a;从设备日志到业务洞察 1. 物联网数据分析的挑战与机遇 想象一下&#xff0c;一个中型工厂每天产生数百万条设备日志&#xff0c;运维团队需要从中找出可能导致停机的隐患。传统方法就像在干草堆里找针&…...

编程新知 2026/4/19 6:35:01

Z-Image-Turbo快速上手：无需下载模型，Gradio界面5分钟开启AI绘画之旅

Z-Image-Turbo快速上手&#xff1a;无需下载模型&#xff0c;Gradio界面5分钟开启AI绘画之旅 1. 为什么选择Z-Image-Turbo Z-Image-Turbo是阿里巴巴通义实验室开源的高效AI图像生成模型&#xff0c;作为Z-Image的蒸馏版本&#xff0c;它带来了几个令人惊喜的特点&#xff1a;…...

编程新知 2026/4/19 6:04:17

从ASF高效获取Sentinel-1雷达影像：一站式下载与预处理指引

1. Sentinel-1雷达影像基础认知 第一次接触Sentinel-1数据时&#xff0c;我和很多初学者一样被各种专业术语搞得晕头转向。后来在实际项目中反复使用才发现&#xff0c;理解这些基础概念对后续数据获取和预处理至关重要。Sentinel-1是欧空局哥白尼计划中的雷达卫星星座&#xf…...

编程新知 2026/4/19 5:29:05

Chatbox调用阿里云DashScope灵积模型报错？手把手教你解决qwen-turbo的top_p参数问题

Chatbox调用DashScope灵积模型报错排查指南&#xff1a;从top_p参数到完整调试方案 当你用Chatbox对接阿里云DashScope平台的qwen-turbo模型时&#xff0c;控制台突然抛出"Range of top_p should be (0.0, 1.0)"的400错误——这看似简单的参数范围问题&#xff0c;背…...

编程新知 2026/4/19 4:49:22

代码出错不再重启，不再查日志，不再等PR——智能生成+实时自愈如何将MTTR从小时级压缩至2.7秒，一线大厂SRE团队已全面部署

第一章&#xff1a;代码出错不再重启&#xff0c;不再查日志&#xff0c;不再等PR——智能生成实时自愈如何将MTTR从小时级压缩至2.7秒&#xff0c;一线大厂SRE团队已全面部署 2026奇点智能技术大会(https://ml-summit.org) 当服务突发500错误、数据库连接池耗尽或Kafka消费者…...

编程新知 2026/4/19 4:11:14

2026便宜又好用的SCRM推荐

SCRM发展到今天&#xff0c;已经有相当多的选择。 1&#xff1a;销售类。主要提供销售型SCRM&#xff0c;比如尘锋、探马。 2&#xff1a;垂直类&#xff0c;比如专注一个行业的&#xff0c;比如电商行业&#xff0c;教育行业之类的。只做一个行业的垂直型SCRM。 3&#xff1a;…...

编程新知 2026/4/19 3:38:26

从源码到实战：手把手教你编译与定制化iperf网络性能测试工具

1. iperf工具简介与适用场景 iperf是一款经典的开源网络性能测试工具&#xff0c;它通过测量TCP/UDP带宽来评估网络质量。我第一次接触这个工具是在调试嵌入式设备的网络吞吐量时&#xff0c;当时需要验证百兆网口的实际传输速率是否达标。相比简单的ping命令&#xff0c;iperf…...

编程新知 2026/4/19 1:36:43

算法训练营第六天|206. 反转链表

题目链接&#xff1a; https://leetcode.cn/problems/reverse-linked-list/ 视频链接&#xff1a; https://www.bilibili.com/video/BV1nB4y1i7eL题意&#xff1a;反转一个单链表。 示例: 输入: 1->2->3->4…...

编程新知 2026/4/19 1:09:57