react(一）：特点-基本使用-JSX语法
初识React
React是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。
官网文档：React 官方中文文档
特点
1.声明式编程
2.组件化开发
3.多平台适配
开发依赖
开发React必须依赖三个库：
1.react：包含react所必须的核心代码
2.react-dom：react渲染在不同平台所需要的核心代码
3.babel：将jsx转换成React代码的工具
引入依赖的方式：
1.CDN引入
<!-- CDN引入 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>2.下载后，添加本地依赖
3.npm管理
案例-普通方式实现
注意：React18前后，渲染组件的书写方式较为不同
React18之前：使用 ReactDOM.render() 方法来渲染组件
React18之后：使用 ReactDOM.createRoot() 方法来渲染组件
<body><div id="root"></div><!-- 1.引入依赖 --><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- 编写React代码 --><script type="text/babel">// React18之前：ReactDOM.render()// ReactDOM.render(<h2>Hello World</h2>,document.getElementById('root'))// React18之后：createRootconst root = ReactDOM.createRoot(document.getElementById('root'))/* 要修改文本内容step1:将文本定义成变量*/let message = 'Hello World'//step2:监听按钮的点击function btnClick() {// 2.1修改数据message = 'Hello React'// 2.2重新渲染界面rootRender()}rootRender()// step3.封装一个渲染函数function rootRender( ){// 第一个（）表示方法；第二个()表示它是一个整体root.render((<div><h1>{message}</h1><button onClick={btnClick}>修改文本</button></div>))}</script>
</body>案例-组件化开发
可使用类的方式，将其封装成一个组件
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">// 使用组件重构代码// 1.类组件-类名必须大写！！// 2.函数式组件class App extends React.Component {// 组件数据constructor() {super()//this.state = {定义的数据}this.state = {message:"Hello World"}}// 组件方法(实例方法)btnClick() {//该函数默认this指向为undefined——改变其this指向// 内部完成两件事：1.将state中的值修改掉 2.自动重新执行render函数this.setState({message:"Hello React"})}// render中返回的jsx内容即root根节点渲染内容render() {// console.log("render",this);//此处this-App组件实例return (<div><h2>{this.state.message}</h2><button onClick={this.btnClick.bind(this)}>修改文本</button></div>)}}// 将组件渲染到界面上const root = ReactDOM.createRoot(document.getElementById('root'))root.render(<App />)</script>
</body>JSX语法解析
jsx书写规范
render(){const {message} = this.state/* 书写规范：1.JSX结构中只有一个根元素2.JSX结构通常包裹一个（）—— 将整个jsx当成一个整体，实现换行、3.jsx可以是单标签，也可以是双标签，但是单标签必须以/>结尾*/return (<div><h1>{ message }</h1><br/></div>)
}jsx注释写法
render(){const {message} = this.statereturn (<div>{/* jsx注释写法 */}<h1>{ message }</h1></div>)
}jsx插入内容
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">//1.创建rootconst root = ReactDOM.createRoot(document.getElementById('root'))//2..定义App根组件class App extends React.Component {constructor() {super()this.state = {message:"Hello World",names:[ 'Jack', 'Tom', 'Lucy' ],count:100,aaa:undefined,bbb:null,ccc:true,friend:{name:'lucy', age:22},firstNmae:'张',lastName:'三',age:20,movies:["哪吒","唐探","三体"]}}render(){// 1.插入标识符const {message, names,count} = this.stateconst { aaa, bbb, ccc} = this.stateconst {friend} = this.state// 2.对内容进行运算后显示(插入表达式)const {firstNmae, lastName} = this.stateconst fullName = firstNmae + "" + lastNameconst {age} = this.stateconst ageStr = age > 18 ? '成年人' : '未成年人'const {movies} = this.stateconst items = movies.map(item => <li>{item}</li>)// 3.返回jsx的内容return (<div>{/* 1.Number/String/Array直接显示处理 */}<h1>{ message }</h1><h2> {names} </h2><h2> {count} </h2>{/* 2.undefined/null/Boolean页面什么都不显示-取值为空 */}<h2>{aaa}</h2><h2>{bbb}</h2><h3>{ccc}</h3>{/* 3.Object类型不能作为子元素显示 */}{/* <h2>{friend}</h2> */}<h2>{Object.keys(friend)}</h2>{/* 4.可插入对应的表达式 */}<h2>{ 10 + 20 }</h2><h2>{firstNmae + "" + lastName}</h2><h2>{fullName}</h2>{/* 5.插入三元运算符 */}<h2>{ageStr}</h2><h2>{age >=18 ? "成年" : "未成年"}</h2>{/* 可以调用方法获取结果 */}<ul>{items}</ul><ul>{movies.map(item => <li>{item}</li>)}</ul><ul>{this.getMovies()}</ul></div>)}getMovies(){const liEls = this.state.movies.map(item => <li>{item}</li>)return liEls}}// 3.将App组件渲染到root上root.render(<App />)</script>
</body>jsx绑定属性
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">//1.创建rootconst root = ReactDOM.createRoot(document.getElementById('root'))//2..定义App根组件class App extends React.Component {constructor() {super()this.state = {title:"学习第一天",imgURL:"https://p1.ssl.qhmsg.com/t0143b426aee3bb03cb.jpg",link:"htttp://www.baidu.com",isActive:true,objStyle:{color:"red", fontSize:"30px"}}}render(){const {title, imgURL,link,isActive,objStyle} = this.state// 需求：isActive为true时，添加active类名// 写法一：const className = `abc cba ${isActive? "active" : ""}`// 写法二：const classList = ["abc","cba"]if(isActive) {classList.push("active")}return (<div>{/* 1.基本属性绑定 */}<h1 title={title}>我是h1元素</h1>{/* <img src={imgURL} alt=""/> */}<a href={link}>百度一下</a>{/* 2.绑定class属性 */}<h2 className={className}>哈哈哈哈哈</h2><h2 className={classList.join(" ")}>哈哈哈哈哈</h2>{/* 3.绑定style属性:绑定对象类型 */}<h2 style={{color:"red", fontSize:"30px"}}>11111</h2><h2 style= {objStyle}>888</h2></div>)}}// 3.将App组件渲染到root上root.render(<App />)</script>
</body>相关文章：
react(一）：特点-基本使用-JSX语法
初识React React是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。 官网文档：React 官方中文文档 特点 1.声明式编程 2.组件化开发 3.多平台适配 开发依赖 开发React必须依赖三个库： 1.react：包含react所必…...
【Go】无法访问 proxy.golang.org 进行依赖下载
golang.org/x/net/context: golang.org/x/netv0.37.0: Get "https://proxy.golang.org/golang.org/x/net/v/v0.37.0.zip": dial tcp 142.251.215.241:443: connect: connection refused解决方案： 使用国内的 Go 代理，如 goproxy.cn 或 gopro…...
)
鸿蒙 @ohos.arkui.observer (无感监听)
鸿蒙 ohos.arkui.observer (无感监听) 在鸿蒙开发中，ohos.arkui.observer 模块提供了一种强大的无感监听机制，允许开发者监听组件的状态变化、滚动事件、页面切换等事件。这些功能对于实现复杂的交互逻辑和优化性能非常有帮助。本文将详细介绍 ohos.ark…...
一键爬取b站视频
同学们。废话不多说， b站视频素材多， 二次加工就归你， 三话不说爬起来， 犯法违纪咱不干 代码 import json import requests from bs4 import BeautifulSoup import re# 目标网址bvnane"BV1hUQEYCEyY" pp("0&q…...
【含文档+PPT+源码】基于Python的图书管理系统的设计与实现
项目介绍 本课程演示的是一款基于Python的图书管理系统的设计与实现，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 带你从零开始部署运行本套系统 该项目附…...
开源工具利器：Mermaid助力知识图谱可视化与分享
在现代 web 开发中，可视化工具对于展示流程、结构和数据关系至关重要。Mermaid 是一款强大的 JavaScript 工具，它使用基于 Markdown 的语法来呈现可定制的图表、图表和可视化。对于展示流程、结构和数据关系至关重要。通过简单的文本描述，你可…...
Mysql的utf8mb4_general_ci 与 utf8mb4_bin 的具体区别是什么？中文适合哪个？
1. utf8mb4_general_ci vs utf8mb4_bin 的具体区别 utf8mb4_general_ci 和 utf8mb4_bin 都是 utf8mb4 编码的排序规则（collation），它们主要在 排序（ORDER BY） 和 比较（WHERE） 时的行为不同&…...
茂捷M1001电感式编码器芯片TSSOP28管脚，国产电感式编码器IC
简述： M1001 电感式编码器芯片是一款专为高精度位置检测而设计的芯片产品，采用先进的电感技术，能够精确测量旋转物体的位置和角度。芯片具有 SIN/COS、模拟、PWM、SENT、SPI、I2C等多种角度输出功能，具有高分辨率、宽工作温度范围…...
LeetCode-跳跃游戏 II
方法一：反向查找出发位置 我们的目标是到达数组的最后一个位置，因此我们可以考虑最后一步跳跃前所在的位置，该位置通过跳跃能够到达最后一个位置。 如果有多个位置通过跳跃都能够到达最后一个位置，那么我们应该如何进行选择呢&a…...
【后端】【django】Django DRF `@action` 详解：自定义 ViewSet 方法
Django DRF action 详解：自定义 ViewSet 方法 在 Django REST Framework（DRF）中，action 装饰器用于为 ViewSet 添加自定义的 API 端点。相比于 update、create 等默认方法，action 允许我们定义 更加清晰、语义化 的 A…...
数据结构——双向链表dlist
前言：大家好😍，本文主要介绍了数据结构——双向链表dlist 一 双向链表定义 1. 双向链表的节点结构 二 双向链表操作 2.1 定义 2.2 初始化 2.3 插入 2.3.1 头插 2.3.2 尾插 2.3.3 按位置插 2.4 删除 2.4.1 头删 2.4.2 尾删 2.4.3 按…...
IDEA 一键完成：打包 + 推送 + 部署docker镜像
1、本方案要解决场景？ 想直接通过本地 IDEA 将最新的代码部署到远程服务器上。 2、本方案适用于什么样的项目？ 项目是一个 Spring Boot 的 Java 项目。项目用 maven 进行管理。项目的运行基于 docker 容器（即项目将被打成 docker image&am…...
图像分类数据集
《动手学深度学习》-3.5-学习笔记 # 通过ToTensor实例将图像数据从PIL类型变换成32位浮点数格式， # 并除以255使得所有像素的数值均在0～1之间 trans transforms.ToTensor()#用于将图像数据从 PIL 图像格式（Python Imaging Libraryÿ…...
设计模式之美
UML建模 统一建模语言（UML）是用来设计软件的可视化建模语言。它的语言特点是简单 统一 图形化 能表达软件设计中的动态与静态信息。 UML的分类 动态结构图： 类图 对象图 组件图 部署图 动态行为图： 状态图 活动图 时序图 协作…...
2025-03-15 学习记录--C/C++-PTA 练习3-4 统计字符
合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。💪🏻 一、题目描述 ⭐️ 练习3-4 统计字符 本题要求编写程序，输入10个字符，统计其中英文字母、空格或回车、…...
802.11标准
系列文章目录 文章目录 系列文章目录一、相关知识二、使用步骤1.802.11修正比较2.802.11ac 三、杂记 一、相关知识 跳频扩频：射频信号可分为窄带信号和扩频信号。如果射频信号的带宽大于承载数据所需的带宽，该信号就属于扩频信号。跳频扩频(FHSS)是一种…...
母婴商城系统Springboot设计与实现
项目概述 《母婴商城系统Springboot》是一款基于Springboot框架开发的母婴类电商平台，旨在为母婴产品提供高效、便捷的在线购物体验。该系统功能全面，涵盖用户管理、商品分类、商品信息、商品资讯等核心模块，适合母婴电商企业或个人开发者快…...
C#通过API接口返回流式响应内容---分块编码方式
1、背景 上一篇文章《C#通过API接口返回流式响应内容—SSE方式》阐述了通过SSE（Server Send Event）方式，由服务器端推送数据到浏览器。本篇是通过分块编码的方式实现 2、效果 3、具体代码 3.1 API端实现 [HttpGet] public async Task Chu…...
游戏引擎学习第158天
回顾和今天的计划 我们在这里会实时编码一个完整的游戏，没有使用引擎或库，一切都由我们自己做所有的编程工作，游戏中的每一部分，无论需要做什么，我们都亲自实现，并展示如何完成这些任务。今天，…...
如何在电脑上使用 Jupyter Notebook 通过 SSH 远程连接树莓派Zero
有无数种方式通过SSH远程连接树莓派，但对于树莓派Zero 2W这种硬件资源有限的板子，因为内存有限Pycharm干脆不能通过SSH连接树莓派Zero 2W。VScode通过SSH连接时，也会因为资源有限时常断线。因此，我们就要用轻量级的编辑器Jupyter …...
[新能源]新能源汽车快充与慢充说明
接口示意图 慢充接口为交流充电口（七孔），快充接口为直流充电口（九孔）。 引脚说明 上图给的是充电口的引脚图，充电枪的为镜像的。 慢充接口引脚说明 快充接口引脚说明 充电流程 慢充示意图 慢充&…...
《解锁华为黑科技：MindSpore+鸿蒙深度集成奥秘》
在数字化浪潮汹涌澎湃的当下，人工智能与操作系统的融合已成为推动科技发展的核心驱动力。华为作为科技领域的先锋，其AI开发框架MindSpore与鸿蒙系统的深度集成备受瞩目，开启了智能生态的新篇章。 华为MindSpore：AI框架的创新先锋…...
HCIA-ACL
一、基本概念 1、概念：ACL即访问控制列表，是一种基于包过滤的访问控制技术。由一条或多条规则组成的集合，通过定义动作来确保哪些数据包可以通过，哪些需要被阻止。 2、基本原理：ACL 通过规则对数据包分类，…...
深入解析 React 最新特性：革新、应用与最佳实践
深入解析 React 最新特性：革新、应用与最佳实践 1. 引言 React 作为前端开发的核心技术之一，近年来不断推出 新的 API 和优化机制，从 Concurrent Rendering（并发模式） 到 Server Components（服务器组件&a…...
通信协议传输过程中的序列化和反序列化机制
在通信协议的传输过程中，序列化和反序列化是核心机制之一。它们影响数据的传输效率、兼容性和解析速度，特别是在分布式系统、RPC（远程过程调用）、消息队列和微服务架构中至关重要。 1. 什么是序列化和反序列化？ 序列化…...
在IDEA中连接达梦数据库：详细配置指南
达梦数据库（DM Database）作为国产关系型数据库的代表，广泛应用于企业级系统开发。本文将详细介绍如何在IntelliJ IDEA中配置并连接达梦数据库，助力开发者高效完成数据库开发工作。 准备工作 1. 下载达梦JDBC驱动 访问达梦官方资…...
OkHttp 的证书设置
在 Android 开发中，通过 OkHttp 自定义 SSLSocketFactory 和 X509TrustManager 可以有效增强 HTTPS 通信的安全性，防止中间人攻击（如抓包工具 Charles/Fiddler 的拦截）。以下是实现防抓包的关键技术方案： 一、Okhttp设…...
机器视觉工程师如何学习C#通讯
建议大家可以提前测试，真实模拟现场的情况，或者采用虚拟串口，虚拟网口频繁测试通讯的稳定性，以后有现场需要，可以快速布局到现场。 机器视觉工程师学习C#通讯协议需要结合工业场景需求，掌握基础协议原理、常…...
数字电子技术会被淘汰吗？模拟电子技术的未来发展与应用
引言 当今世界正处在数字电子技术飞速发展的时代。自上世纪中叶以来，集成电路中的晶体管数量按照摩尔定律呈指数级增长，计算设备性能大幅提升。一个典型例子是，我们口袋中的智能手机拥有的运算能力远超早期计算机：iPhone 14的处理…...
基于yolov8+streamlit实现目标检测系统带漂亮登录界面
【项目介绍】 基于YOLOv8和Streamlit实现的目标检测系统，结合了YOLOv8先进的目标检测能力与Streamlit快速构建交互式Web应用的优势，为用户提供了一个功能强大且操作简便的目标检测平台。该系统不仅具备高精度的目标检测功能，还拥有一个漂亮且…...