react中嵌入网页_在网站中添加 React

根据需要选择性地使用 React。

React 从一开始就被设计为逐步采用，并且你可以根据需要选择性地使用 React。可能你只想在现有页面中“局部地添加交互性”。使用 React 组件是一种不错的方式。

大多数网站不是、也不需要是单页应用程序。通过仅仅几行代码并且无需使用构建工具，试试在你的网站的一小部分中使用 React。然后，你可以逐步扩展它的存在，或只将其涵盖在少数动态部件中。

一分钟用上 React

在本小节中，我们会展示如何将 React 组件添加到现有的 HTML 页面中。你可以基于自己现有的网站，或创建一个空的 HTML 文件来练习。

不会涉及复杂的工具或安装需求 —— 完成这一节的内容，你只需要连接到网络，以及一分钟的时间。

步骤 1： 添加一个 DOM 容器到 HTML

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

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

我们给这个

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

提示

你可以像这样在

标签内的任意位置放置一个“容器”

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

步骤 2：添加 Script 标签

接下来，在 结束标签之前，向 HTML 页面中添加三个