在网站中添加React

React介绍

• React 是一个用于构建用户界面的 JavaScript 库。

1. 使用React

- 添加一个 DOM 容器到 HTML

打开你想要编辑的 HTML 页面。添加一个空的

标签作为标记你想要用 React 显示内容的位置。

<div id="like_button_container"></div>

我们给这个div加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它，并在其中显示一个 React 组件。

提示:

你可以像这样在 body标签内的任意位置放置一个“容器” div。根据需要，你可以在一个页面上放置多个独立的 DOM 容器。它们通常是空标签 —— React 会替换 DOM 容器内的任何已有内容。

- 添加script标签

在 body 结束标签之前，向 HTML 页面中添加三个 script 标签：

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- 加载我们的 React 组件。-->
  <script src="like_button.js"></script>

前两个标签加载 React。第三个将加载你的组件代码。

- 创建一个React组件

在 HTML 页面文件的同级目录下创建一个名为 like_button.js 的文件。

提示:

这段代码定义了一个名为 LikeButton 的 React 组件。

在 like_button.js 的底部

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

这两行代码会找到我们在步骤 1 中添加到 HTML 里的 div，然后在它内部显示我们的 React 组件 “Like” 按钮。