JSX看着一篇足以入门

2023-10-23 14:15
文章标签 入门 一篇 jsx 足以 看着

本文主要是介绍JSX看着一篇足以入门,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JSX 介绍

学习目标: 能够理解什么是 JSX,JSX 的底层是什么
概念: JSX 是 javaScriptXML(HTML) 的缩写,表示在 JS 代码中书写 HTML 结构
作用: 在 React 中创建 HTML 结构(页面 UI 结构)
优势:
 1. 采用类似 HTML 的语法,降低学习成本,会 HTML 就会 JSX
 2. 充分利用 JS 自生的可编程能力创建 HTML 结构
注意: JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的@babel/plugin-transform-react-jsx 包,用来解析该语法,将声明式的 JSX 解析为命令式的函数调用
在这里插入图片描述

JSX 中使用 js 表达式

学习目标: 能够在 JSX 中使用表达式
语法:
{JS 表达式}

function App() {// 1.识别常规变量const name = '跟着老惠学前端'// 2.原生js方法调用const age = () => {return 25}//3.三元运算符const flag = truereturn (<div className="App">{name}{age()}{flag ? '真棒' : '真菜'}</div>)
}export default App

可以使用的表达式
 1.字符串、布尔值、数值、null、undefined、object([]/{})
 2.算数运算(1+2)、字符串方法(“abcde”.split(‘’))、数组方法([‘a’,‘b’].join(‘-’))
 3. fn()
特别注意
if 语句/switch-case 语句/变量声明语句,这些叫做语句,不是表达式,不能书写在{}中!!!

// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (<div className="App">{name}<br />{age()}<br />{flag ? '真棒' : '真菜'}<br /></div>
)

在这里插入图片描述

JSX 列表渲染

学习目标: 能够在 JSX 中实现列表渲染

页面的构建离不开重复的列表结构,比如歌曲列表,商品列表等等,Vue 中用的式 v-for 做到这一点,react 中又该如何实现呢?

实现: 使用数组的 map 方法
案例:

// 技术方案:map 重复渲染的是哪个模板 就return那个
// 注意事项:遍历列表时同样需要一个类似number/string不可重复的key 提高diff性能
// key仅仅在内部使用,不会出现在真实的dom结构
const stu = [{ id: 1, name: '小明', age: 18 },{ id: 2, name: '李华', age: 19 },{ id: 3, name: '小红', age: 17 },{ id: 4, name: '小芳', age: 17 },
]return (<div className="App"><ul>{stu.map((item) => (<li key={item.id}>姓名:{item.name},年龄:{item.age}</li>))}</ul></div>
)

运行结果:
在这里插入图片描述

JSX 条件渲染

学习目标: 能够在 JSX 中实现条件渲染
作用: 根据是否满足条件生成 HTML 结构,比如 Loading 效果
实现: 可以使用三元运算符或者逻辑&&(与)运算符
实例:

function App() {// 条件渲染// 技术方案:1.三元表达式(常用) 2.逻辑&&(与)运算const flag = truereturn (<div className="App">1.三元表达式<br/>(1).简单版:{flag ? <span>this is span</span>:null}<br/>(2).复杂版(可用小括号包裹起来):{flag ? (<div><span>this is span2</span></div>) : null}2.&& (前面为true则显示,false则不显示))<br/>{true && <span>this is span</span>}</div>);
}export default App;

运行结果:
在这里插入图片描述

JSX 模板精简原则

学习目标: 使模板中的逻辑跟简洁
实现: 复杂的多分枝的逻辑收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用
实例:

// 有一个状态type有1,2,3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3const title = (type) =>{if(type === 1){return <h1>this is h1</h1>}else if(type === 2){return <h2>this is h2</h2>}else if(type === 3){return <h3>this is h3</h3>}
}return (<div className="App">{title(1)}{title(3)}{title(2)}</div>);
}export default App;

运行结果:
在这里插入图片描述

JSX 样式处理

学习目标: 能够在 JSX 中实现 CSS 样式处理
 1. 行内样式
实现: 在元素身上绑定一个 style 样式
  - 行内样式 · style

function APP(){return (<div className="App"><div style={{color:'red',fontSize:'10px'}}>this is div</div></div>)
}
export default App

  - 行内样式·style·优化写法

function App() {const divStyle1 = {color:'blue',fontSize:'20px'}return (<div className="App"><div style={divStyle1}>this is div</div></div>)
}export default App;

 2. 类名样式
实现: 在元素身上绑定一个 className 属性即可
  1. 创建一个 css 样式表文件 app.css

.colors {color: peru;font-size: 40px;
}

  2. JSX 中引入 css 文件

// 使用import引入样式表文件
import './app.css'

  3. 在元素上用 className 属性绑定 class 样式

    <div className='colors'>类名样式</div>

运行结果:
在这里插入图片描述

JSX 动态类名控制

学习目标: 根据需求判断是否显示某个类名的样式
实现: 使用三元表达式或逻辑&&运算

import './app.css';
function App() {const color1 = trueconst color2 = truereturn (<div className="App">1. 三元:<div className={color1?'colors':''}>类名样式</div>2. &&(与)<div className={color2 && 'colors'}>类名样式</div></div>)
}export default App;

运行结果:
在这里插入图片描述

JSX 注意事项

学习目标: 掌握 JSX 实际开发过程中的一些注意事项
  1. JSX 必须具有一个根节点,如果没有根节点可以使用<></>(幽灵节点)代替根节点将所有元素包裹起来

function App() {return (<><div className="App">1</div><div className={htmlFor(i in 10)}>2</div></>)
}export default App;

  2. 所有标签必须形成闭合(

),成对闭合或者自闭( )和都可以
  3. JSX 中的语法更加贴近 JS 语法,属性名采用驼峰命名法 class -> className; for -> htmlFor
  4. JSX 支持多行(换行),如果需要换行,需使用 ()包裹,防止出现 Bug

这篇关于JSX看着一篇足以入门的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/268373

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员,我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书,我不敢乱推荐,尤其是国内作者写的书,往往七拼八凑,漏洞百出。 但是,李忠老师的《C语言非常道》值得一读。对了,李老师有个官网,网址是: 李忠老师官网 最棒的是,有配套的教学视频,可以试看。 试看点这里 接下来言归正传,讲解指针。以下内容很多都参考了李忠老师的《C语言非

MySQL入门到精通

一、创建数据库 CREATE DATABASE 数据库名称; 如果数据库存在,则会提示报错。 二、选择数据库 USE 数据库名称; 三、创建数据表 CREATE TABLE 数据表名称; 四、MySQL数据类型 MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串类型 4.1 数值类型 数值类型 类型大小用途INT4Bytes整数值FLOAT4By

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是