react-JSX基本使用

1.目标

能够知道什么是JSX
能够使用JSX创建React元素
能够在JSX中使用JS表达式
能够使用JSX的条件渲染和列表渲染
能够给JSX添加样式

2.目录

JSX的基本使用
JSX中使用JS表达式
JSX的条件渲染
JSX的列表渲染
JSX的样式处理

3.JSX的基本使用

3.1 createElement()的问题

A. 繁琐不简洁
B. 不直观,无法一眼看出所描述的结构
C. 不优雅,用户体验不爽
在这里插入图片描述
js
在这里插入图片描述

3.2 JSX简介

JSX是JS XML 的简写,表示在JS代码中写XML(HTML)格式的代码。
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本、提升开发效率
JSX是React的核心内容。

3.3 使用步骤

A.使用JSX语法创建react元素

//使用jsx创建react元素
const title=<h1>Hello JSX</h1>

B.使用ReactDOM.render()方法渲染react元素到页面

//渲染react元素
ReactDOM.render(title,document.getElementById('root'))// react18 新渲染函数--ReactDOM.createRoot
ReactDOM.createRoot(document.getElementById("root")).render(title);

在这里插入图片描述

3.4 小结

A. 推荐使用JSX语法创建React元素
B. 写JSX就跟写HTML一样,更加直观、友好
C. JSX语法更能体现React的声明式特点(描述UI长什么样子)
D. 使用步骤:

//1.使用JSX创建react元素
const title=<h1>hello JSX</h1>
//2.渲染成react元素
ReactDOM.render(title,root)
// react18 新渲染函数--ReactDOM.createRoot
ReactDOM.createRoot(document.getElementById("root")).render(title);

3.5 思考

为什么脚手架中可以使用JSX语法?
A. JSX不是标准的ECMAScript语法,它是ECMAScript的语法扩展
B. 需要使用babel编译处理后,才能在浏览器环境中使用
C. create-react-app脚手架中已经默认有该配置,无需手动配置。
D. 编译JSX语法的包为:@babel/preset-react

3.6 注意点

A. React元素的属性名使用驼峰命名法
B. 特殊属性名:class->className、for->htmlFor、tabindex->tabIndex.
C. 没有子节点的React元素可以用/>结束。
D. 推荐:使用小括号包裹JSX,从而避免JS中的自动插入分号陷进。

//使用小括号包括JSX
const dv=(
<div>Hello JSX</div>
)
const title=(<h1 className='divFont'>Hello JSX</h1>);

4.嵌入JS表达式

A. 数据存储在JS中
B. 语法:{JavaScript表达式}
C. 注意:语法中是单大括号,不是双大括号!

const name=’Jack’
const dv=(
<div>你好,我叫{name}</div>
)
const name='Tom'
const title=(<h1>hello jsx,我叫{name}</h1>)
ReactDOM.render(title,document.getElementById('root'))

4.1 注意点

A. 单大括号中可以使用任意的JS表达式
B. JSX自身也是JS表达式
C. 注意:JS中的对象是一个例外,一般只会出现在style属性中
D. 注意:不能在{}中出现语句(比如:if/for等)

const sayHi = () => 'hi~~~';
const h1 = <h1>我是H1</h1>
const dv = (
<div>
<p>{1}</p>
<p>{'a'}</p>
<p>{1 + 7}</p>
<p>{3 > 5 ? '大于' : '小于等于'}</p>
<p>{h1}</p>
<p>{sayHi()}</p>
</div>)
ReactDOM.render(dv, document.getElementById('root'))

5.JSX的条件渲染

A. 场景:loading效果
B. 条件渲染:根据条件渲染特定的JSX结构
C. 可以使用if/else或三元运算符或逻辑运算符来实现

//条件渲染
const isLoading = true;
const loadData = () => {
//普通的条件渲染
// if(isLoading){
// return <div>loading</div>
// }
// return <div>数据加载完整,此处显示加载后的数据</div>
//三元运算
// return isLoading? (<div>loading....</div>):(<div>此处加载完成</div>);
//逻辑与运算符
return isLoading && (<div>loading.....</div>)
}
const dv = (
<h1>条件渲染:{loadData()}</h1>
)
ReactDOM.render(dv, document.getElementById('root'))

6.jsx的列表渲染

A. 如果要渲染一组数据,应该使用数组的map()方法
B. 注意:渲染列表时应该添加key属性,key属性的值要保证唯一
C. 原则:map()遍历谁,就给谁添加key属性
D. 注意:尽量避免使用索引号作为key

const songs = [
{ id: 1, name: '张三' },
{ id: 2, name: '里斯' },
{ id: 3, name: '王五' }
]
const dv = (
<div>
<ul>
{songs.map(item =><li key={item.id}>{item.name}</li>)}
</ul>
</div>
)
ReactDOM.render(dv, document.getElementById('root'))

songs.map() 返回一个由 <li> 元素组成的数组。React会遍历这个数组,并将每个 <li> 元素渲染到<ul> 列表中。当在 JSX 中使用数组时,每个数组元素应该有一个唯一的 key 属性。这是React用于跟踪哪些项被更改、添加或删除的一种方式,从而优化渲染性能。

7.JSX的样式处理

1.行内样式——style

const dv=(<h1 style={{color:'red',backgroundColor:'skyblue'}}>JSX的样式处理</h1>)
ReactDOM.render(dv, document.getElementById('root'))

2.类名——className(推荐)

const dv=(<h1 className='divFont' style=
{{color:'red',backgroundColor:'skyblue'}}>JSX的样式处理</h1>)
ReactDOM.render(dv, document.getElementById('root'))

8.JSX小结

A. JSX是React的核心内容
B. JSX表示在JS代码中写HTML结构,是React声明式的体现
C. 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染,可以描述任意UI结构
D. 推荐使用className的方式给JSX添加样式
E. React完全利用JS语言自生的能力来编写UI,而不是造轮子增加HTML功能
F. react能用js就不会新增一种新语法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git - 开启2FA

Refrence: [Github实战]双重认证2FA 如何 设置/更改[手把手][2022]_enable two-factor authentication (2fa)-CSDN博客

在Node.js中如何实现用户身份验证和授权

当涉及到构建安全的应用程序时&#xff0c;用户身份验证和授权是至关重要的一环。在Node.js中&#xff0c;我们可以利用一些流行的库和技术来实现这些功能&#xff0c;确保我们的应用程序具有所需的安全性。本篇博客将介绍如何在Node.js中实现用户身份验证和授权。 用户身份验…

“智农”-大棚可视化

基于自主可控的数字孪生技术、物联网技术、大数据技术&#xff0c;构建全流程的新型农业一体化管理平台&#xff0c;围绕产运销管理全流程&#xff0c;实现生产->存储->包装->运输->销售的全链条管理。融合农业数据管理、农业数据预警显示、多维数据综合显示、农产…

Jvm之内存泄漏

1 内存溢出 1.1 概念 java.lang.OutOfMemoryError&#xff0c;是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;出现OutOfMemoryError。产生该错误的原因主要包括&#xff1a;JVM内存过小。程序不严密&#xff0c;产生了过多的垃圾。 程序体现: 内…

微服务架构 SpringCloud

单体应用架构 将项目所有模块(功能)打成jar或者war&#xff0c;然后部署一个进程--医院挂号系统&#xff1b; > 优点: > 1:部署简单:由于是完整的结构体&#xff0c;可以直接部署在一个服务器上即可。 > 2:技术单一:项目不需要复杂的技术栈&#xff0c;往往一套熟悉的…

LabVIEW水下温盐深数据一体化采集与分析

LabVIEW水下温盐深数据一体化采集与分析 开发一个基于LabVIEW的水下温盐深数据一体化采集与分析系统&#xff0c;实现海洋环境监测的自动化和精确化。通过集成温度、盐度和深度传感器&#xff0c;结合USB数据采集卡&#xff0c;利用LabVIEW软件开发的图形化界面&#xff0c;实…

编程笔记 html5cssjs 095 JavaScript 第三方库或框架

编程笔记 html5&css&js 095 JavaScript 第三方库或框架 一、流行的JavaScript第三方库和框架二、Node.js简介三、Bootstrap简介四、jQuery简介五、React简介六、Vue.js简介 JavaScript的第三方库和框架是构建现代Web应用程序不可或缺的部分&#xff0c;它们提供了预封装…

Elasticsearch的基本安装教程,Elasticsearch+SpringBoot实现简单的增删改查功能

Elasticsearch 是一个开源的分布式搜索和分析引擎,最初由 Elastic 公司开发。它是基于 Apache Lucene 的搜索引擎构建的,提供了强大的搜索和分析功能,并支持实时数据检索和分析。 Elasticsearch 被设计用来处理大规模的数据集,它具有以下几个主要特点: 分布式架构: Elast…

淘宝关键词搜索API、搜索商品接口、获取商品列表商品id

淘宝搜索引擎的工作原理&#xff1a; 淘宝搜索引擎的工作原理是基于搜索引擎的核心技术——爬虫和索引&#xff0c;通过对海量数据的抓取、分析和存储&#xff0c;提供给用户最准确的搜索结果。 具体来说&#xff0c;淘宝搜索引擎的工作流程如下&#xff1a; 企业级api数据…

腾讯云服务器4核8G性能,和阿里云比怎么样?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

12.Prometheus配置

平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我。 跟着我从0学习JAVA、spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信公众号【 IT特靠谱 】,每天都会分享技术心得~ 1.Prometheus配置 Prometheus服务通常可以…

这波知识点分享可得接稳了!非线性模型线性化方法技巧!

现在电力系统优化方向的文章几乎都要提及将非线性模型线性化&#xff0c;使用的方法大致可包括分段线性化&#xff08;最基础&#xff09;&#xff0c;混合整数线性化方法&#xff0c;绝对值法&#xff0c;大M方法&#xff0c;关于非线性模型线性化方法的文章和推文介绍也数不胜…

解决方案各缩写解释 OR/IR/SF/SR/AR

OR (Offering Requirement,产品包需求&#xff09;: 来自公司内、外部的原始需求。 IR (Initial Requirement,初始需求) : 站在内部客户/市场角度&#xff0c;以准确的语言重新描述的需求。 SF (System Feature,系统特性)&#xff1a; 描述该版本为解决客户问题所具备的重大能…

JAVA AQS源码深度讲解和分析

为方便理解&#xff0c;本文章以非公平锁ReentrantLock()为例作为突破讲解方法lock。 前置知识&#xff1a;JAVA AQS源码分析前置知识-CSDN博客 ReentrantLock的原理 Lock接口的实现类&#xff0c;基本都是通过聚合了一个队列同步器的子类完成线程访问控制的 从最简单的lock方…

C语言————结构体

接下来我们来了解C语言中很重要的内容&#xff1a;结构体。虽然到现在我们可以创建常量&#xff0c;变量&#xff0c;数组&#xff0c;但是存储的都是相同类型的数据&#xff0c;如果我们需要写入不同数据类型的信息怎么办&#xff0c;例如常见的身份证上的信息&#xff0c;有身…

springboot+vue+mysql+easyexcel实现文件导出+导出的excel单元格添加下拉列表

Excel导出 EasyExcel官方文档 官方文档本身写的非常详细&#xff0c;我就是根据官方文档内的写Excel里web中的写实现的导出 后端 对象 需要写一个实体类 其中涉及到一些用到的EasyExcel的注解 ColumnWidth(20) 列宽设为20&#xff0c;自定义的&#xff0c;放在实体类上面是…

Postgresql中触发器的使用

在PostgreSQL中&#xff0c;触发器是一种特殊类型的函数&#xff0c;它会自动在数据库上执行特定操作之前或之后触发。这些操作通常是INSERT、UPDATE或DELETE语句。触发器可以用来执行数据校验、自动更新或维护表之间的关联。 触发器组件 触发器函数&#xff1a;这是实际执行…

binwalk安装记录和burpsuite安装记录

我的虚拟机环境是Ubuntu20.04 python有2.7的和3.8的 [[#binwalk|binwalk]] [[#binwalk#pip|pip]][[#binwalk#安装 sasquatch|安装 sasquatch]][[#binwalk#安装 jefferson|安装 jefferson]][[#binwalk#安装 ubi_reader|安装 ubi_reader]][[#binwalk#安装 yaffshiv|安装 yaffshi…

JavaWeb——005 -- 请求响应 分层解耦(Postman、三层架构、IOC、DI、注解)

目录 一、请求 1、Postman&#xff08;接口测试工具&#xff09; 1.1、介绍 ②、安装 2、简单参数 1.1、原始方式 1.2、SpringBoot方法 ③、小结 3、实体参数 3.1、简单实体对象 3.2、复杂实体对象 3.3、小结 4、数组集合参数 ①、数组​编辑 ②、集合 ③、小结…

Alist访问主页显示空白解决方法

文章目录 问题记录问题探索和解决网络方案问题探究脚本内容查看 最终解决教程 问题记录 访问Alist主页显示空白&#xff0c;按F12打开开发人员工具 ,选择控制台&#xff0c;报错如下 index.75e31196.js:20 Uncaught TypeError: Cannot assign to read only property __symbo…