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

[尚硅谷React笔记]——第1章 React简介

news 文章来源：https://blog.csdn.net/qq_56444564/article/details/132942856 2025/2/8 20:53:06

目录：

 第1章 React简介

  • React的基本使用:
  • 虚拟DOM的两种创建方式：
    • 使用jsx创建虚拟DOM
    • 使用js创建虚拟DOM(一般不用)
    • 虚拟DOM与真实DOM:
  • React JSX:
  • JSX练习：
  • 模块与组件、模块化与组件化的理解
    • 模块
    • 组件
    • 模块化
    • 组件化

 

 第1章 React简介

  • 中文官网: https://react.docschina.org/

React的基本使用:

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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">//1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1>//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

运行结果：

虚拟DOM的两种创建方式：

  • 使用jsx创建虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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">//1.创建虚拟DOM// const VDOM = <h1 id="title">Hello,React</h1>const VDOM = <h1 id="title"><span>Hello,React</span></h1>//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

  • 使用js创建虚拟DOM(一般不用)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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><script type="text/javascript">//1.创建虚拟DOM// const VDOM = React.createElement('h1', {id: 'title'}, 'Hello,React')const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
  • 虚拟DOM与真实DOM:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>
<div id="demo"></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">//1.创建虚拟DOMconst VDOM = (<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))const TDOM = document.getElementById('demo')console.log('虚拟DOM', VDOM)console.log('真实DOM', TDOM)debugger// console.log(typeof VDOM)// console.log(VDOM instanceof Object)
</script>
</body>
</html>

React JSX:

  • 全称:  JavaScript XML
  • react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
  • 作用: 用来简化创建虚拟DOM
    • 写法：var ele = <h1>Hello JSX!</h1>
    • 注意1：它不是字符串, 也不是HTML/XML标签
    • 注意2：它最终产生的就是一个JS对象
  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则
    • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    • 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  • babel.js的作用
    • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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.toLowerCase()}</span></h2><input type="text"></input></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))// jsx语法规则:// 1.定义虚拟DOM时,不要写引号。// 2.标等中混入Js表达式时要用// 3.样式的类名指定不要用class，要用className.// 4.内联样式，要用style={{key : value}}的形式去写。// 5.只有一个根标签// 6.标签必须闭合// 7.标签首字母// (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。// (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。</script>
</body>
</html>

JSX练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</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 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>

运行结果：

模块与组件、模块化与组件化的理解

模块

  1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
  2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
  3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  2. 为什么要用组件： 一个界面的功能更复杂
  3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

  • 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

  • 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

相关文章：

[尚硅谷React笔记]——第1章 React简介

目录&#xff1a; 第1章 React简介 React的基本使用:虚拟DOM的两种创建方式&#xff1a; 使用jsx创建虚拟DOM使用js创建虚拟DOM(一般不用)虚拟DOM与真实DOM:React JSX:JSX练习&#xff1a;模块与组件、模块化与组件化的理解 模块组件模块化组件化 第1章 React简介 中文官网: …...

编程日记 2023/9/25 4:51:27

Debezium系列之：快照参数详解

Debezium系列之：快照参数详解 一、snapshot.select.statement.overrides二、min.row.count.to.stream.results三、snapshot.delay.ms四、snapshot.fetch.size五、snapshot.lock.timeout.ms六、incremental.snapshot.allow.schema.changes七、incremental.snapshot.chunk.size八…...

编程日记 2023/9/25 4:49:25

redis单机版搭建

title: “Redis单机版搭建” createTime: 2022-01-04T20:43:1108:00 updateTime: 2022-01-04T20:43:1108:00 draft: false author: “name” tags: [“redis”] categories: [“install”] description: “测试的” redis单机版搭建 安装环境 redis版本redis-5.0.7虚拟机系统…...

编程日记 2023/9/25 4:45:22

物联网边缘网关

物联网边缘网关 边缘网关的定义边缘网关的分类边缘计算网关平台相关产品有哪些 百度边缘计算平台（BIE）华为边缘计算平台（IEF）产品应用拓扑图产品价格区间...

编程日记 2023/9/25 4:43:19

docker部署springboot程序时遇到的network问题

对应问题&#xff0c;因为刚开始接触docker&#xff0c;所以问题可能比较简单&#xff0c;但是做个记录 1、启动一个springboot项目获取本地ip的时候获取到的是172.17.0.x这个ip&#xff1b;在使用一些注册中心&#xff0c;mq的时候又要表明自己的本机器ip的时候会比较头疼&…...

编程日记 2023/9/25 4:42:18

RASP hook插桩原理解析

javaagent技术&#xff0c;实现提前加载类字节码实现hook&#xff0c;插桩技术 javassist技术ASM字节码技术 像加载jar&#xff0c;有两种方式 premain启动前加载&#xff1a;每次变动jar包内容&#xff0c;都需要进行重启服务器利用java的动态attch加载原理&#xff0c;采用pr…...

编程日记 2023/9/25 4:39:15

Pygame中Sprite的使用方法6-5

3 碰撞检测 蓝色方块会随着鼠标移动&#xff0c;当碰到绿色方块时&#xff0c;则当前分数加1&#xff0c;当碰到红色方块时&#xff0c;当前分数减1。因为要随时进行碰撞检测&#xff0c;因此需要在while True循环中实现以下功能。 3.1 蓝色方块随鼠标移动 将蓝色方块的位置…...

编程日记 2023/9/25 4:36:13

浅谈为什么多态只能是指针或引用

其实在很早之前&#xff0c;我一直没有注意到这个问题&#xff0c;直到今天碰见了一道题&#xff0c;顺便前面的博客中&#xff0c;继承写到&#xff0c;子类中不包含父类&#xff0c;子类只是继承了父类的成员变量和函数&#xff0c;由这一点&#xff0c;引发了我对切片以及赋…...

编程日记 2023/9/25 4:35:12

js看代码说输出

目录 原型 Function与Object new fn() 原型链 constructor function.length 默认参数:第一个具有默认值之前的参数个数 剩余参数&#xff1a;不算进length 闭包 循环中 函数工厂&#xff1a;形参传递 IIFE&#xff1a;匿名闭包 let&#xff1a;闭包 forEach()&am…...

编程日记 2023/9/25 4:34:11

Java笔记：使用javassist修改class文件内方法

1.前言 在工作突然有一个需求。线上运维的一个tomcat的web项目&#xff0c;运行的程序不正常。需要修改代码。可是这个项目代码非常的老&#xff0c;并且公司存储的源代码跟线上的不一致。 我了个擦&#xff0c;没有源代码但是还要结局客户的问题。只能到线上将对应程序的clas…...

编程日记 2023/9/25 4:30:06

华为云云耀云服务器L实例评测 ｜云服务器性能评测

通过上一篇文章华为云云耀云服务器 L 实例评测 &#xff5c;云服务器选购&#xff0c;我已经购买了一台 Centos 系统的云耀云服务器 L 实例。 在获得云耀云服务器 L 实例后&#xff0c;首要任务是熟悉云耀云服务器 L 实例的性能&#xff0c;对云耀云服务器 L 实例的性能进行测…...

编程日记 2023/9/25 4:28:05

iphone的safari浏览器实现全屏的pwa模式，并修改顶部状态栏背景颜色

要想修改顶部背景颜色&#xff0c;需要用到这个属性&#xff1a;content就是你要设置的颜色 <!-- 状态栏的背景色 --><meta name"theme-color" content"#f8f8f8" /> 然后再加上下面的设置&#xff1a; <!-- 网站开启对 web app 程序的支持…...

编程日记 2023/9/25 4:27:04

springboot对接rabbitmq并且实现动态创建队列和消费

背景 1、对接多个节点上的MQ&#xff08;如master-MQ&#xff0c;slave-MQ&#xff09;&#xff0c;若读者需要自己模拟出两个MQ&#xff0c;可以部署多个VM然后参考 docker 安装rabbitmq_Steven-Russell的博客-CSDN博客 2、队列名称不是固定的&#xff0c;需要接受外部参数&…...

编程日记 2023/9/25 4:26:03

Spring的后处理器-BeanFactoryPostprocessor

目录 Spring后处理器 Bean工厂后处理器-BeanFactoryPostProcessor 修改beanDefinition对象 添加beanDefiniton对象 方法一 方法二 自定义Component Spring后处理器 Spring后处理器是Spring对外开放的重要拓展点&#xff08;让我们可以用添加自己的逻辑&#xff09;&…...

编程日记 2023/9/25 4:21:59

Flutter 必备知识点

Flutter 升级 确保在项目根目录下&#xff08;含有 pubspec.yaml 的文件夹&#xff09; 在命令行中输入命令&#xff1a; flutter channel输出&#xff1a; Flutter channels: * mastermainbetastable这个可以在 pubspec.yaml 中查看&#xff1a; 切换分支也很简单&#xf…...

编程日记 2023/9/25 4:20:58

什么是FMEA（失效模式和影响分析）？

失效模式和影响分析&#xff08;FMEA&#xff09;是一个在开发阶段&#xff0c;用于确定产品或流程可能的风险和失败点的有条理的过程。FMEA团队会研究失效模式&#xff0c;也就是产品或流程中可能出错的地方&#xff0c;以及这些失效可能带来的影响&#xff08;如风险、损害、…...

编程日记 2023/9/25 4:19:57

Redis面试题(三)

文章目录 前言一、怎么理解 Redis 事务&#xff1f;二、Redis 事务相关的命令有哪几个&#xff1f;三、Redis key 的过期时间和永久有效分别怎么设置&#xff1f;四、Redis 如何做内存优化&#xff1f;五、Redis 回收进程如何工作的&#xff1f;六、 加锁机制总结 前言 怎么理…...

编程日记 2023/9/25 4:17:55

Python错误处理指南：优雅应对异常情况

目录 一. 异常是什么&#xff1f;二. 使用 try 和 except三. 捕获多个异常四. 使用 else五. 使用 finally六. 自定义异常七.Python中常见异常处理类型八.Python中常见异常处理实例九.异常处理最佳实践十.结论 当编写Python代码时&#xff0c;错误处理是一个重要的方面&#xff…...

编程日记 2023/9/25 4:15:54

MySQL学习笔记12

MySQL 查询语句&#xff1a; 1、查询五子句&#xff1a;&#xff08;重点&#xff09; mysql> select */字段列表 from 数据表名称 where 子句 group by 子句 having 子句 order by 子句 limit 子句; 1&#xff09;where 子句&#xff1b;条件筛选。 2&#xff09;group…...

编程日记 2023/9/25 4:14:52

【owt】构建m79的owt-client-native：使用vs2017

家里电脑换成了台式机，拷贝代码发现了三年前的owt客户端mfc工程。 不用下载第三方库，试着构建下： owt-client-native 我这里有3年前的代码，思索了下还是用vs2017构建吧： 重新构建一下 选用x86 的 vs2017 vs的命令行控制台 cls可以清理屏幕 之前构建过vs2022的webrtc原版 …...

编程日记 2023/9/25 4:12:51

Cpp/Qt-day020918Qt

目录 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两…...

编程日记 2023/9/25 4:11:50

Spring面试题10：Spring的XMLBeanFactory怎么使用

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：Spring的XMLBeanFactory怎么使用 XmlBeanFactory是Spring框架中的一个实现类，它是BeanFactory接口的一个具体实现。XmlBeanFactory的主要作用是通…...

编程日记 2023/9/25 4:09:48

自定义数据类型

前言&#xff1a;小伙伴们又见面啦&#xff0c;今天这篇文章&#xff0c;我们来谈谈几种自定义数据类型。 目录 一.都有哪些自定义数据类型 二.结构体 结构体内存对齐 1.如何对齐 2.为什么要对齐 3.节省空间和提升效率的方法 &#xff08;1&#xff09;让占用空间小的成员…...

编程日记 2023/9/25 4:07:45

产品团队的需求验证和确认

需求核实过程是确保软件满足特定的规格要求&#xff0c;而验证则侧重于软件是否达到了最终用户的期望和需求。 如果你正在开发一种医疗产品&#xff0c;这种区别也可能在法规和标准中有所体现&#xff0c;例如&#xff1a; 820.30(f)&#xff1a;设计验证应确认设计的成果符合…...

编程日记 2023/9/25 4:05:43

【JVM】类加载的过程

文章目录 类的生命周期加载验证准备解析初始化简要概括 类的生命周期 一个类型从被加载到虚拟机内存中开始&#xff0c;到卸载出内存为止&#xff0c;它的整个生命周期将会经历加载 &#xff08;Loading&#xff09;、验证&#xff08;Verification&#xff09;、准备&#xf…...

编程日记 2023/9/25 4:00:38

Golang 结构化日志包 log/slog 详解（四）：分组、上下文和属性值类型

上一篇文章讲解了 log/slog 包中的自定义日志属性字段和日志级别&#xff0c;本文讲解下分组、上下文和属性值类型 分组输出 slog 支持将字段放在组中并且可以给分组指定名称。如何展示分组的内容&#xff0c;取决于使用的 handler&#xff0c;例如 TextHandler 使用点号分隔…...

编程日记 2023/9/25 3:59:37

小白学Python：提取Word中的所有图片，只需要1行代码

#python# 大家好&#xff0c;这里是程序员晚枫&#xff0c;全网同名。 最近在小破站账号&#xff1a;Python自动化办公社区更新一套课程&#xff1a;给小白的《50讲Python自动化办公》 在课程群里&#xff0c;看到学员自己开发了一个功能&#xff1a;从word里提取图片。这个…...

编程日记 2023/9/25 3:58:36

pip修改位于用户目录下的缓存目录

默认 pip 缓存目录&#xff1a; Windows: C:\Users\${用户名}\AppData\Local\pip\cache Linux: ~/.cache/pip 一、修改方式 1.命令方式 pip config set global.cache-dir "D:\kwok\data\pip-cache" 2.配置文件方式 ① Windows&#xff1a; C:\Users\${用…...

编程日记 2023/9/25 3:57:35

更新、修改

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 语法: update 表名 列名该列新值, 列名该列新值, ... where 记录匹配条件; 说明&#xff1a;update 更新、修改 set 设置 …...

编程日记 2023/9/25 3:53:32

山西电力市场日前价格预测【2023-09-25】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-09-25&#xff09;山西电力市场全天平均日前电价为442.30元/MWh。其中&#xff0c;最高日前电价为720.46元/MWh&#xff0c;预计出现在19: 00。最低日前电价为276.06元/MWh&#xff0c;预计…...

编程日记 2023/9/25 3:50:30

政府网站后台/长沙网站制作推广

编辑插件 sublime自带的markdown语法高亮并不是很友好,推荐安装Markdown Editing,github主页然后在视图->语法里选择MarkdownEditing启用,支持三种风格,分别是Standard Markdown, GitHub flavored Markdown, MultiMarkdown. 在首选项->Package Setting->Markdown Edi…...

编程日记 2025/2/8 18:24:58

2021中国企业500强/杭州seo

按照网上的方法能够实现连接数据库&#xff0c;方法如下&#xff1a;(网址为http://jingyan.baidu.com/article/86112f135e624a2736978755.html?qq-pf-topcqq.c2c)&#xff0c;问怎样查询一个建好的数据库&#xff1f;(希望...按照网上的方法能够实现连接数据库&#xff0c;方…...

编程日记 2025/2/8 10:54:23

wordpress 主题结构/seo优化网络

package mainimport "fmt"/** 切片的操作*/ func main() {func4() }/** 数组切片可以基于一个已存在的数组创建&#xff0c;数组切片可以值使用数组的一部分元素或者整个数组来创建&#xff0c;甚至可以创建一个比所基于的数组还要打的数组切片*/ func func1() {arra…...

编程日记 2025/2/8 9:39:18

武汉网站设计师培训学校/淘宝运营培训班

计算机软硬件实训报告汇编新疆大学实习(实训)报告实习(实训)名称&#xff1a; 计算机软硬件工程实践学 院&#xff1a; 电气工程学院专 业、 班 级&#xff1a; 电气15-3指 导 教 师&#xff1a; 蔺红 娄毅报 告 人&#xff1a; 赵泽明学 号&#xff1a; 20152101202时 间&…...

编程日记 2025/2/8 8:37:48

优质做网站公司/bt磁力搜索引擎

在bitbucket上使用https协议&#xff0c;经常会在提交代码的时候出错&#xff0c;让人很着急上火&#xff0c;但是用ssh就要方便很多。下面介绍一下设置ssh的方法&#xff1a;1.在终端中运行ssh-keygen。2.然后一路enter&#xff0c;直接到结束。不要理会中间的输入。3 打开用户…...

编程日记 2025/2/8 7:39:58

如何做自己网站/关键词排名优化顾问

https://blog.csdn.net/weixin_42642341/article/details/84585253 thrift : 是Facebook公布的一款开源跨语言的RPC框架....

编程日记 2025/2/8 7:10:54