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://:5000 並按 Enter 鍵。serve 應用程式將提供我們的網頁服務，如下所示。

我們也可以使用相同的步驟在現有網站中使用 React。此方法非常易於使用和使用 React 庫。它可以用於在網站中執行簡單到中等的功能。它可以與其他庫一起用於新的和現有的應用程式。此方法適用於具有少量動態部分（如聯絡表單、簡單的支付選項等）的靜態網站。要建立高階單頁應用程式 (SPA)，我們需要使用 React 工具。讓我們在接下來的章節中學習如何使用 React 工具建立 SPA。

reactjs_creating_application.htm

列印頁面