React学习笔记二 - 案例：HTML引入React持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

官网

国内：react.docschina.org/

体验React

在网站中添加React

首先，我们创建react-project文件夹，文件夹中新建一个基础的index.html文件，以及一个js文件夹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_world</title>
</head>

<body>
</body>

</html>

打开index.html文件可以看到这时还什么都没有

然后，我们引入React相关的js文件,同时定义一个容器用来提供给react进行渲染。

react.development.js
react-dom.development.js
babel.min.js

具体代码以及文件说明如下：

<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>
</body>

这时，再刷新页面，看到的还是一片空白

别急，我们还没定义好React的虚拟DOM呢，先来定义一下。

在这里定义一个类型为babel的script标签,声明一个虚拟DOM变量 $_{不用加单引号/双引号}$ ，同时，调用 ReactDOM API，将我们虚拟DOM渲染到页面。用法如下：

ReactDOM.render(虚拟DOM, 容器)

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello_world</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>

    <!-- 设置类型为babel -->
    <script type="text/babel">
        const VDOM = <h1>Hello World</h1>
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>

效果出来了，可以看到React将我们定义的虚拟DOM渲染到了上面到容器中了。