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

react应用Html页面

01.react基础 - react应用html页面_第1张图片

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>

你可能感兴趣的:(react学习,前端,学习,react)