準備 React 開發環境

首先，我們需要到 Node.js 的 官網 安裝 Node.js 環境，選擇左邊的穩定版本 v18.18.0，若是有使用 nvm 的朋友可以使用指令來安裝 nvm install 18.18.0。

接著使用 Create React App 官網 提供的 npx 指令建立 React 開發環境，並自訂專案名稱（這裡以 pizza-menu 為例）：

npx create-react-app@5 pizza-menu

認識資料夾結構

在開發中，src 資料夾是主要使用的目錄，預設會包含以下檔案：

src/
  App.css
  App.js
  App.test.js
  index.css
  index.js
  logo.svg
  reportWebVitals.js
  setupTests.js

我們將從頭開始，首先刪除 src 底下的所有檔案，並新建一支 index.js。

index.js

首先，我們需要從 react 和 react-dom/client 引入 React 和 ReactDOM 模組：

// 引入 React 和 ReactDOM
import React from "react";
import ReactDOM from "react-dom/client";

接下來，建立一個名為 App 的元件，並返回一些 JSX 內容，這些內容將在後面的單元介紹：

// 引入 React 和 ReactDOM
import React from "react";
import ReactDOM from "react-dom/client";

// App 元件
function App() {
  // JSX
  return <h1>Hello React!</h1>
}

創建一個 React root 並將其關聯到 id 為 root 的 HTML 元素上 <div id="root"></div>：

// 引入 React 和 ReactDOM
import React from "react";
import ReactDOM from "react-dom/client";

// App 元件
function App() {
  // JSX
  return <h1>Hello React!</h1>
}

// 創建 root
const root = ReactDOM.createRoot(document.getElementById("root"));

最後，使用 root 的 render 方法將 App 元件渲染到頁面上：

// 引入 React 和 ReactDOM
import React from "react";
import ReactDOM from "react-dom/client";

// App 元件
function App() {
  // JSX
  return <h1>Hello React!</h1>
}

// 創建 root
const root = ReactDOM.createRoot(document.getElementById("root"));

// 渲染 App 元件
root.render(<App />)

Strict Mode（嚴格模式）

React 的 Strict Mode（嚴格模式）用於檢測和解決一些可能存在的問題。

在 Strict Mode 下，React 會對元件進行 雙重渲染，以確保元件的渲染是純粹（Pure）和沒有副作用（Side Effect）的。

// 將 App 元件包在 React.StrictMode 元件中
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

結語

今天介紹了建立 React 開發環境的步驟，並快速了解 index.js 這支主要檔案會包含哪些東西，最後，在開發中使用 Strict Mode 可以用來檢測和解決潛在的問題。