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 库 了。

接下来，引入一个 div 标签，其 id 为 react-app。

<!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 Library 提供的 React.createElement 和 ReactDOM.render 方法动态创建 HTML 元素并将其放置在 react-app 部分内。

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

serve ./hello.html

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

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

reactjs_creating_application.html