[MUSIC]

Hi, there, in the previous stage you learned how to create React elements,

the smallest building blocks of React applications.

This stage is all about thinking and

understanding components, which are at the heart of React.

Everything in React is considered to be a component.

So what exactly is a component?

A component is a piece of UI that you can reuse.

Just like you're able to reuse code in JavaScript with functions,

a component lets you reuse code that renders a part of your UI.

Being able to split your UI code into independent reusable pieces and

think about each piece in isolation is one of the most embraced features of React.

So first let's have a look at what we're going to build.

In this course, we're going to begin building a scoreboard application.

A scoreboard will be a simple app you can use when playing board games or

card games, for instance.

It will allow you to add and remove players from the game and

keep each player's score by increasing and decreasing a score counter for the player.

It's going to include dynamic information like the total number of players and

points, and even contain a stopwatch that can keep track of turn time.

To make things interesting and

competitive, the score leader will have a crown icon next to their name.

And we'll add some game mechanics that will let another player steal the crown

from the leader.

In this course we're only going to build certain parts of the scoreboard,

like the player display, score counter, and total player's stat.

We'll also be able to remove players from the board.

But in a followup course you'll level up your React skills by building all of

the remaining features of the scoreboard app.

The first step we'll take in building our scoreboard app is to think about

the application in small, simple components.

In the browser I'm going to use my Chrome dev tools inspector to highlight the main

sections of the app.

First, the header contains the title and

the stats, like the total number of players on the board.

Below the header is a list of players, and next to each player is

a counter that lets you increase and decrease the player's score.

Finally, we have the container that wraps the entire app.

So to start, our app might consist of three components.

A header component, a player component we can reuse to display each player and

score, and the container component that brings everything together.

As you build React projects, you'll find that breaking your app

into smaller components this way provides many benefits.

You can take pieces of repeated code, like the players and counters,

and turn them into a reusable component.

It's also easier to work with several small components rather than a single

large one.