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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi everyone, Laura here,
it's time for some practice.
0:09
Practice helps you become a faster and
better developer, and
0:13
helps you remember what you've learned.
0:17
In this workshop, you're gonna
continue to sharpen your React skills
0:20
by practicing how to initialize, use,
and manage state in your components.
0:25
You'll build a star rating feature
that lets users rate a course like so.
0:30
This practice exercise is a follow
up to our React Components course.
0:36
If you haven't watched it yet, I suggest
you watch it before trying this challenge.
0:42
I've added a link to the course in
the teachers notes with this video.
0:48
To get started, download the project
files with this video and
0:53
open them up in your favorite text editor.
0:57
I'm using Visual Studio Code.
1:00
The project was set up using
the tool Create React App.
1:02
Once you have it open in your text editor,
1:07
navigate to the practice-state directory
using your terminal or console.
1:10
Run npm install to install
all the project dependencies.
1:15
Then run npm start to launch
the project in the browser.
1:21
This simple example course rating
app displays six JS courses
1:27
users can rate using a star rating
component that you'll build.
1:32
So first, let's go over the project files.
1:37
In the source folder,
1:41
the file course-data.js contains
an array named courses.
1:43
This array consists of the course
objects used to display each course,
1:48
including a name, desc, and
the url to its associated
1:55
image located in
the public/image directory.
1:59
This data is being imported
in the main App component,
2:03
which renders a course component for
each course object in the course's array.
2:08
Each course component renders
a self-contained star rating component.
2:14
You're gonna begin writing your
code in the file StarRating.js.
2:19
I already set up the component for
you as a function.
2:25
And the file Star.js contains
the function component
2:28
that will render each star as
an svg item inside a list item.
2:34
So now let's go over
what you'll need to do.
2:39
The star rating component works like this.
2:43
It takes a courseRating state, and
2:46
renders a rating as a set of selected or
highlighted stars.
2:49
For this exercise,
2:54
the StarRating component is
going to manage its own state.
2:56
So you'll need to initialize
a rating state in StarRating.js.
3:01
Then you'll write a function that renders
the stars that make up the rating widget.
3:07
We want to be able to rate each
course up to five stars, so
3:13
the component must render out 5
Star components, here's a hint.
3:17
You can use a loop and
a push method to add stars to an array
3:23
based on a number value,
then render the stars to the DOM.
3:28
And then you'll need to write
an event handler that updates
3:34
the courseRating state based
on the star a user clicks.
3:38
That function will be passed down
to each Star component via props,
3:42
and called when a user clicks a star.
3:48
For example,
if a user clicks the third star,
3:52
it will update the rating state to
three and display a three star rating.
3:56
Click the fourth star to update
the rating state to four, and
4:02
show a four star rating, and so on.
4:07
The way you can show the selected
highlighted stars is by
4:09
conditionally rendering a class attribute.
4:14
In Star.js,
4:18
the li tags will get a class of selected
if it's one of the selected stars.
4:19
For example,
if a user clicks the fourth star,
4:25
then list items one through four
should get the selected class
4:29
that changes the child svg's
fill color to a dark blue.
4:35
I've already created the styles for
the selected class in the stylesheet,
4:40
index.css.
4:44
This exercise while challenging is a great
way to practice what you've learned so
4:44
far about setting and
updating state in React.
4:51
Good luck, and in the next video, I'll
begin to walk you through one solution.
4:55
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up