網頁

▼

2025/02/18

React 19 新手入門：CDN + esm.sh 快速上手

作者：吳祐賓

 

 


 

 

 

自學習 React 以來，一直很嚮往使用 CDN 來寫 React，因為習慣 jQuery 那種不需要建構環境就能開發應用程式的模式 (No-build development)，總認為網頁就該輕鬆寫才是。(當然，複雜邏輯怎樣都不會輕鬆寫就是)

 

轉眼間 React 已經釋出 19 版，多了許多很新奇的東西，最有印象的是：

 

  • 整合 Form 表單的優化 (Action, useActionState 等) 
  • "use" API，可以進行非同步的渲染處理

 

 

 而在 React 19 Upgrade Guide 裡，有段內容吸引到我的注意：

 

UMD builds removed

UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process.

To load React 19 with a script tag, we recommend using an ESM-based CDN such as esm.sh.

 


 

這要追朔到 React 誕生年份：2013。當時 JavaScript 模型化規則還沒有定案，所以使用 UMD (Universal Module Definition) ，來讓程式碼可以在各種不同的環境下都能順利執行。

 

隨著 IE6 走入歷史，ESM (ECMAScript Modules) 已成為現代 JavaScript 的官方模組標準。瀏覽器和 Node.js 都已經原生支援 ESM。React 團隊認為使用 ESM 除了能減少維護 UMD 的能量外，也可以提高程式的開發效率。

 

 

回顧使用 CDN 建構 React 18 的 Hello World App

 

 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <title>React App without JSX in React 18</title>
</head>
<body>
<div id="root"></div>
<!-- script 寫在後面才會在 root 後面執行，或是使用 window.onload 就可以將此段放在 head 標籤內 -->
<script>
  const e = React.createElement;

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(e('div', null, 'Hello React App without JSX in React 18'));
</script>
</body>
</html>

 

 

使用 CDN 建構 React 19 的 Hello World App

 

因為 React19 不再開發 UMD，取而代之的是 ESM，esm.sh CDN 站點有支援 esm 即時載入及編譯的功能，又可以支援 modules 寫法，使用上更加接近本機環境建構內容。

 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App without JSX React 19</title>
</head>
<body>
<div id="root"></div>
<script type="module">
  import React from "https://esm.sh/react@19/?dev"
  import ReactDOMClient from "https://esm.sh/react-dom@19/client/?dev"
  
  const e = React.createElement;

  const root = ReactDOMClient.createRoot(document.getElementById('root'));
  root.render(e('div', null, 'Hello React App without JSX in React 19'));
</script>
</body>
</html>

 

 

esm.sh CDN 提供即時模組匯入，但模組來源在哪裡？

 

esm.sh 的原理是即時編譯模組，而模組的來源便是來自 npmjs 倉庫，以 React 來說，我們可以到 npmjs 網站查詢 React。網址：

 

https://www.npmjs.com/package/react

 

 

如下圖所示，目前的版本為 19.0.0，使用 React 19 Upgrade Guide 裡的範例即可使用。

 


 

 


總結：React 19 CDN 方式在新手入門學習上更加方便與平滑

 

從上述的程式碼可以得知 React 19 CDS 開發上很貼近本地建構環境 (例如 React + Webpack) 。

 

以往 UMD 只能使用 React 三本柱 (React, Router, Redux)，要使用 npm 套件難度極高，例如 DevExtreme 這類套件就不能使用。

 

而 ESM 開發方式不僅是現代開發主流，更讓這些三方套件在 CDN 下使用成為可能。

 

我認為也能讓 React 新手在適應 ESM CDN 後能更平滑過渡到本地建構環境。

 

實際玩過 React 19 後覺得能夠在 CDN 環境下享受 NPM 豐富的套件，讓 CDN 模式延展性更好，更適合學習、小規模測試和原型(Prototype)開發。

 

下一篇會加入 JSX，來看看 React 19 新規則能否和 Babel 結合，來體驗 React 19 更多的可能。

 

和你分享

 

 

See also

 

 

 

沒有留言:

張貼留言