【02】基础知识：React - jsx语法规则
一、jsx 简介
全称为JavaScript XML，是 react 定义的一种类似于 XML 的 JS 扩展语法
JS + XML 本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟 DOM
写法：var ele = <h1>Hello JSX!</h1>注意：
它不是字符串，也不是 HTML/XML 标签
它最终产生的就是一个 JS 对象
二、jsx 语法规则
1、定义虚拟 DOM 时，不要写引号
2、标签中混入JS表达式时要用 {}
3、样式的类名指定不要用 class，要用 className
4、内联样式，要用 style={{key:value}} 的形式去写
5、只有一个根标签
6、标签必须闭合
7、标签首字母
(1)、若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
(2)、若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'// 1、创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toUpperCase()}</span></h2><input type="text"/></div>)// 2、渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>
三、jsx 练习
js 表达式
一个表达式会产生一个值，可以放在任何一个需要值的地方
(1)、 a
(2)、 a+b
(3)、demo(1)
(4)、 arr.map()
(5)、function test () {} - 函数定义表达式
js 语句(代码)
(1)、if(){}
(2)、for(){}
(3)、switch(){case:xxxx}
jsx 的 {} 中只能混入 JS表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >// 模拟一些数据（react可以对数组进行遍历，对象不可以）const data = ['Angular','React','Vue']// 1、创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)// 2、渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>
相关文章：
【02】基础知识：React - jsx语法规则
一、jsx 简介 全称为JavaScript XML，是 react 定义的一种类似于 XML 的 JS 扩展语法 JS XML 本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟 DOM 写法：var ele <h1>Hello JSX!</h1&…...
C语言 —— 指针
目录 1. 指针是什么？ 2. 指针和指针类型的关系 2.1 指针的解引用 2.2 指针-整数 3. 野指针 3.1 野指针成因 1. 指针未初始化 2. 指针越界访问 3. 指针指向的空间释放 3.2 如何规避野指针 4. 指针运算 4.1 指针-整数 4.2 指针-指针 指针-指针的使用 4.3 指针的关系运…...
淘宝店铺所有商品数据接口，淘宝整店所有商品数据接口，淘宝店铺商品接口，淘宝API接口
淘宝店铺所有商品数据接口可以通过淘宝开放平台获取。以下是具体步骤： 在开放平台注册成为开发者并创建一个应用，获取到所需的 App Key 和 App Secret 等信息。使用获取到的 App Key 和 App Secret 进行签名和认证，获取 Access Token。调用开…...
【Redis】Java客户端使用zset命令
zadd/zrange zcard zrem zscore zrank...
记录一个@Transaction注解引发的bug
记录一个Transactional(readOnly true)注解引发的bug 一、问题代码和报错 1-1 问题代码模拟 引发这个问题的三大要素分别是： 事务注解任意数据库操作数据库操作后执行耗时业务（耗时超过数据库配置的超时时间） //1.这里是问题的核心之一…...
解决docker使用pandarallel报错OSError: [Errno 28] No space left on device
参考：https://github.com/nalepae/pandarallel/issues/127 在使用pandarallel报错OSError: [Errno 28] No space left on device，根据上述issue发现确实默认使用的MEMORY_FS_ROOT为 /dev/shm，而在docker环境下这个目录大小只有64M࿰…...
Javascript自定义页面复制事件
Javascript自定义页面复制事件 – WhiteNights Site 2023年10月13日 文章访问量：90 标签：Javascript 监听copy事件以达到自定义页面复制功能的效果。 写者注 需要注意的是，浏览器的部分拓展插件（如迅雷）会导致本文…...
Nginx：反向代理（示意图+配置）
示意图： 反向代理 反向代理（Reverse Proxy）是代理服务器的一种，它代表服务器接收客户端的请求，并将这些请求转发到适当的服务器。当请求在后端服务器完成之后，反向代理搜集请求的响应并将其传输给客户端。…...
macbook笔记本电脑内存怎么清理才能干净流畅？
假如你还在为“你的系统内存不足”的提示所困扰，或者你的Mac电脑突然运行缓慢和卡顿，那么你一般需要认真了解一下macbook内存怎么清理了? MacBook是功能强大的电脑，这点毫无疑问，但是它仍旧会随着时间推移变得运行缓慢。值得庆幸…...
spark 与 mapreduce 对比
Spark 为什么比 MapReduce 快总结 首先澄清几个误区： 1）两者都是基于内存计算的，任何计算框架都肯定是基于内存的，所以说网上所说的 Spark 是基于内存计算所以快，显然是错误的。 2）DAG 计算模型减少的是磁…...
kafka 相关概念
1 kafka 生产者 kafka 用push的方式把消息推送到topic 每个topic下可以有多个分区， 可以用hash 也可以用轮询的方式指定分区 每个分区内部是可以保证顺序的，但是整体无法保证顺序，除非设置成一个topic只有一个分区。 kafka这种多分区的设置 带…...
Ubuntu下vscode配置OpenCV以及Libtorch
opencv安装 sudo apt-get updatesudo apt-get install libopencv-dev 该方式安装的版本可能比较旧。 测试代码 #include <opencv2/opencv.hpp>#include <iostream>int main() {cv::Mat image cv::imread("t.png");cv::imshow("Image", ima…...
关于共识算法Raft的常见误解
关于共识算法Raft的常见误解 Raft 共识算法最终一致性与线性一致性日志的覆盖与删除Remove节点时需要skip 总结参考文档 Raft 共识算法 最近翻了翻Raft相关的资料，同时也总结了日常工作的一些积累，就当做Raft技术笔记吧。 由于工作的关系，Ra…...
Python学习基础笔记七十——模块和库1
模块和库： 一个python代码文件就实现了功能。功能比较单一。 在企业中，项目开发的文件，可能有成百上千个。 不同的代码文件，实现了不同的功能模块，就像一块块积木一样。这些功能文件整合起来，实现一个完…...
SystemVerilog Assertions应用指南 第一章（1.28章节 内建的系统函数）
SVA提供了几个内建的函数来检查一些最常用的设计条件。 $onehot(expression)—检验表达式满足“one-hot”,换句话说,就是在任意给定的时钟沿,表达式只有一位为高。 $onehot0( expression)—检验表达式满足“ zero one-hot”，换句话说,就是在任意给定…...
正则表达式（自用）
正则表达式 符号概述 分类符号用法示例元字符^以 ***开头$以 ***结尾d匹配数字s匹配任意的空白符.匹配除换行符以外的任意字符w匹配字母或数字或下划线或汉字\转义重复限定符*次数，至少一次至少1次?0次 或者 1次{n}{n,}{n,m}重复n次；n活更多次&#x…...
大厂真题：【模拟】OPPO2023秋招提前批-小欧数组求和
题目描述与示例 题目描述 小欧拿到了一个数组，她有q次操作，每次操作修改一个元素。小欧希望每次修改后得到当前数组所有元素之和。你能帮帮她吗？ 输入描述 第一行输入两个正整数n和q，代表数组的大小和操作次数。 第二行输入n…...
Python括号匹配问题
给定一个只包含小写字母的字符串，判断该字符串中的括号是否闭合，如果每个左括号都有对应的右括号，并且括号的嵌套顺序正确，那么括号就能正确闭合。 否则，括号不能正确闭合，字符串中括号仅限于 "("…...
微信小程序备案内容常见问题汇总
一、备案时间点 自2023年09月01日起，新的微信小程序，必须备案后才能上架； 在2024年03月31日前，所有小程序都必须完成备案； 于2024年04月01日起，对未备案小程序进行清退处理。 微信小程序备案系统已于9月4日上线。 二、备案流程 [找备案入口]–[填主体信息]–[填小程…...
无人机新手防炸飞行技巧
不要在室内飞行,容易撞墙。起飞前设置好避障和返航模式。使用模拟器熟练掌握操控。选择开阔环境目视起飞。使用低速档平稳飞行。合理使用避障功能,不要盲目依赖。使用九宫格避障法。留意电量,及时返航。极低电量时放弃强行返航。飞行后及时为电池充电保养。...
3个方法突破访问限制：Bypass Paywalls Clean让优质内容触手可及
3个方法突破访问限制：Bypass Paywalls Clean让优质内容触手可及 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 当一位医学研究员在凌晨三点急需查阅最新临床研究…...
CANoe Trace中的Time列：从基础定义到高级时序分析实战
1. CANoe Trace中的Time列基础解析 第一次打开CANoe的Trace窗口时，那排密密麻麻的数据确实让人头皮发麻。但别担心，咱们先来搞定最左边那个看似简单却至关重要的Time列。这个时间戳就像车载网络的"心电图"记录仪，精确到微秒级别地记…...
如何轻松实现单机游戏分屏多人：Nucleus Co-Op完整指南
如何轻松实现单机游戏分屏多人：Nucleus Co-Op完整指南 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 还在为找不到联机伙伴而烦恼吗&a…...
从一篇TIE论文的稳定性分析入手，手把手复现Bode图判据的MATLAB实现
从TIE论文案例到MATLAB实践：Bode图判据的稳定性分析全解析 在电力电子系统设计中，LCL型并网逆变器的稳定性分析一直是工程师面临的挑战。2015年发表在IEEE Transactions on Industrial Electronics上的那篇经典论文，为我们提供了一个绝佳的研…...
从PVT到CST：5种CiA402控制模式在机器人项目中的花式用法（附ROS2配置示例）
从PVT到CST：5种CiA402控制模式在机器人项目中的花式用法（附ROS2配置示例） 在工业机器人开发中，控制模式的灵活切换往往能解决80%的运动控制难题。当机械臂需要完成高精度装配时，CSP模式能保证微米级定位；执…...
别再只改yaml了！深入理解YOLOv5检测头：从P2到P5，如何根据你的目标大小选择最优组合？
深入解析YOLOv5多尺度检测头：从理论到实践的选择艺术 在计算机视觉领域，目标检测一直是核心任务之一。YOLO系列算法以其高效的检测速度和良好的精度表现，成为工业界和学术界的热门选择。然而，很多开发者在使用YOLOv5时，…...
FLUX.2-klein-base-9b-nvfp4进阶：利用LSTM时序理解优化视频连贯风格转换
FLUX.2-klein-base-9b-nvfp4进阶：利用LSTM时序理解优化视频连贯风格转换 最近在折腾视频风格转换时，发现一个挺让人头疼的问题：用那些单帧处理的模型，出来的视频总是一闪一闪的，风格也忽明忽暗，看着特别不…...
Ostrakon-VL-8B本地化部署详解：从OpenClaw社区获取模型到一键启动
Ostrakon-VL-8B本地化部署详解：从OpenClaw社区获取模型到一键启动 最近有不少朋友在问，怎么把社区里那些热门的视觉语言大模型，比如Ostrakon-VL-8B，真正部署到自己的服务器或者云平台上，做成一个随时能用的服务。确实…...
MongoDB（70）如何使用副本集进行备份？
使用副本集进行备份是一个常见的MongoDB备份策略，因为副本集提供了数据冗余和高可用性。通过从副本集中读取数据，可以在不影响主节点的情况下进行备份。以下是详细的步骤和示例代码，展示如何使用 MongoDB 副本集进行备份。方法一：…...
黑客为什么不攻击微信钱包？
黑客为什么不攻击微信钱包？ 现在人人手机里都装着微信和支付宝，里面都或多或少存了些钱。怎么从来没听说谁的钱被技术牛逼黑客惦记走？ 是黑客没攻击过？还是黑客不敢攻击？其实都不是。阿里巴巴首席风险官郑俊芳就说过&…...