2 First Time try React
2.1 Importing React
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
React 可以构建在浏览器中运行的 web 应用，也可以构建在移动端运行的原生应用，React 在构建这两种应用时会有一些通用方法和一些非通用方法，通用方法都被放置在了 react 文件中，非通用方法比如实现web 应用的方法被放置在了 react-dom 中，实现移动端应用的方法被放置在了 react-native-web 文件中。
react：核心库，包含了构建 web 应用和构建移动端 APP应用的通用方法。
react-dom：只包含了构建 web 应用的方法。
react-native-web：只包含构建移动端 APP应用的方法。
VS 中输入
!会生成基本的html骨架
2.2 Creating Virtual DOM
引入 react 后，window 对象下会多出一个 React 的对象，对象下面的 createElement 方法用于创建元素。
// type：标签名称，字符串
// props：元素属性，对象，无属性填入 null
// children：子元素，普通文本或 createElement 方法返回的元素对象
// 返回值：元素对象（虚拟 DOM 对象）
React.createElement(type, props, children) // 虚拟对象 js 对象
2.3 Rendering Virtual DOM
引入 react-dom 后，window 下会多出一个叫做 ReactDOM 的对象，对象下面的 render 方法用于渲染元素。
// element：待渲染元素对象，就是通过 createElement 方法创建的虚拟 DOM 对象
// container：虚拟 DOM 对象的渲染位置.真实 DOM 对象。
ReactDOM.render(element, container)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"> </div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script>
const div = React.createElement("div", { id: "box" }, "I am a div");
console.log(div);
ReactDOM.render(div, document.getElementById("root"));
// " " vs '' => " " is used for string and ' ' is used for char
</script>
</body>
</html>
需求: 将指定的HTML结构使用React提供的方式渲染出来
<main id="main">
<h1>My Blog</h1>
<article>
<h2>My First Article</h2>
<p class="text">This is the content of the article</p>
</article>
</main>
创建一段html结构所对应的虚拟dom, 然后通过react提供的render方法把它渲染出来.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"> </div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script>
const p = React.createElement("p", { className: "text" }, "This is the content of the article");
const articleHeader = React.createElement("h2", null, "My First Article");
const article = React.createElement("article", null, articleHeader, p);
const mainHeader = React.createElement("h1", null, "My Blog");
const main = React.createElement("main", { id: "main" }, mainHeader, article);
ReactDOM.render(main, document.getElementById("root"));
</script>
</body>
</html>
注意class是关键字, 需要使用className.
在 JavaScript 中，
class是一个保留关键字，因为它用于定义类（class声明）。然而，HTML 中使用class属性来定义元素的 CSS 类。因此，React 不允许直接在 JSX 中使用class，以避免和 JavaScript 的class关键字冲突。React 的解决方案是使用
className替代 HTML 的class属性。当在 React 中定义元素的 CSS 类时，你需要用className，否则会导致错误或意外行为。
