Introduction

3 minutes

Components are reusable, self-contained units, and make up the core of any React application. Components can have their own properties (or props), which allow you to pass data into a component, making it reusable across different scenarios. You're also able to use complex data beyond strings and primitive types, giving your components even more power.

Objectives

In this module, you learn how to:

Display dynamic data.
Display lists of data.
Add properties (props) to components.
Use objects and complex data types.

Prerequisites

Skills

Knowledge of HTML, CSS, and JavaScript
Basic knowledge of React and React components
Knowledge of package management with Node.js and npm
Knowledge of Git

Locally installed software

Node.js
A code editor, such as Visual Studio Code
Git

Clone the project and open the code in Visual Studio Code

This module uses a starter project.

To get the starter project, run the following code in a command or terminal window. This clones the repository and opens the starter folder in 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 .