React基础入门【一】

news2024/10/7 1:32:35

官方文档:https://react.docschina.org/

说明

本文总结自尚硅谷课程。学习本教程之前,最好具备vue的基础知识,明白虚拟DOM、jsx这些前置知识。接下来,我们通过一个简单的示例来展示react的使用。

注意:入门的学习不会使用脚手架,而是使用html非框架写法

入门示例

下面展示一个最简单的react示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</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" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

运行后的页面

引入的js文件作用

使用非框架的形式写react,我们需要引入三个js文件,如上面的示例:

  1. react.js: React核心库。
  2. react-dom.js: 提供操作DOM的React扩展库。
  3. babel.min.js: 解析JSX语法代码转为JS代码的库。

babel.js的作用

  1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
  2. 只要用了JSX,都要加上type=“text/babel” , 声明需要babel来处理

虚拟DOM

react采用虚拟DOM的形式渲染页面

使用JSX创建虚拟DOM

//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>

渲染虚拟DOM(元素)

  1. 语法: ReactDOM.render(virtualDOM, containerDOM)
  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  3. 参数说明
    1. 参数一: 纯js或jsx创建的虚拟dom对象
    2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

注意:react和react-dom的引入顺序不能写错!

创建虚拟DOM的两种方式

纯JS方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_使用js创建虚拟DOM</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(标签名,标签属性,标签内容)
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

注:不用将jsx转为js,所以不需要引入babel

不使用jsx创建项目,明显需要写很多代码,非常麻烦!

JSX方式

JSX方式就是js创建虚拟DOM的语法糖

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_使用jsx创建虚拟DOM</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" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

注:当Vdom的内容是多行时,可以使用()jsx包裹起来,表示一个整体。

虚拟DOM与真实DOM对比

打印输出虚拟DOM和真实DOM进行比较

<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">
      /* 此处一定要写babel */
      //1.创建虚拟DOM
      const VDOM = <h1>Hello,React</h1>; /* 此处一定不要写引号,因为不是字符串 */
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
      const TDOM = document.getElementById("test");
      console.log("虚拟DOM", VDOM);
      console.info("真实DOM", TDOM);
    </script>
  </body>

console.log(“虚拟DOM”, VDOM);

看看真实DOM身上有哪些属性

  1. 虚拟DOM本质是Object类型的对象(一般对象)
  2. 虚拟DOM比较 “”,真实DOM比较 “”,因为虚拟DOMReact内部在用,无需真实DOM上那么多的属性
  3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

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

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

相关文章

【Atlas 200】华为昇腾Atlas 200加速模块RC场景无法启动卡在Start to jump Linux kernel

问题现象 RC场景下&#xff0c;装有华为昇腾Atlas 200加速模块的开发板无法启动系统。 将制作好系统的SD卡插入开发板&#xff0c;0号串口输出的日志卡在Start to jump Linux kernel&#xff0c;之后没有更多输出。 可能原因 一种比较大的可能是——在制作系统时&#xff0c…

Mac终端代理

1.打开代理查看代理端口号 打开设置&#xff0c;点击网络&#xff0c;点击详细信息&#xff0c;点击代理查看代理端口号。 2.修改环境变量 1&#xff09;终端输入下面命令 vim .zshrc 2&#xff09;在.zshrc文件里添加下面两段内容&#xff08;注意&#xff1a;7980为端口号…

力扣206反转链表:代码实现+图文全解+方法总结(四种方法)

文章目录 第一部分&#xff1a;题目描述第二部分&#xff1a;题解2.1 方法一&#xff1a;生成新节点到新链表2.2 方法二&#xff1a;复用旧节点到新链表&#x1f340; 面向过程式思想方法&#x1f340; 面向对象式思想方法 2.3 方法三&#xff1a;递归2.4 旧链表中移动旧节点 第…

02:MYSQL---DML

目录 1:介绍 2:DML数据操作 1:介绍 DML英文全称是Data Manipulation Lanquage(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增删改操作。 添加数据 :insert 修改数据:update 删除数据:delete 2:DML数据操作 给指定字段添加数据 insert into 表名(字段名1,…

segment-anything本地部署使用

前言 Segment Anything Model&#xff08;SAM&#xff09;是一种先进的图像分割模型&#xff0c;它基于Facebook AI在2020年发布的Foundation Model3&#xff0c;能够根据简单的输入提示&#xff08;如点或框&#xff09;准确地分割图像中的任何对象&#xff0c;并且无需额外训…

将项目导入到github全过程

新建仓库 完善仓库信息 然后点击创建仓库 复制仓库地址 将文件上传到git上 我这里要上传IMProject文件夹&#xff0c;所以就在这个文件夹内部&#xff0c;右键鼠标&#xff0c;然后点击git bash here 输入git init &#xff0c;然后文件夹里面就会多一个.git文件 输入gi…

【IoT】ChatGPT 与 AI 硬件

随着AI的发展&#xff0c;比如最近炒得很火的ChatGPT&#xff0c;还在持续快速迭代更新。 当然了&#xff0c;对于软件和算法&#xff0c;如果你想&#xff0c;每天迭代 10 个版本都可以。 包括科大讯飞的星火认知大模型最近也刚发布。 这就引出了未来一个更大的发展方向&am…

PMP课堂模拟题目及解析(第7期)

61. 为限制项目变更的数量&#xff0c;项目经理制定了严格的变更管理计划&#xff0c;只允许批准减轻重大潜在或实际风险的变更&#xff0c;一位团队成员提出了一个范围变更&#xff0c;该变更将消除对一个落后于进度计划的外部项目的依赖关系。项目经理应该怎么做&#xff1f…

AI绘图实战(九):给热门歌曲做配图 | Stable Diffusion成为设计师生产力工具

S&#xff1a;AI能取代设计师么&#xff1f; I &#xff1a;至少在设计行业&#xff0c;目前AI扮演的主要角色还是超级工具&#xff0c;要顶替&#xff1f;除非甲方对设计效果无所畏惧~~ 预先学习&#xff1a; 安装及其问题解决参考&#xff1a;《Windows安装Stable Diffusion …

迎接新时代挑战:项目管理中的创新与发展

你想知道如何在你的 PM 角色中保持最新状态吗&#xff1f; 您所在的行业是否发展如此之快&#xff0c;以至于有一天您可能不再需要您&#xff1f; 随着人工智能、敏捷和授权团队的兴起&#xff0c;项目经理还需要吗&#xff1f;也许吧&#xff0c;但不是出于您可能期望的原因。…

@vant/weapp

文章目录 一、介绍二、安装1. cd 到项目文件目录2. 使用 npm 安装3. 修改项目配置4. 构建5. 其他文件 三、使用四、【参考】 微信小程序使用vant/weapp组件 一、介绍 Vant 是一个开源的移动端组件库&#xff0c;在微信小程序开发中可以使用该UI库提提供的组件。 使用这个三方…

用户分享 | Dockquery,一个国产数据库客户端的初体验

DockQuery 有话说 DockQuery &#xff0c;「天狼」也&#xff0c;中原本土狼种。天狼年纪很小&#xff0c;不满一岁&#xff0c;但它有一个伟大的梦想——建造一座能容纳中原群狼的宫殿&#xff01;它不想再被异域狼欺负&#xff0c;不想被异域狼群挤占生存空间&#xff0c;它…

点到直线距离估计线性回归参数

点到直线距离估计线性回归参数 文章目录 点到直线距离估计线性回归参数[toc]1 推导2 模拟 1 推导 普通最小二乘法(OLS)估计线性回归方程的参数要求残差平方和最小&#xff0c;通过优化方法计算出各参数的估计量。其中残差 e i y i − β 0 − β 1 x i e_iy_i-\beta_0-\beta…

docker安装Nexus3搭建docker私有仓库,并上传镜像

参考&#xff1a;https://blog.csdn.net/gengkui9897/article/details/127353727 nexus3支持的私有库 支持maven(java)、npm&#xff08;js&#xff09;、docker、herm、yum、apt、pypi(python)go、等等 1. 下载安装docker&#xff08;略&#xff09; 根据系统选择对应版本…

T-SQL游标的使用

一.建表 INSERT INTO cloud VALUES( 你 ) INSERT INTO cloud VALUES( 一会看我 ) INSERT INTO cloud VALUES( 一会看云 ) INSERT INTO cloud VALUES( 我觉得 ) INSERT INTO cloud VALUES( 你看我时很远 ) INSERT INTO cloud VALUES( 你看云时很近 ) 二.建立游标 1.游标的一般格…

微软Office Plus吊打WPS Office?不一定,WPS未来被它“拿捏”了

微软Office Plus吊打WPS Office&#xff1f; 微软的Office是一款非常强大的软件。不仅仅在办公领域中能给我们带来便利&#xff0c;在娱乐和生活的各个方面的管理也能带来很多便利。 当然&#xff0c;作为国产办公软件的排头兵WPS与微软Office的抗衡已经有长达30多年&#xf…

数据库sql语句(经典)

例题&#xff1a; 先来讲讲not in 和not exists的区别&#xff0c;再开始今天的例题&#xff08;和in&#xff0c;exists相反&#xff09; not in内外表做笛卡尔积&#xff0c;然后按照条件查询&#xff0c;没有用到索引 not exists是对外表进行循环&#xff0c;每次循环再对内…

从中国制造到中国智造,大眼橙投影仪的进阶之路

刚过去的5月10日是中国品牌日&#xff0c;在这一天各级电视台、广播电台以及平面、网络等媒体&#xff0c;都会安排重要版面来讲中国品牌故事。近日&#xff0c;笔者在与一些品牌的接触中&#xff0c;对大眼橙这个品牌印象颇深&#xff0c;大眼橙是智能投影行业的头部品牌&…

详解:函数栈帧的创建与销毁

函数栈帧的创建与销毁 前期问题函数栈帧定义寄存器的种类与功能汇编指令的功能及含义图解main函数之前的调用调用main函数开辟函数栈帧main函数中创建临时变量并初始化为形式参数创建开辟空间Add函数开辟函数栈帧&#xff0c;创建变量并进行运算释放Add函数栈帧 前期问题解答 铁…

STM32F4的输出比较极性和PWM1,PWM2的关系

PWM 输出比较通道 在这里以通用定时器的通道1作为介绍。 如图&#xff0c;左边就是CNT计数器和CCR1第一路的捕获/比较寄存器&#xff0c;它俩进行比较&#xff0c;当CNT>CCR1, 或者CNTCCR1时&#xff0c;就会给输出模式控制器传送一个信号&#xff0c;然后输出模式控制器就…