教學課程：適用於初學者的 Windows 上的 React

發行項
03/19/2024

如果您是使用 React 的新手，本指南將透過一些基本概念來協助您開始使用。

一些基本詞彙和概念
嘗試在 Visual Studio Code 中使用 React
嘗試使用 React 搭配 API

必要條件

在 Windows 上安裝 React
在 Windows 子系統 Linux 版上安裝 React
安裝 VS Code。建議您在 Windows 上安裝 VS Code，不論您打算在 Windows 或 WSL 上使用 React。

一些基本詞彙和概念

React 是用來建置使用者介面的 JavaScript 程式庫。

這是開放原始碼，表示您可以藉由提出問題或提取要求來參與它。 (就像這些文件！)
它是宣告式，表示您會撰寫所需的程式碼，而 React 會取得該宣告的程式碼，並執行所有 JavaScript/DOM 步驟以取得所需的結果。
它是以元件為基礎，表示應用程式是使用預製且可重複使用的獨立程式碼模組來建立，模組會管理其自己的狀態，而且可以使用 React 架構一起黏附在一起，讓資料可以通過您的應用程式，同時讓狀態遠離 DOM。
React 的座右銘是「學習一次，在任何地方撰寫」。其目的是重複使用程式碼，而不是假設您將如何使用 React UI 搭配其他技術，但讓元件可重複使用，而不需要重新撰寫現有的程式碼。
JSX 是撰寫來與 React 搭配使用的 JavaScript 語法延伸模組，看起來像 HTML，但實際上是需要編譯或轉譯成一般 JavaScript 的 JavaScript 檔案。
虛擬 DOM：DOM 代表文件物件模型，並且會呈現您應用程式的 UI。每次應用程式 UI 的狀態變更時，DOM 就會更新以呈現變更。當 DOM 經常更新，效能會變慢。虛擬 DOM 只是 DOM 的視覺表示法，因此當應用程式的狀態變更時，虛擬 DOM 會更新，而不是實際的 DOM，因此降低效能成本。它是 DOM 物件的表示法，像是輕量型複本。
檢視：檢視是使用者在瀏覽器中看到所呈現的內容。在 React 中，檢視與您希望使用者在其畫面上看到的呈現元素的概念相關。
狀態：狀態是指不同檢視所儲存的資料。狀態通常會依賴使用者是誰，以及使用者正在做什麼。例如，登入網站可能會顯示您的使用者設定檔 (檢視) 與您的名稱 (狀態)。狀態資料會根據使用者變更，但檢視會維持不變。狀態是用來達成大部分使用者與應用程式互動。
元件屬性：是父元件將某些信息當做值或數據（包括物件、陣列和函式）傳遞至其子元件的方式。屬性是唯讀的，無法由子元件更新。

嘗試在 Visual Studio Code 中使用 React

使用 React 建立應用程式有許多方式 (如需範例，請參閱 React 概觀)。本教學課程將逐步解說如何使用 vite 來快速轉送適用於運作中React應用程式的設定，讓您能夠看到它正在執行，並專注於實驗程序代碼，但尚未自行使用建置工具。

在 Windows 或 WSL 上使用 vite （請參閱上述必要條件）來建立新的專案： npm create vite@latest hello-world -- --template react
變更目錄，讓您在新應用程式的資料夾內： cd hello-world、安裝相依性： npm install ，然後啟動本機開發伺服器： npm run dev

新的 React Hello World 應用程式會編譯並開啟預設網頁瀏覽器，以顯示其正在上 http://localhost:5173執行。
停止執行 React 應用程式 (Ctrl+c)，並輸入下列命令以在 VS Code 中開啟其程式碼檔案：code .

尋找 src/App.jsx 檔案，並尋找讀取的標頭區段：

<p>Edit <code>src/App.jsx</code> and save to test HMR</p>

將它變更為內容：

<p>Hello World! This is my first React app.</p>

開啟您的終端機視窗並啟動本機開發伺服器： npm run dev 或使用整合式 VS Code 終端機（Ctrl + '）並從該處啟動您的開發伺服器。

在整個 React 應用程式的開發過程中，您可以讓本機開發伺服器保持執行，而且所有變更都會立即在瀏覽器中轉譯 http://localhost:5173 。

應用程式檔案結構

內文檔案結構看起來像

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

對於入門版，這些是您需要知道的重要檔案和資料夾。

index.html 是 Vite 從 src 資料夾插入程式碼以執行程式碼的檔案。除非變更 React 應用程式的標題，否則不應該編輯此檔案。

資料夾 src 是您 React 應用程式原始程式碼所在的位置。這是您建立自定義元件、CSS 檔案和其他建置應用程式所需程式碼檔案的位置。這些檔案會由Vite的建置工具處理，以剖析和建置它們，以建立最終的React專案。

資料夾 public 包含將直接提供給瀏覽器的所有靜態檔案。 Vite 不會處理這些檔案。

嘗試使用 React 搭配 API

使用相同的 Hello World! 應用程式 (您使用 React 建置並使用 Visual Studio Code 更新)，讓我們嘗試新增 API 呼叫以顯示一些資料。

讓我們重新開始。我們將移除 Vite 所提供的幾乎所有未定案程式代碼，並只保留上一個步驟中的程式代碼。

App.jsx 檔案現在看起來應該像這樣：
```
import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```
接下來，讓我們設定本機狀態，以便儲存來自 API 的資料。狀態是我們可以將數據儲存在檢視中使用的位置。

若要新增本機狀態，我們必須先匯入 useState React Hook，以讓您將狀態變數新增至元件。

我們也需要初始化本機狀態。會 useState 傳回兩個值的陣列;目前狀態和函 set 式。我們會將目前的狀態稱為初始化為 posts 空數位列，以便稍後使用 setPosts 函式從 API 填入張貼數據。

App.jsx 檔案現在看起來應該像這樣：
```
import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```

若要呼叫 API，以取得資料在 React 應用程式中使用，我們將使用 .fetch JavaScript 方法。我們將呼叫的 API 是 JSONPlaceholder，這是一個免費的 API，用於測試和原型設計，提供 JSON 格式的假預留位置資料。

我們使用 useEffect React Hook 來使用 set 函式來更新posts狀態。

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

讓我們看看 API 在我們的 posts 狀態中儲存的一些資料。以下是假 JSON API 檔案的一些內容。我們可以使用下列類別來查看所列資料的格式："albumId"、"id"、"title"、"url" 和 "thumbnailUrl"。

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

為了顯示 API 數據，我們現在必須在轉譯的 return() 語句中新增一些 JSX 程式代碼。我們將使用 map() 方法，從儲存它做為索引鍵的物件 posts 顯示我們的資料。每個文章都會顯示具有「ID #」的標頭，然後從 JSON 數據顯示 post.id 索引鍵值 + post.title 索引鍵值。後面接著根據 thumbnailUrl 索引鍵值來顯示影像的本文。
```
// rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;
```

其他資源

官方 React 文件 (英文) 提供 React 的所有最新資訊
React 開發人員工具的 Microsoft Edge 附加元件：將兩個索引卷標新增至您的 Microsoft Edge 開發工具，以協助您進行 React 開發：元件和分析工具。
React 學習路徑包含線上課程模組，可協助您開始熟悉基本概念。

共用方式為

教學課程：適用於初學者的 Windows 上的 React

必要條件

一些基本詞彙和概念

嘗試在 Visual Studio Code 中使用 React

應用程式檔案結構

嘗試使用 React 搭配 API

其他資源

意見反應

其他資源