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

React基础教程(三):JSX语法

React基础教程(三):JSX语法

1、JSX简介

  1. 全称:JavaScript XML
  2. react定义的一种类似于XML的JS扩展语法:JS+XML
  3. 本质是React.createElement(component, props, ...children)方法的语法糖
  4. 作用:用来简化创建虚拟DOM(注意:它不是字符串,也不是HTML/XML标签;它最终产生的就是一个JS对象)
  5. 标签名任意:HTML标签或其他标签

2、JSX语法规则

  1. 定义虚拟DOM的时候不要写引号
  2. 标签中混入JS表达式时要用{}
  3. 样式的类名指定不要用class,要用className
  4. 内联样式,要用style={{key:value}}的形式去写
  5. 虚拟DOM必须只有一个根标签
  6. 标签必须闭合
  7. 标签首字母:①若小写字母开头,则将改标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。②若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello React</title><!--    引入react核心库--><script src="../js/react.development.js"></script><!--    引入react-dom,用于支持react操作dom--><script src="../js/react-dom.development.js"></script><!--    引入babel,用于将jsx转为js--><script src="../js/babel.min.js"></script>
</head>
<body>
<!--    准备容器-->
<div id="test"></div><!--此处一定要写babel-->
<script type="text/babel">const myId = "react";const myData = "Hello React !!!";// 1、创建虚拟DOMconst virtualDOM = (<div><h1 className={'title'} id={myId}><span style={{color: "red", fontSize: '29px'}}>{myData}</span></h1><h1 className={'title'} id={myId.toUpperCase()}><span style={{color: "red", fontSize: '29px'}}>{myData}</span></h1><label><input type="text"/></label></div>);// 2、渲染虚拟DOMReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>
<style>.title {background-color: bisque;}
</style>

3、JSX小练习

需求:动态展示如下列表:
在这里插入图片描述

小插曲:什么是表达式?

  1. 一个表达式会产生一个值,可以放在任何一个需要值的地方。
    • 下面这些都是表达式
      • a
      • a+b
      • func(1)
      • arr.map()
      • function test(){}
  2. 语句/代码
    • 下面这些都是语句/代码
      • if(){}
      • for(){}
      • switch(){case:xxxx}

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title><!--    引入react核心库--><script src="../js/react.development.js"></script><!--    引入react-dom,用于支持react操作dom--><script src="../js/react-dom.development.js"></script><!--    引入babel,用于将jsx转为js--><script src="../js/babel.min.js"></script>
</head>
<body>
<!--    准备容器-->
<div id="test"></div>
<!--此处一定要写babel-->
<script type="text/babel">// 模拟一些数据const data = ['Angular', 'React', 'Vue'];// const obj = {name1:'Angular', name2:'Angular', name3:'Angular'};// 1、创建虚拟DOMconst virtualDOM = (<div><h2>前端js框架列表</h2><ul>{data.map((item, index)=>{return <li key={index}>{item}</li>})}</ul></div>); /*此处一定不要写引号,因为不是字符串。这是JSX语法*/// 2、渲染虚拟DOMReactDOM.render(virtualDOM, document.getElementById("test"));
</script>
</body>
</html>

相关文章:

React基础教程(三):JSX语法

React基础教程(三)&#xff1a;JSX语法 1、JSX简介 全称&#xff1a;JavaScript XMLreact定义的一种类似于XML的JS扩展语法&#xff1a;JSXML本质是React.createElement(component, props, ...children)方法的语法糖作用&#xff1a;用来简化创建虚拟DOM&#xff08;注意&…...

软件测试岗位都是女孩子在做吗?

听我一朋友说&#xff0c;测试岗位基本都是女孩子做。” 不知道是不是以前“软件测试岗”给人印象是“不需要太多技术含量”的错觉&#xff0c;从而大部分外行认为从业软件测试的人员中女生应占了大多数。比如有人就觉得&#xff1a;软件测试主要是细心活&#xff0c;所以女生…...

ARP协议,带你了解ARP协议

目录 一、ARP协议概述 二、使用ARP的四种情况 三、ARP缓存 四、ARP的工作原理 1. 地址解析 2. 地址缓存 五、ARP报文格式 1. ARP请求报文格式 2. ARP响应报文格式 六、免费ARP 七、代理ARP 一、ARP协议概述 ARP&#xff08;Address Resolution Protocol&#xff09;地…...

基于Java汽车客运站管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…...

0203使用规则-索引-MySQL

文章目录 1 联合索引1.1 最左前缀法则1.2 范围查询 2 索引失效2.1 常见情况2.2 数据分布影响 3 SQL提示4 覆盖索引和回表查询5 前缀索引6 单列和联合索引7 设计原则结语 1 联合索引 1.1 最左前缀法则 在Mysql数据库中创建了联合索引&#xff08;或称复合索引&#xff0c;即包含…...

LVS+Keepalived群集

一、Keepalived概述 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 在一个LVS服务集群中通常有主服务器&#xff08;MASTER&#xff09;和备份服务器&#xff08;BACKUP&#xff09;两种角色的服务器&#xff0c…...

抖音矩阵系统源代码开发部署--源码搭建

抖音矩阵系统是一个具有强大功能的开放性平台&#xff0c;通过数据挖掘技术能够实现精准的用户画像和个性化推荐&#xff0c;这也是抖音成为国内最受欢迎的短视频平台之一的原因之一。矩阵系统的开发需要大量的技术支持和数据分析&#xff0c;同时也需要综合运用大数据、机器学…...

如何用Jmeter进行接口测试 ,这应该是全网最详细的教程了

一、Jmeter 的使用步骤 打开Jmeter 安装包&#xff0c;进入\bin 中&#xff0c;找到"jmeter.bat", 点击打开即可。 在下图打开的Jmeter 页面中&#xff0c;右键“测试计划” -> “添加” -> "Threads(Users)" -> “线程组”&#xff0c; 建立线…...

C语言---malloc(0)会产生什么结果,真的是空指针吗?

前言 &#xff08;1&#xff09;几天前在一个交流群中看到有人说&#xff0c;面试问malloc(0)会怎么样是真的恶心。 &#xff08;2&#xff09;这个突然激起了我的好奇心。居然还可以malloc(0)&#xff1f;&#xff01; &#xff08;3&#xff09;经过测试最后&#xff0c;发现…...

建模助手618 | 谁不囤点Revit插件我都会生气!

大家好&#xff0c;这里是建模助手。 早在5月份&#xff0c;我们已经就“618”这个事情高调了一番&#xff0c;以提前放“价”的姿势&#xff0c;让许多用户以躺赢的状态拉开了年中大促的序幕。&#xff08;5月购买的盆友&#xff0c;切记看完全文&#xff0c;内附彩蛋 活动反…...

【“职场程序员是否会保护自己的隐私?为何要求程序员之间保密薪资?”】

职场程序员之间确实有一些秘密&#xff0c;其中之一便是对薪资保密。这并非完全是程序员们的独立行为&#xff0c;而是因为一些公司或组织规定员工之间不能互相透露薪水信息。 第一个原因是保护公司自身利益。如果一个程序员知道其他同事的薪资水平比自己高&#xff0c;他可能…...

企业工程管理系统源码之提高工程项目管理软件的效率

高效的工程项目管理软件不仅能够提高效率还应可以帮你节省成本提升利润 在工程行业中&#xff0c;管理不畅以及不良的项目执行&#xff0c;往往会导致项目延期、成本上升、回款拖后&#xff0c;最终导致项目整体盈利下降。企企管理云业财一体化的项目管理系统&#xff0c;确保…...

创新指南 | 推动销售的17个可落地的集客式营销示例

无论您是开启集客式的营销有一段时间还是处于起步阶段&#xff0c;了解像您这样的企业是如何粉碎竞争对手的的集客式策略总是有帮助的。无论您的公司做什么&#xff0c;它所服务的行业&#xff0c;是B2B还是B2C &#xff0c;您都可以在这里找到许多可以使用的示例。 在本文中&…...

ASEMI代理光宝光耦LTV-0314的应用与优势

编辑-Z 在电子设备的设计和制造过程中&#xff0c;光耦合器是一种至关重要的组件。它们在电路中起到隔离作用&#xff0c;保护电子设备免受电压冲击和电流过载的影响。今天&#xff0c;我们将深入探讨一种特殊的光耦合器——LTV-0314&#xff0c;它的特性、应用以及优势。 一、…...

Apikit 自学日记: Apikit 如何发起测试

进入 API 文档详情页&#xff0c;点击上方 测试 标签&#xff0c;进入 API 测试页&#xff0c;系统会根据API文档自动生成测试界面并且填充测试数据。 填写请求参数 首先填写好请求参数。 请求头部 您可以输入或导入请求头部。批量导入的数据格式为 key : value &#xff0c;…...

python-glob模块_表格及代码样例

glob模块 文章目录 glob模块1. glob.glob(pathname)&#xff1a;根据指定的模式匹配文件路径&#xff0c;并返回匹配的路径列表2. glob.iglob(pathname)&#xff1a;返回一个迭代器&#xff0c;逐个匹配文件路径&#xff0c;适用于大量文件的情况3. glob.escape(pathname)&…...

GitHub Copilot 最全安装、使用

GitHub Copilot 最全安装、使用教程 一、温馨提示 GitHub Copilot 目前为止可以免费试用一个月&#xff0c;但是试用的前提是必须要绑定银行卡&#xff0c;因为后续会自动扣费&#xff0c;所以请注意试用结束日期&#xff0c;自己定好闹钟关闭订阅。 订阅价格为每月10美刀&a…...

C语言 指针(特别篇)

本篇目录 C语言 指针&#xff08;特别篇&#xff09;内存地址简要介绍C语言指针C语言的指针可以指向什么?取地址符 &&#xff08;Address-of Operator&#xff09;C语言中的 * 号运算符示例集&#xff1a;指向变量的指针指向数组的指针指向字符串的指针二级指针指针数组的…...

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(5月26日论文合集)

文章目录 一、检测相关(9篇)1.1 Energy-based Detection of Adverse Weather Effects in LiDAR Data1.2 Anomaly Detection with Conditioned Denoising Diffusion Models1.3 Mask Attack Detection Using Vascular-weighted Motion-robust rPPG Signals1.4 Improved Multi-Sca…...

网络编程与自动化(python)

20.1 网络编程与自动化概述 传统网络运维困境大家在日常的网络运维中是否遇到过如下问题: 设备升级:现网有数千台网络设备,你需要周期性、批量性地对设备进行升级。配置审计:企业年度需要对设备进行配置审计。例如要求所有设备开启sTelnet功能,以太网交换机配置生成树安全…...

有趣的数学 对称/非对称加密简史及数学原理一览

一、非对称加密简史 1、算法建立 对于任何想发送加密信息的人&#xff0c;另一个问题是如何让接收人知道这条信息一开始是如何加密的。对于像字母替换式密码这样的密码&#xff0c;问题在于&#xff0c;一旦窃听者知道了加密方案&#xff0c;后续的信息都可以轻松获取。 公钥加…...

AI大模型落地不远了!首个全量化Vision Transformer的方法FQ-ViT(附源代码)

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID&#xff5c;计算机视觉研究院 学习群&#xff5c;扫码在主页获取加入方式 论文地址&#xff1a;https://arxiv.org/pdf/2111.13824.pdf 项目代码&#xff1a;https://github.com/megvii-research/FQ-ViT 计…...

YouTubeDNN

这个youTubeDNN主要是工程导向&#xff0c;对于推荐方向的业界人士真的是必须读的一篇文章。它从召回到排序整个流程都做了描述&#xff0c;真正是在工业界应用的经典介绍。 作者首先说了在工业上YouTube视频推荐系统主要面临的三大挑战&#xff1a; 1.Scale(规模)&#xff1…...

面向对象的介绍和内存

学习面向对象内容的三条主线 • Java 类及类的成员&#xff1a;&#xff08;重点&#xff09;属性、方法、构造器&#xff1b;&#xff08;熟悉&#xff09;代码块、内部类 • 面向对象的特征&#xff1a;封装、继承、多态、&#xff08;抽象&#xff09; • 其他关键字的使用…...

【数据可视化】Plotly Express绘图库使用

Plotly Express是一个基于Plotly库的高级Python可视化库。它旨在使绘图变得简单且直观&#xff0c;无需繁琐的设置和配置。通过使用Plotly Express&#xff0c;您可以使用少量的代码创建具有丰富交互性和专业外观的各种图表。以下是Plotly Express的一些主要特点和优势&#xf…...

小红书企业号限流原因有哪些,限流因素

作为企业、品牌在小红书都有官方账号&#xff0c;很多人将注册小红书企业号看作是获取品牌宣推“特权”的必行之举。事实真的如此吗&#xff0c;那为什么小红书企业号限流频发&#xff0c;小红书企业号限流原因有哪些&#xff0c;限流因素。 一、小红书企业号限流真的存在吗 首…...

1.6C++双目运算符重载

C双目运算符重载 C中的双目运算符重载指的是重载二元运算符&#xff0c;即有两个操作数的运算符&#xff0c;如加减乘除运算符“”、“-”、“*”和“/”等。 通过重载双目运算符&#xff0c;可以实现自定义类型的运算符操作。 比如可以通过重载加减运算符实现自定义类型的向…...

CDD诊断数据库的简单介绍

1. 什么是数据库? 数据库是以结构化方式组织的一个数据集合。 比如DBC数据库: Network nodes Display Rx Messages EngineState(0x123) 通过结构化的方式把网络节点Display里Rx报文EngineState(0x123)层层展开。这种方 式的好处是:层次清晰,结构分明,易于查找。 2. 什么…...

【笔试强训选择题】Day25.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…...

Python心经(6)

目录 callable super type&#xff08;&#xff09;获取对应类型 isinstance判断对象是否是某个类或者子类的实例 issubclass&#xff0c;判断对象是不是类的子孙类 python3的异常处理 反射&#xff1a; 心经第三节和第五节都写了些面向对象的&#xff0c;这一节补充一…...

网站开发设计模板/百度的客服电话是多少

事先声明&#xff0c;本文无意挑起python与其他语言的争端&#xff0c;每一种语言都有自己的适用场景和专业范围&#xff0c;任何一门编程语言都是有所能&#xff0c;有所不能。本文对其他语言没有半点贬低之意&#xff0c;这7门编程语言&#xff0c;我都有过使用&#xff0c;我…...

做网站建设需要/信息流优化

这次的 JDK 10 只是一个小版本更新&#xff0c;不过还是引入了一些非常重要的改变&#xff0c;我就挑几个对一般开发者影响重大的特性说说吧。Java 10 引入了局部变量类型推断&#xff0c;现在我们可以使用 var 替换局部变量声明时的类型部分&#xff0c;从而避免耗费精力去写出…...

嘉兴商城网站开发设计/推广方案如何写

1号进程是什么 当我们使用 /bin/bash 启动一个centos的容器 docker run -it --rm centos:7 /bin/bash那么启动命令就是1号进程 [rootded49b74042c /]# ps aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND root 1 0.2 0.0 11836 …...

烟台做网站系统/关键词三年级

在使用vxe-table 下拉选时遇到一个问题选中后值不显示(针对这个问题做一下记录)图:选择前选择后值不显示代码如下<解决方法:给下拉选加change事件 在事件触发时使单元格清除激活状态,然后立刻将该单元格设置为激活状态.<js代码selectChange效果:选择前选择后值显示了...

数字企业管理系统/漯河搜狗关键词优化排名软件

- 题目大意 输入几个单词&#xff0c;让你判断不同的单词有几个&#xff08;不必区分大小写&#xff09;。 - 解题思路 因为不区分大小写&#xff0c;所以现将单词换位统一格式&#xff0c;然后只需用set容器即可&#xff08;因为set中不会有重复的元素出现&#xff09;。 - 代…...

可以做h5的网站有哪些/网站优化策略分析论文

写在前面 本文一起看下redis作为分布式锁使用的相关内容。 1&#xff1a;怎么算是锁或没锁 锁和没锁本身其实就是用一个变量的值来表示&#xff0c;比如变量lock&#xff0c;当值为1时代表处于上锁状态&#xff0c;当值为0时表示没有锁&#xff0c;那么多线程想要获取锁的话就…...