章節4

React 入門

要在新建立的專案中使用 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>

如果您嘗試在瀏覽器中執行此程式碼，您將會收到語法錯誤

終端機

Uncaught SyntaxError: expected expression, got '<'

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

什麼是 JSX？

JSX 是 JavaScript 的一種語法擴充，讓您可以使用類似 HTML 的語法來描述使用者介面。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>

此外，您需要透過將 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 的作用，它是一個函式庫，其中包含可重複使用的程式碼片段，可以代表您執行任務 — 在這種情況下，更新使用者介面。

額外資源

您不需要完全了解 React 如何更新使用者介面就能開始使用它，但如果您想了解更多資訊，這裡有一些額外資源

UI 樹狀結構

使用 JSX 撰寫標記

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

學習 React 必備的 JavaScript 基礎

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

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

雖然本課程沒有深入探討 JavaScript，但隨時掌握 JavaScript 的最新版本仍是個好習慣。不過，如果您還不熟悉 JavaScript，也別讓這阻礙您開始使用 React 構建應用程式！

React 入門

什麼是 JSX？

將 Babel 加入您的專案

學習 React 必備的 JavaScript 基礎

您已完成此章節4