01-hello_react
demo
<!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>01_hello_react</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入React核心库. -->
<script src="../React-js/react.development.js"></script>
<!-- 引入React-dom,用于支持操作DOM -->
<script src="../React-js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="../React-js/babel.min.js"></script>
<!-- 写这个type的意义是为了让他知道我写的是jsx -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = <h1>01_hello_react</h1>; // 此处不写引号,因为是jsx可以混着写
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>
02-虚拟 dom 的两种创建方式
2-1.使用 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>01_使用js创建虚拟dom</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入React核心库. -->
<script src="../React-js/react.development.js"></script>
<!-- 引入React-dom,用于支持操作DOM -->
<script src="../React-js/react-dom.development.js"></script>
<!-- 写这个type的意义是为了让他知道我写的是jsx -->
<script type="text/javascript">
// 1. 创建虚拟dom (使用这个方法仅限于简单的dom结构)
const VDOM = React.createElement(
"h1",
{ id: "title" },
React.createElement("span", {}, "01_使用js创建虚拟dom")
);
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>
2-2.使用 jsx 创建虚拟 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>02_使用jsx创建虚拟dom</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入React核心库. -->
<script src="../React-js/react.development.js"></script>
<!-- 引入React-dom,用于支持操作DOM -->
<script src="../React-js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="../React-js/babel.min.js"></script>
<!-- 写这个type的意义是为了让他知道我写的是jsx -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = (
<h1 id="title">
<span>02_使用jsx创建虚拟dom</span>
</h1>
); // 此处不写引号,因为是jsx可以混着写
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>
2-3.虚拟 DOM 和真实 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>03_虚拟DOM和真实DOM</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入React核心库. -->
<script src="../React-js/react.development.js"></script>
<!-- 引入React-dom,用于支持操作DOM -->
<script src="../React-js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="../React-js/babel.min.js"></script>
<!-- 写这个type的意义是为了让他知道我写的是jsx -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = (
<h1 id="title">
<span>03_虚拟DOM和真实DOM</span>
</h1>
);
/**
* 1. VDOM本质就是 Object 对象
* 2. 虚拟DOM比较轻, 属性很少,虚拟DOM仅仅React内部使用,无需那么多的属性
* 3. 真实DOM比较重, 属性很多
* 4. 虚拟DOM最终会被React转为真实dom呈现到页面上
*/
console.log("虚拟DOM", VDOM); //虚拟DOM Object
const TDOM = document.getElementById("test");
console.log("真实DOM", TDOM); //真实DOM <div id="test"></div>
console.log(VDOM instanceof Object); // true
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, TDOM);
</script>
</body>
</html>
03-JSX
全名 JavaScript XML
3-1.JSX 语法规则
1. 定义虚拟 dom 的使用不要使用引号
2. 标签重混入 js 表达式的时候要用{}
一定要区分JS语句和JS表达式
1. 表达式: 一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些是表达式
1. a
2. a+b
3. demo(1)
4. arr.map()
5. function test(){}
2. 语句(代码)
下面这些是语句(代码)
1. if(){}
2. for(){}
3. switch(){}
3. 样式的类名不要用 class,要用 className
4. 内联样式要用 style={{}} 的形式,并且需要大驼峰 fontSize
5. 只能有一个根标签
6. 标签必须要闭合
7. 标签首字母
7.1 如果是小写字母开头,则就转为 html 的同名元素,如果没有对应的就会报错
7.2 如果是大写字母开头,React 就去渲染对应的组件,如果组件没有定义那么就报错
<!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>03_JSX语法规则</title>
<style>
.title {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入React核心库. -->
<script src="../React-js/react.development.js"></script>
<!-- 引入React-dom,用于支持操作DOM -->
<script src="../React-js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="../React-js/babel.min.js"></script>
<!-- 写这个type的意义是为了让他知道我写的是jsx -->
<script type="text/babel">
/**
* JSX语法规则
* 1. 定义虚拟dom的使用不要使用引号
* 一定要区分JS语句和JS表达式
* 1. 表达式: 一个表达式会产生一个值,可以放在任何一个需要值的地方
* 下面这些是表达式
* 1. a
* 2. a+b
* 3. demo(1)
* 4. arr.map()
* 5. function test(){}
* 2. 语句(代码)
* 下面这些是语句(代码)
* 1. if(){}
* 2. for(){}
* 3. switch(){}
* 2. 标签重混入js表达式的时候要用{}
* 3. 样式的类名不要用class,要用className
* 4. 内联样式要用 style={{}} 的形式,并且需要大驼峰 fontSize
* 5. 只能有一个根标签
* 6. 标签必须要闭合
* 7. 标签首字母
* 7.1 如果是小写字母开头,则就转为html的同名元素,如果没有对应的就会报错
* 7.2 如果是大写字母开头,React就去渲染对应的组件,如果组件没有定义那么就报错
*/
const id = "id";
const data = "03_JSX语法规则";
// 1. 创建虚拟dom
const VDOM = (
<div>
<h1 id={id.toLowerCase()} className="title">
<span>{data.toLowerCase()}</span>
</h1>
<input type="text"></input>
</div>
);
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>
3-2.jsx 练习
<!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>jsx练习</title>
<style>
.title {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入React核心库. -->
<script src="../React-js/react.development.js"></script>
<!-- 引入React-dom,用于支持操作DOM -->
<script src="../React-js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="../React-js/babel.min.js"></script>
<!-- 写这个type的意义是为了让他知道我写的是jsx -->
<script type="text/babel">
/**
* 一定要区分JS语句和JS表达式
* 1. 表达式: 一个表达式会产生一个值,可以放在任何一个需要值的地方
* 下面这些是表达式
* 1. a
* 2. a+b
* 3. demo(1)
* 4. arr.map()
* 5. function test(){}
* 2. 语句(代码)
* 下面这些是语句(代码)
* 1. if(){}
* 2. for(){}
* 3. switch(){}
*/
const data = ["angular", "react", "vue"];
const data2 = data.map((el) => <li key={el}>{el}</li>);
// 1. 创建虚拟dom
const VDOM = (
<div>
<h1>前端框架</h1>
<ul>{data2}</ul>
</div>
);
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>
