简介

3 分钟

组件是可重用的自包含单元，并构成任何 React 应用程序的核心。组件可以具有其自己的属性（或 props），这允许你将数据传递到组件，使其可在不同场景中重复使用。还可以使用字符串和基元类型以外的复杂数据，从而使组件更强大。

目标

在本模块中，你将了解如何：

显示动态数据。
显示数据列表。
向组件添加属性 (props)。
使用对象和复杂数据类型。

先决条件

技能

了解 HTML、CSS 和 JavaScript
React 和 React 组件的基本知识
了解如何使用 Node.js 和 npm 管理包
了解 Git

本地安装的软件

Node.js
代码编辑器，如 Visual Studio Code
Git

克隆项目并在 Visual Studio Code 中打开代码

此模块使用初学者项目。

若要获取初学者项目，请在命令或终端窗口中运行以下代码。此代码将克隆存储库，并在 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 .

在 Visual Studio Code 中打开集成终端，方法是选择“查看”>“终端”（在 Windows 上选择“Ctl-`”或在 Mac 上选择“Cmd-`”）。
在终端中运行以下代码，安装所需的包并启动开发服务器。
```
npm install
npm start
```
默认浏览器应会自动打开。如果没有，请打开浏览器，转到 http://locahost:8080。随即将出现“初学者”页。