【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日上线。 二、备案流程 [找备案入口]–[填主体信息]–[填小程…...
无人机新手防炸飞行技巧
不要在室内飞行,容易撞墙。起飞前设置好避障和返航模式。使用模拟器熟练掌握操控。选择开阔环境目视起飞。使用低速档平稳飞行。合理使用避障功能,不要盲目依赖。使用九宫格避障法。留意电量,及时返航。极低电量时放弃强行返航。飞行后及时为电池充电保养。...
webrtc opus 音频编码支持SILK和CELT模式
SILK CELT是指将SILK编解码器和CELT编解码器结合在一起的混合音频编码方案。 SILK（Super-wideband audio coding）是一种低延迟的音频编解码器，用于实时的语音通信。它提供高质量的音频传输，并且适用于各种比特率和带宽条件。SILK…...
掌握Python爬虫实现网站关键词扩展提升曝光率
目录 一、关键词优化的重要性 二、关键词优化的基本方法 1、选择与网站内容相关的关键词 2、控制关键词的密度和分布 3、关键词的层次布局 三、Python爬虫实现网站关键词扩展 1、确定目标网站 2、分析目标网站的HTML结构 3、编写Python爬虫代码 4、分析爬取到的关键词…...
ajax实现原理
网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作 Ajax的实现原理 创建Ajax对象 传入请求方式和请求地址 发送请求 获取服务器与客户端的响应数据 xhr.responseText // 1…...
图G的拉普拉斯矩阵为什么由L=D-A定义
图G的拉普拉斯矩阵由LD-A定义，其中D是度矩阵（Degree Matrix），A是邻接矩阵（Adjacency Matrix）。这种定义方式有以下原因： 1. 度矩阵D：度矩阵是一个对角矩阵，其对角线上的…...
实习项目遇到的bug
问题1： 大概是因为没设置ts类型，它查不到的问题，不定义的话加上问号，加上可选链就不会报错了 {{bizEquipmentInfo.lastUnlockingVO?.lastUnlockingTime.replace(T, )? bizEquipmentInfo.lastUnlockingVO?.lastUnlockingTime.r…...
python selenium下载一个合适的chromedriver.exe(稳定版本）
可以使用该脚本来进行下载： 下载前需要安装如下的依赖 requests2.27.1 selenium4.14.0 webdriver_manager4.0.1下载脚本代码： import json import subprocess import shutil import os import time import zipfileimport requests from webdriver_mana…...
RabbitMQ从0到1完整学习笔记一：《基础篇》
目录 启篇 一、初识MQ 1.1 同步调用 1.2异步调用 1.3 技术选型 二、RabbitMQ 架构 2.2 收发消息 2.2.1 交换机 2.2.2 队列 2.2.3 绑定关系 2.2.4 发送消息 2.3 数据隔离 2.3.1 用户管理 2.3.2 virtual host 三、SpringAMQP 3.1 案例入门 3.1.1 导入依赖 3.1.2 消息发送 3.1.2 消…...
什么是时间冒泡？
时间冒泡是指当一个元素触发一个事件时，事件会像水泡一样，从触发元素向它的所有父节点传播，一直到根节点都会接收到此事件 1。如果父元素中注册了相应的事件处理函数，那么尽管事件在子节点触发的，在父元素上注册的事件…...
Go语言入门心法(三): 接口
Go语言入门心法(一) Go语言入门心法(二): 结构体 Go语言入门心法(三): 接口 一：go语言接口认知 Go语言中接口认知升维:解决人生问题的自我引导法则: 复盘思维|结构化思维|金字塔思维|体系化思维|系统化思维 面向对象编程(oop)三大特性: 封装,继承,多态 Go语言中,可…...
leetcode：210. 课程表 II
课程表 II 提示 中等 889 相关企业 现在你总共有 numCourses 门课需要选，记为 0 到 numCourses - 1。给你一个数组 prerequisites ，其中 prerequisites[i] [ai, bi] ，表示在选修课程 ai 前 必须 先选修 bi 。 例如，想要学习课程…...