React快速入门：开发首个页面

本节，我们写一个最简页面，演示如何使用 React 来开发 Web 界面。为了尽量减少不必要的依赖，直指 React 的本质，我们暂不使用任何打包工具，直接在 HTML 网页中开发。

首先，我们要准备一个 HTML 网页骨架，大致是这样的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Raw React</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>

    <script>
      // your code here
    </script>
  </body>
</html>

第 8 行处，我们在 body 中放一个 div 标签，作为容器挂载 React 渲染出来的用户界面；第 10~11 行，引入 React 依赖以便在 JS 中调用 React 和 ReactDOM ，这是我们使用 React 开发的前提。第 13~15 行，我们准备了一个空的 script 标签，我们首个页面的应用代码便写在这里。

好的，现在开始在 script 标签下写应用代码：

1
2
3
4

const element = React.createElement("h1", null, "Raw React without JSX");
const container = document.querySelector('#root');
const root = ReactDOM.createRoot(container);
root.render(element);

这是一个极其简单的应用，只是显示出一个 h1 标题标签：

  1. 调用 React.createElement 创建一个 h1 元素，内容为：Raw React without JSX ；
  2. 调用浏览器接口找到 id 等于 root 的 DOM 节点，作为挂载 React 应用的容器；
  3. 调用 ReactDOM.createRoot 创建 React 根节点；
  4. 在根节点上渲染我们创建的 h1 元素；

当我们用浏览器访问这个网页时，浏览器的处理步骤大概是这样的：

  1. 解析 DOM 结构，并完成渲染（首次）；
  2. 为两个 script 标签加载依赖，加载后即可在 JS 中访问到 React 和 ReactDOM 提供的 API ；
  3. 执行执行 script 标签中的应用代码，调用 React 创建 h1 元素，并渲染到 div 标签上；

React 接到调用指令后，将渲染出 DOM 结构，并将其挂载到 div 标签，效果如下：

See the Pen for-var by fasionchan (@fasionchan) on CodePen.

效果预览功能由 CODEPEN 提供，点击 HTML 标签，即可查看完整的 HTML 源码。

现代 Web 应用中， HTML 通常只扮演代码骨架的角色（定义 DOM 容器、引入相关依赖等），具体业务逻辑则由 JS 代码实现。为此，CODEPEN 推荐单独编辑 JS 代码并自动在 HTML 中引入，这样更能聚焦重点：

See the Pen for-var by fasionchan (@fasionchan) on CodePen.

这个 CODEPEN 跟上一个是一样的，只不过 JS 从 HTML 中分离出来独立编辑而已。

另外，HTML 通常也只需要关注 body 标签里面的内容。同样，CODEPEN 也支持只写这部分内容，其他 HTML 骨架它会自动生成。后续如无特殊说明，我们都采用这种方式来演示代码。

【小菜学React】系列文章首发于公众号【小菜学编程】，敬请关注：

【小菜学React】系列文章首发于公众号【小菜学编程】，敬请关注：

fasionchan 2022-08-06