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
