簡介

  • 3 分鐘

元件是可重複使用、獨立的單位，並且是構成所有 React 應用程式的核心。 元件可以有自己的屬性 (或 props)，可將資料傳遞至元件，使其可於不同的案例中重複使用。 您也可以使用字串和基本型別以外的複雜資料，讓元件功能更強大。

目標

在本課程模組中，您將了解如何：

  • 顯示動態資料。
  • 顯示資料的清單。
  • 將屬性 (props) 新增至元件。
  • 使用物件和複雜資料類型。

必要條件

技能

  • HTML、CSS 和 JavaScript 的知識
  • React 和 React 元件的基本知識
  • 使用 Node.js 和 npm 的套件管理知識
  • Git 的知識

本機安裝的軟體

複製專案並在 Visual Studio Code 中開啟程式碼

此課程模組使用入門專案。

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

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\2-component-data\start
code .

# macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/2-component-data/start
code .

  2. 選取 [檢視]>[終端機] (或者在 Windows 中使用 Ctl-`，在 Mac 上使用 Cmd-`)，以開啟 Visual Studio Code 內的整合式終端機。

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

    npm install
npm start

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