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

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

news 2025/10/1 4:12:41

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/10/1 0:48:08

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/9/30 2:21:20

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/9/29 7:23:40

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/9/29 7:50:51

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/26 6:30:42

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/9/22 12:08:59

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/9/29 19:03:00