Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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 the most embraced features of React.
Resources
[MUSIC]
0:00
Hi, there, in the previous stage you
learned how to create React elements,
0:04
the smallest building blocks
of React applications.
0:08
This stage is all about thinking and
0:11
understanding components,
which are at the heart of React.
0:13
Everything in React is
considered to be a component.
0:16
So what exactly is a component?
0:20
A component is a piece of
UI that you can reuse.
0:22
Just like you're able to reuse
code in JavaScript with functions,
0:27
a component lets you reuse code
that renders a part of your UI.
0:30
Being able to split your UI code
into independent reusable pieces and
0:33
think about each piece in isolation is one
of the most embraced features of React.
0:37
So first let's have a look at
what we're going to build.
0:41
In this course, we're going to begin
building a scoreboard application.
0:45
A scoreboard will be a simple app you
can use when playing board games or
0:48
card games, for instance.
0:52
It will allow you to add and
remove players from the game and
0:53
keep each player's score by increasing and
decreasing a score counter for the player.
0:57
It's going to include dynamic information
like the total number of players and
1:04
points, and even contain a stopwatch
that can keep track of turn time.
1:08
To make things interesting and
1:13
competitive, the score leader will
have a crown icon next to their name.
1:15
And we'll add some game mechanics that
will let another player steal the crown
1:20
from the leader.
1:24
In this course we're only going to
build certain parts of the scoreboard,
1:26
like the player display, score counter,
and total player's stat.
1:30
We'll also be able to remove
players from the board.
1:35
But in a followup course you'll level
up your React skills by building all of
1:38
the remaining features
of the scoreboard app.
1:42
The first step we'll take in building
our scoreboard app is to think about
1:44
the application in small,
simple components.
1:49
In the browser I'm going to use my Chrome
dev tools inspector to highlight the main
1:51
sections of the app.
1:56
First, the header contains the title and
1:58
the stats, like the total
number of players on the board.
2:01
Below the header is a list of players,
and next to each player is
2:04
a counter that lets you increase and
decrease the player's score.
2:09
Finally, we have the container
that wraps the entire app.
2:13
So to start,
our app might consist of three components.
2:18
A header component, a player component
we can reuse to display each player and
2:22
score, and the container component
that brings everything together.
2:28
As you build React projects,
you'll find that breaking your app
2:32
into smaller components this
way provides many benefits.
2:35
You can take pieces of repeated code,
like the players and counters,
2:39
and turn them into a reusable component.
2:44
It's also easier to work with several
small components rather than a single
2:47
large one.
2:52
You need to sign up for Treehouse in order to download course files.
Sign up