簡介

  • 4 分鐘

若要建立互動式應用程式，您必須能夠修改資料，並回應使用者要求。 在 React 中，這項功能是透過狀態和事件來管理。

「狀態」是可在整個應用程式的元件之間更新和共用的資料。 事件可讓您處理使用者可以與應用程式互動的所有方法，像是點擊、輸入和點選。

目標

在此課程模組中，您將會：

  • 將狀態新增至應用程式。
  • 新增事件處理常式。
  • 使用效果勾點來回應狀態變更。

必要條件

  • JavaScript、HTML 和 CSS 的知識
  • React 元件的基本了解
  • 程式碼編輯器，例如 Visual Studio Code
  • 已在本機安裝的 Node.js。
  • 已在本機安裝的 Git
  • 以下章節會說明入門專案

複製專案

此課程模組使用入門專案。 複製專案並在 Visual Studio Code 中開啟。

  1. 若要取得入門專案，請在命令視窗或終端機視窗中執行下列步驟。 此步驟會複製存放庫，並在 Visual Studio Code 中開啟 start 資料夾。

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. 在 Visual Studio Code 中，選取 [檢視]>[終端]，以開啟整合式終端。 或選取 Ctrl+`.。 (在 Mac 上，請選取 Cmd+`。)

  3. 在終端機中執行下列程式碼，以安裝必要的套件，並啟動開發伺服器。

    npm install
npm start

  4. 系統會自動開啟您的預設瀏覽器。 如果沒有自動開啟，請開啟您的瀏覽器並前往 http://locahost:8080. 入門頁面隨即開啟。