Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice State in React!
You have completed Practice State in React!
Preview
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