React 基礎：開始使用 React | Next.js

要在新建立的專案中使用 React，請從 unpkg.com 載入兩個 React 腳本：

react 是 React 的核心函式庫。
react-dom 提供 DOM 專用方法，讓你能將 React 與 DOM 搭配使用。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

與其直接使用純 JavaScript 操作 DOM，請移除先前新增的 DOM 方法，並加入 ReactDOM.createRoot() 方法來鎖定特定 DOM 元素並建立根節點以顯示你的 React 元件。接著，加入 root.render() 方法將你的 React 程式碼渲染至 DOM。

這會告訴 React 在我們的 #app 元素內渲染 <h1> 標題。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

如果你嘗試在瀏覽器中執行這段程式碼，會出現語法錯誤：

Terminal

Uncaught SyntaxError: expected expression, got '<'

這是因為 <h1>...</h1> 不是有效的 JavaScript。這段程式碼是 JSX。

什麼是 JSX？

JSX 是 JavaScript 的語法擴充，可讓你以熟悉的 HTML 風格 語法描述 UI。JSX 的好處在於，除了遵循三條 JSX 規則外，你不需要學習 HTML 和 JavaScript 之外的任何新符號或語法。

但瀏覽器預設無法理解 JSX，因此你需要一個 JavaScript 編譯器，例如 Babel，將你的 JSX 程式碼轉換為常規 JavaScript。

將 Babel 加入專案

要將 Babel 加入專案，請將以下腳本複製並貼到你的 index.html 檔案中：

index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

此外，你需要透過將腳本類型更改為 type=text/jsx 來告知 Babel 要轉換哪些程式碼。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

要確認它是否正常運作，請在瀏覽器中開啟你的 HTML 檔案。

比較你剛剛寫的 宣告式 React 程式碼：

index.html

<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

與你在前一節中寫的 命令式 JavaScript 程式碼：

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

你可以開始看出使用 React 如何幫助你減少大量重複的程式碼。

這正是 React 的功能，它是一個包含可重複使用程式碼片段的函式庫，可代你執行任務 — 在此例中就是更新 UI。

延伸閱讀：

你不需完全了解 React 如何更新 UI 就能開始使用它，但如果你想了解更多，以下是一些額外資源：

UI 樹狀結構

使用 JSX 撰寫標記

React 文件中的 react-dom/server 章節。

React 必備的 JavaScript 知識

雖然你可以同時學習 JavaScript 和 React，但熟悉 JavaScript 可以讓學習 React 的過程更輕鬆。

在接下來的章節中，你將從 JavaScript 的角度認識一些 React 的核心概念。以下是將會提到的 JavaScript 主題摘要：

雖然本課程不會深入探討 JavaScript，但保持對最新 JavaScript 版本的了解是良好的習慣。但如果你覺得自己還不精通 JavaScript，也不要讓這阻礙你開始使用 React 進行開發！

React 入門指南

什麼是 JSX？

將 Babel 加入專案

React 必備的 JavaScript 知識

On this page