React简介
1.react是什么？
React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。
2.为什么学
- 原生JS操作DOM繁琐，效率低
- 使用JS直接操作DOM,浏览器会进行大量的重绘重排
- 原生JS没有组件化编码方案，代码复用低
一.React 基础案例
1.先导入三个包：
【先引入react.development.js，后引入react-dom.development.js，babel.min.js 】
react.development.js
react-dom.development.js
babel.min.js
2.创建一个容器
3.创建虚拟DOM，渲染到容器中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../favicon.ico">
<title>hello_react</title>
</head>
<body>
<!--准备好一盒”容器“-->
<div id="test"></div>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel"><!--一定要写babel-->
//1.创建虚拟DOM
const VDOM = <h1>Hello</h1>/*此处一定不要写引号，jsx语法，因为不是字符串*/
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
这样，就会在页面中的这个div容器上添加这个h1.
二.虚拟DOM创建DOM
1.虚拟DOM的两种创建方式
- 第一种创建方式
<script type="text/babel">
//1.创建虚拟DOM
const VDOM = ( /*此处一定不要写引号，jsx语法，因为不是字符串*/
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
- 第二种创建方式
<script type="text/babel">
//1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'}, React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
总结：两种方式都可以创建DOM，且第一种也更加贴近我的习惯。
三.jsx语法
- 定义虚拟DOM，不能使用引号
- 标签中混入JS表达式的时候使用{}
- 样式的类名指定不要使用class，使用
className - 内敛样式要使用双大括号包裹
- 不能有多个根标签，只能有一个跟标签
- 标签必须闭合
- 如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
- 如果是大写字母开头，react就去渲染对应的组件，如果没有就报错.
关于JS表达式和JS语句：
- JS表达式：返回一个值，可以放在任何一个需要值的地方
a a+b demo(a) arr.map() function text(){}- JS语句：
if(){} for(){} while(){} swith(){}不会返回一个值
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../favicon.ico">
<title>3_虚拟DOM与真实DOM</title>
<style>
#test{
background-color: pink;
}
</style>
</head>
<body>
<!--准备好一盒”容器“-->
<div id="test"></div>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
const myId = 'PikAKa'
const myData = "Hello,rEaCt"
//1.创建虚拟DOM
const VDOM = ( /*此处一定不要写引号，jsx语法，因为不是字符串*/
<div>
<h1 className="title" id={myId.toLowerCase()}>
<span style={{color:'red',fontSize:'30px'}}>{myData.toLowerCase()}</span>
</h1>
<h1 className="title" id={myId.toUpperCase()}>
<span style={{color:'red',fontSize:'30px'}}>{myData.toLowerCase()}</span>
</h1>
<input type="text" />
</div>
)
//2.渲染虚拟DOM页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
四.jsx小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../favicon.ico">
<title>jsx小练习</title>
</head>
<body>
<!--准备好一盒”容器“-->
<div id="test"></div>
<!--引入依赖 ,引入的时候，必须就按照这个步骤-->
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
//{}里面只能放表达式
//如果渲染的是一个列表，每一行必须要有一个key
data.map((item,index)=>{
return <li key="{index}">{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
结果如下：
五.参考
React官网：react.docschina.org/
