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 库的开发版本。要在生产环境中部署应用程序，请使用以下脚本。

现在，我们已准备好在我们的网页中使用 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 库提供的 React.createElement 和 ReactDOM.render 方法动态创建一个 HTML 元素并将其放置在 react-app 部分。

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

serve ./hello.html

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

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

本页