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
This video introduces the challenge that you'll be working to complete.
Resources
[MUSIC]
0:00
Hey everyone, Guil here.
0:09
It's time for some practice.
0:10
Practice helps you to become a faster and
0:12
better developer and
helps you remember what you've learned.
0:13
In this workshop, you are going to
continue to sharpen your React skills
0:16
by practicing how to initialize, use,
and mange state in your components.
0:19
You'll build a star rating feature that
lets users rate a course, like so.
0:24
This practice exercise is a follow
up to the managing state and
0:30
data flow stage of our
React components course.
0:34
If you haven't watched it yet, I suggest
you watch it before trying this challenge.
0:37
I have added a link to the course in
the teacher's note with this video.
0:40
To get started, download the project
files with this video and
0:43
open them in your favorite text editor.
0:46
I'm using Visual Studio Code.
0:48
The project was set up using
the tool Create React App.
0:50
Once you have it open in your text editor,
0:54
navigate to the practice-state directory
using your terminal or console.
0:56
Run npm install,
to install all the project dependencies.
1:01
Then run npm start,
to launch the project in the browser.
1:09
You could also use Yarn.
1:13
This simple example course rating app
displays six JavaScript courses users can
1:17
rate using a star rating
component that you will build.
1:21
So first, let's go over the project files.
1:25
In the source folder,
1:28
the file course-data.js contains
an array named courses.
1:29
This array consists of the course
objects used to display each course.
1:34
Including a name, description, rating, and
1:38
the URL to its associated image
located in the public image directory.
1:41
This data is being passed to the root app
component here in index.js via props.
1:47
In the components folder, the app
component renders a course component for
1:55
each course object in the courses array.
2:01
Each course component renders a self
contained star rating component.
2:04
You're going to begin writing your
code in the file StarRating.js.
2:09
I already set up the component for
you as a class.
2:13
And the file Star.js contains
the function component
2:17
that will render each star as
an svg inside a list item.
2:21
So now let's go over
what you'll need to do.
2:28
The StarRating component works like this.
2:31
It takes a rating state and
renders a rating as a set of selected or
2:33
highlighted stars.
2:38
For this exercise,
2:42
the StarRating component is
going to manage its own state.
2:43
So you'll first need to initialize
a rating state in StarRating.js.
2:47
Then you will write a function that
renders the stars that make up
2:53
the rating widget.
2:58
We want to be able to rate
each course up to five stars.
3:00
So the component must render
out five star components.
3:04
And here's a hint.
3:07
You can use a loop and
3:08
the push method to add stars to
an array based on a number value.
3:09
Then render the stars to the dom.
3:14
Then you'll need to write an event handler
3:17
that updates the rating state
based on the star a user clicks.
3:20
That function will be passed down to
each Star component via props, and
3:24
called when a user clicks on a star.
3:28
So for example,
if a user clicks on the third star,
3:30
it will update the rating state to 3 and
display a three-star rating.
3:35
Click the fourth star to update
the rating state to 4, and
3:39
show a four-star rating, and so on.
3:43
The way you can show these
selected highlighted stars
3:46
is by conditionally
rendering a class attribute.
3:49
So in Star.js, the li will get a class of
3:52
selected if it's one
of the selected stars.
3:57
For example, if a user clicks
the fourth star then list items
4:04
one through four should
get the selected class.
4:09
That changes the child svg's
fill color to dark blue.
4:13
I've already created the styles for
the selected class and
4:16
the style sheet index.css.
4:20
This exercise, while challenging, is a
great way to practice what you've learned
4:24
so far about setting and
updating state in React.
4:28
So good luck, have fun,
and in the next video,
4:31
I'll begin to walk you
through one solution.
4:33
You need to sign up for Treehouse in order to download course files.
Sign up