01.react基础 - react应用html页面

pikaqiu_komorebi

已于 2023-02-20 14:25:39 修改

阅读量497

点赞数 1

分类专栏： react学习文章标签：前端学习 react

于 2023-02-20 11:45:42 首次发布

本文链接：https://blog.csdn.net/pikaqiu_komorebi/article/details/129121105

版权

react学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

react应用Html页面

在这里插入图片描述

react优点

1.采用 组件式模式、 声明式编码
（不用事事亲力亲为，提高开发效率和组件复用率） 	    
 声明式编码：个人理解就是数据监听，变化时，react帮你执行
2. react-native 中可使用react语法进行移动端开发
3. 使用虚拟DOM(电脑的内存里) + 优秀的Diffing算法，尽量减少真实DOM 的交互

js 痛点

 1. js 操作DOM(UI)-命令式编程，繁琐效率低 (jq只是让代码量)
 2. 引起浏览器重绘重排
 3. 原生js 没有组件化，复用率低
	html 结构 css 衣服 js 沟通

react 准备-三件套

babel(用于转换) es6转换es5 箭头函数、import等等；jsx=>js
react-development react核心库
react-dom-development react 扩展库

使用方法
1. 构造容器，使用id定义
2. 引入三件套，react相关的资源文件
3. 创建虚拟的DOM
4. 使用ReactDOM.render(‘虚拟DOM’,‘容器’)将结构渲染至页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!--recat 优点  -->
	<!-- 1.采用 组件式模式、 声明式编码（不用事事亲力亲为，提高开发效率和组件复用率-->
	<!-- 声明式编码：个人理解就是数据监听，变化时，react帮你执行 -->
	<!-- 2. react-native 中可使用react语法进行移动端开发 -->
	<!-- 3. 使用虚拟DOM(电脑的内存里) + 优秀的Diffing算法，尽量减少真实DOM 的交互  -->
	<!-- js 痛点 -->
	<!--1. js 操作DOM(UI)-命令式编程，繁琐效率低 (jq只是让代码量)
	    2. 引起浏览器重绘重排
	    3. 原生js 没有组件化，复用率低 -->
	<!-- html 结构 css 衣服 js 沟通-->
	<!-- react 准备 -->
	<!-- babel(用于转换) :es6转换es5 箭头函数、import等等 ；jsx=>js-->
	<!-- react-development react核心库  -->
	<!-- react-dom-development react扩展库  -->

	<!-- 准备好一个“容器” -->
	<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到页面-react里面也有很多操作DOM，不能再引入jq,避免冲突
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>