后端程序员React初接触1

后端程序员React初接触

学习react基础与相关库的使用学习包括react基础路由组件库等等

react是用于构建用户界面的JavaScript库

发送请求获取数据
处理数据
操作dom呈现页面（react帮忙操作dom）

数据渲染为视图有facebook打造并开源

解决的问题

dom操作繁琐
使用js直接操作dom浏览器会大量操作dom进行重排
没有组件化编码方案代码复用率低
可以进行移动端的开发

特点：使用虚拟dom+优秀的diffing算法

使用非脚手架的形式

babel.js作用js转jsx
react.development.js 核心库
react-dom.development.js拓展库

引用时存在顺序先使用核心库在使用拓展库

搭建初始结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--准备好一个容器--><div id="app"></div><!-- 引入核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 映入拓展库 --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 映入babel用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 表示写的是jsx此处写的是babel --><script type="text/babel"></script>
</body>
</html>

案例实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--准备好一个容器--><div id="app"></div><!-- 引入核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 映入拓展库 --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 映入babel用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 表示写的是jsx此处写的是babel --><script type="text/babel">//创建虚拟domconst VDOM = <h1>Hello,React</h1> /*此处一定不要写引号，因为不是字符串*/// 渲染dom到页面ReactDOM.render(VDOM,document.getElementById('app'))</script>
</body>
</html>

在这里插入图片描述

使用js创建虚拟dom

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用js方式创建虚拟dom</title>
</head>
<body><!--准备好一个容器--><div id="app"></div><!-- 引入核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 映入拓展库 --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 表示写的是jsx此处写的是babel --><script type="text/javascript">//创建虚拟domconst VDOM =React.createElement('h1',{id:'title'},'Hello,React1')// 渲染dom到页面ReactDOM.render(VDOM,document.getElementById('app'))</script>
</body>
</html>