目录
hello react
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 1. 准备好一个“容器” -->
<div id="test"></div>
<!-- 2. 引入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 */
// 3.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
// JSX可以将HTML和JS混用
// 4.渲染虚拟DOM到页面
// ReactDOM.render(虚拟DOM,容器) 你把哪个虚拟DOM渲染到哪个容器中 ReactDOM操作虚拟DOM
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
创建虚拟DOM的两种方式
为什么要用JSX：JSX可以让程序员更简单的创建虚拟DOM 假如我们要实现下面的结构
- JS创建虚拟DOM：
<!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>
<script type="text/javascript" >
//1.创建虚拟DOM React.createElement(标签名，标签属性，标签内容)创建虚拟DOM document.createElement创建真实DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
- JSX创建虚拟DOM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_使用jsx创建虚拟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>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" > /* 此处一定要写babel */
// Babel就是将你这里面的代码翻译成了原生JS的代码：
// const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//1.创建虚拟DOM
const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
- 关于虚拟DOM：
（1）本质是Object类型的对象（一般对象）
（2）虚拟DOM身上的属性比较少，真实DOM身上的属性比较多，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
（3）虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
JSX语法
- 定义虚拟DOM时，不要写引号。
- 标签中混入JS表达式时要用{}。
- 样式的类名指定不要用class，要用className。
- 内联样式，要用style={{key:value}}的形式去写。
- 只有一个根标签
- 标签必须闭合
- 标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
一定注意区分：【js语句(代码)】与【js表达式】
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：（你拿一个变量在左侧接 能接到值 他就是表达式）
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}- 语句(代码)：
下面这些都是语句(代码)：（控制代码走向 没有值 不属于表达式）
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}