ReactJS - 使用 CDN

让我们学习如何使用内容分发网络在简单的网页中包含 React。

打开终端并转到您的工作区。

cd /go/to/your/workspace

接下来，创建一个文件夹 static_site 并将目录更改为新创建的文件夹。

mkdir static_site 
cd static_site

接下来，创建一个新的 HTML 文件 hello.html。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Simple React app</title> 
   </head> 
   <body> 
   </body> 
</html>

接下来，包含 React 库。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Simple React app</title> 
   </head> 
   <body>
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
   </body> 
</html>

这里，

我们使用的是 unpkg CDN。unpkg 是一个开源的、全球性的内容分发网络，支持 npm 包。
@17 代表 React 库 的版本。
这是带有调试选项的 React 库 的开发版本。要将应用程序部署到生产环境，请使用以下脚本。

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

现在，我们已准备好使用 React 库 在我们的网页中。

接下来，引入一个带有 id react-app 的 div 标签。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React based application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
   </body> 
</html>

react-app 是一个占位符容器，React 将在容器内工作。我们可以使用任何与我们的应用程序相关的占位符容器名称。

接下来，在文档末尾创建一个脚本部分，并使用 React 功能创建一个元素。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React based application</title> 
   </head>
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script language="JavaScript"> 
         element = React.createElement('h1', {}, 'Hello React!') 
         ReactDOM.render(element, document.getElementById('react-app')); 
      </script> 
   </body> 
</html>

这里，应用程序使用 React.createElement 和 ReactDOM.render 方法（由 React 库 提供）来动态创建 HTML 元素并将其放置在 react-app 部分内。

接下来，使用 serve Web 服务器为应用程序提供服务。

serve ./hello.html

接下来，打开浏览器并在地址栏中输入 https://127.0.0.1:5000 并按 Enter 键。serve 应用程序将提供我们的网页服务，如下所示。

我们也可以使用相同的步骤在现有网站中使用 React。此方法非常易于使用和使用 React 库。它可以用于在网站中执行简单到中等的功能。它可以与其他库一起用于新的和现有的应用程序。此方法适用于具有少量动态部分（如联系表单、简单的支付选项等）的静态网站。要创建高级单页应用程序 (SPA)，我们需要使用 React 工具。让我们在接下来的章节中学习如何使用 React 工具创建 SPA。

reactjs_creating_application.htm

打印页面