React 入门学习——第一天（React 简介、虚拟 DOM 的两种创建方式、jsx 语法规则、模块与组件、模块化与组件化的理解、react 中定义组件）

最新推荐文章于 2023-08-29 21:31:19 发布
最新推荐文章于 2023-08-29 21:31:19 发布
阅读量206 收藏
点赞数
分类专栏： # React 入门学习 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WXY19990803/article/details/114372106
版权

目录
1. React 简介
2. 虚拟 DOM 的两种创建方式
3. jsx 语法规则
4. 模块与组件、模块化与组件化的理解
5. react 中定义组件

知识一：React 简介
  • React是一个简单的javascript UI库，用于构建高效、快速的用户界面
  • React 的特点：
1采用组件化模式、声明式编码，提高开发效率及组件复用率
2在 React Native 中可以使用 React 语法进行移动端的开发
3使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互
  • 创建 react 项目需要引入4个 js 文件（网上可下载），初学引入 3 个
<!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" > /* 之前学js时 type 可不写，但是此处一定要写babel， 不写的话默认是 js */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

知识二：虚拟 DOM 的两种创建方式


第一点：使用 jsx 创建虚拟 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 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

第二点：使用 js 创建虚拟 DOM

  • 此时不需要引入 babel.min.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>
	
	<!-- 注意此处的 type 的不同-->
	<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>

第三点：虚拟 DOM 与真实 DOM

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3_虚拟DOM与真实DOM</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" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const 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);
		/* 
				关于虚拟DOM：
					1.本质是Object类型的对象（一般对象）
					2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
					3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
		 */
	</script>
</body>
</html>

知识三：jsx 语法规则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx语法规则</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.创建虚拟DOM
		const 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"/>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

		/* 
				jsx语法规则：
						1.定义虚拟DOM时，不要写引号。
						2.标签中混入JS表达式时要用{}。
						3.样式的类名指定不要用class，要用className。
						4.内联样式，要用style={{key:value}}的形式去写。且要采取小驼峰方式写属性名，不带 -
						5.只有一个根标签，多标签可以用一个 div 包含
						6.标签必须闭合，比如 input 标签要自结束
						7.标签首字母
								(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
								(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

		 */
	</script>
</body>
</html>
  • 一个小练习：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</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" >
		/* 
			一定注意区分：【js语句(代码)】与【js表达式】
					1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
								下面这些都是表达式：
										(1). a
										(2). a+b
										(3). demo(1)
										(4). arr.map() 
										(5). function test () {}
					2.语句(代码)：
								下面这些都是语句(代码)：
										(1).if(){}
										(2).for(){}
										(3).switch(){case:xxxx}
		
	 */
		//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const 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>

知识四：模块与组件、模块化与组件化的理解

  • 模块：向外提供特定功能的js程序, 一般就是一个js文件，目的是为了复用js, 简化js的编写, 提高js运行效率
  • 组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，目的是为了复用编码, 简化项目编码, 提高运行效率
  • 模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
  • 组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

知识五：react 中定义组件

第一点：函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_函数式组件</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.创建函数式组件
		function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>
</body>
</html>

第二点：类式组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</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.创建类式组件
		class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>
</body>
</html>
点击回到顶部
please tell me
关注
专栏目录
React中组件和模块，模块化和组件化的理解
Haines
04-22 395
模块 理解：向外提供特定功能的js程序，一般一个模块是一个js文件 为什么要拆分：业务逐渐复杂的时候，代码不好维护 好处：易于维护、提高复用性 组件 组件其实要比模块高一个层级，或则说模块其实是组件的子集。 理解：用来实现局部效果功能的代码和资源的集合（html/css/js/img等） 为什么？业务逐渐复杂的时候，代码不好维护 好处：易于维护、提高复用性 模块化 当一个应用的js都是使用模块来编写的，这个应用就是模块化应用。 组件化 当一个应用都是使用组件化来编写的，这个应用就是组件化
【React】归纳篇（三）模块与组件以及模块化与组件化-概念与基本使用
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-05 1522
慨念 模块：向外提供特定功能的JS文件，便于复用JS，简化JS，提升JS效率 数据、对数据的操作（函数）、将想暴露的私有的函数向外暴露（暴露的数据类型是对象） 模块化：形容项目编码方式，即按模块编写与组织的项目。 组件：用来实现特定布局功能效果的代码与资源集合，包含html、css、js、图片资源等，例如一个页面中头部区域的资源集合 组件化：形容项目的编码方式，即按组件方式编写实现的项...
React@17.0.2上手、事件、ref应用、状态以及列表渲染
你华还是你华
03-03 1492
React是一个由Facebook开发和维护的JavaScript库，它最初是为了解决Facebook内部开发Instagram网站时遇到的前端性能问题而诞生的。自2013年首次发布以来，React迅速成为前端开发的热门选择，广泛应用于单页应用（SPA）和移动应用的开发中。
react-router与react、react-dom的版本问题
xiaocuizao的博客
09-16 4887
react-router@3.0.0版本对应的react,react-dom的版本为15.3.0 react-router-dom 的版本对应的react 、react-dom是最新版本16.9.0
React学习笔记-模板、ReactDOM.render()、JSX语法
期待一个富婆
12-11 1万+
React 起源于 Facebook 的内部项目，他从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。
React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
qq_48617322的博客
12-09 902
React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
React | 初学react（JSX创建虚拟DOM、创建组件的两种方法）
m0_72383454的博客
10-29 849
初学react（JSX创建虚拟DOM、创建组件的两种方法）
React全家桶： React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
qq_50892584的博客
05-18 406
React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
【React】入门概述 - 虚拟DOM与原生DOM - JSX语法 - React基本使用
YK菌的博客
06-04 2958
从今天起，YK菌要开始学习React了 官方文档https://react.docschina.org/ 为什么要学React
React学习第二天（创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径）
周琛的点滴记录~
05-12 715
React学习第二天 React学习第二天 创建组件的方式（ function 和 class） ES6 扩展运算符使用 抽离 jsx 组件 如何省略 jsx 后缀名？ 使用@别名表示路径 两种创建组件方式的对比 评论列表案例 没有收拾残局的能力，就别放纵善变的情绪！！！ 创建组件 第一种创建组件的方式 //第一步：导入包 import React from 'react' //创建组件，虚拟...
React【React是什么？、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)
08-29 964
React【React是什么？、创建项目 、React组件化、JSX语法、条件渲染、列表渲染、事件处理】(一)
【React 框架】简介 / 入门案例 / 虚拟DOM / 真实DOM
qq_30148319的博客
06-07 678
（1）原生 JavaScript 操作 DOM 繁琐、效率低（ DOM-API 操作 UI ）。 （2）使用 JavaScript 直接操作 DOM，浏览器会进行大量的重绘重排。 （3）原生 JavaScript 没有组件化（ html / css / js ）编码方案，代码复用率低。 （1）采用组件化模式、声明式编码，提高开发效率及组件复...
【React】1、React入门与概览（JSX语法）
Coding and studying
05-21 1023
React入门 文章目录React入门一、React全家桶1. React是什么?2. 谁开发的?3. 为什么要学?4. React的特点5. 学习React之前要掌握的JavaScript基础知识二、React 概览组件JSXVirtual DOM关于虚拟DOM：Data Flow三、React基本使用相关js库四、React JSXJSX 语法规则五、模块与组件、模块化与组件化的理解5.1 模块5.2 组件5.4 模块化5.5 组件化 一、React全家桶 React基础 React-Router(R
构建 react应用程序 （二）（react-scripts实现原理）
热门推荐
飞天代码的博客
07-09 1万+
在前面讲到了使用create-react-app来创建项目，这节我们来分析下原理。 react-scripts有以下支持，都帮你配置好了：React, JSX, ES6, and Flow syntax support. Language extras beyond ES6 like the object spread operator. Import CSS and image files di
2019年计算机应用基础统考题库 网考计算机应用基础真题7.pdf
10-06
计算机试题试卷课件
MATLAB使用蚁群算法优化的BP神经网络（ACO-BP）进行多变量时间序列预测（包含详细的完整的程序和数据）
10-06
内容概要：本文详述了如何利用MATLAB实现蚁群算法优化的BP神经网络(ACO-BP)，并通过实例演示这种优化方法如何应用于带有天气因子影响的发电量多变量时间序列预测任务上。介绍了ACO-BP的基础概念、算法实施过程以及代码实现，并通过计算均方根误差（RMSE）和平均绝对误差（MAE）验证优化模型的有效性和预测精准度。 适用人群：电气工程相关专业的学生，专注于数据分析与预测的专业人士。 使用场景及目标：适用于电力系统发电量预测的需求，尤其是需要考虑到气象参数变化对于发电产能的具体影响的情境下，用于提高模型预测准确性。 其他说明：提供的详细数据和源码有助于深入理解和实作优化BP网络解决多变数预测挑战，提升预测精度，为相关领域的科研工作者提供了一套完整的实验研究路径和理论参考文献清单。
Android大作业-仿知乎日报.zip
10-06
Android大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报.zipAndroid大作业——仿知乎日报
这个教程将帮助您了解Nginx的基本概念、安装方法以及如何配置它来处理常见的Web服务器任务 Nginx以其高性能和稳定性而闻名
最新发布
10-06
内容概要：本文介绍了Nginx的基本概念及其安装方法，指导了如何配置Nginx的基本参数、搭建反向代理以及如何执行负载平衡的操作流程，同时分享了一些常见的性能优化手段以及增强Nginx安全性的策略。并且提供了丰富的进阶资源，让使用者能够在实际操作过程中不断进步，满足对提高系统性能的要求。 适用人群：适合刚开始接触网络服务管理的学习者或者是正在寻找提升web服务器效率的管理员。 使用场景及目标：适用于搭建HTTP服务器或是邮件服务器的场景，主要目的是掌握Nginx的基本配置、管理和调优，确保高效、稳定地提供互联网内容和服务，同时增强系统的安全性保障。 阅读建议：新手可以从简单的安装入手再逐步增加复杂的配置项以验证效果；对于想深入了解的同学，则可以通过官方文档或者其他渠道继续深挖更多的功能和技术细节。
React-Native学习笔记：组件与JSX语法解析
React是一种用于构建用户界面的JavaScript库，它的核心理念是组件化。以下是一些关键知识点： **1. ReactDOM.render()** ReactDOM.render()函数是React的核心，它接收两个参数：一个React元素和一个DOM元素，将...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值