[MUSIC]

Hey everyone, Guil here.

It's time for some practice.

Practice helps you to become a faster and

better developer and helps you remember what you've learned.

In this workshop, you are going to continue to sharpen your React skills

by practicing how to initialize, use, and mange state in your components.

You'll build a star rating feature that lets users rate a course, like so.

This practice exercise is a follow up to the managing state and

data flow stage of our React components course.

If you haven't watched it yet, I suggest you watch it before trying this challenge.

I have added a link to the course in the teacher's note with this video.

To get started, download the project files with this video and

open them in your favorite text editor.

I'm using Visual Studio Code.

The project was set up using the tool Create React App.

Once you have it open in your text editor,

navigate to the practice-state directory using your terminal or console.

Run npm install, to install all the project dependencies.

Then run npm start, to launch the project in the browser.

You could also use Yarn.

This simple example course rating app displays six JavaScript courses users can

rate using a star rating component that you will build.

So first, let's go over the project files.

In the source folder,

the file course-data.js contains an array named courses.

This array consists of the course objects used to display each course.

Including a name, description, rating, and

the URL to its associated image located in the public image directory.

This data is being passed to the root app component here in index.js via props.

In the components folder, the app component renders a course component for

each course object in the courses array.

Each course component renders a self contained star rating component.

You're going to begin writing your code in the file StarRating.js.

I already set up the component for you as a class.

And the file Star.js contains the function component

that will render each star as an svg inside a list item.

So now let's go over what you'll need to do.

The StarRating component works like this.

It takes a rating state and renders a rating as a set of selected or

highlighted stars.

For this exercise,

the StarRating component is going to manage its own state.

So you'll first need to initialize a rating state in StarRating.js.

Then you will write a function that renders the stars that make up

the rating widget.

We want to be able to rate each course up to five stars.

So the component must render out five star components.

And here's a hint.

You can use a loop and

the push method to add stars to an array based on a number value.

Then render the stars to the dom.

Then you'll need to write an event handler

that updates the rating state based on the star a user clicks.

That function will be passed down to each Star component via props, and

called when a user clicks on a star.

So for example, if a user clicks on the third star,

it will update the rating state to 3 and display a three-star rating.

Click the fourth star to update the rating state to 4, and

show a four-star rating, and so on.

The way you can show these selected highlighted stars

is by conditionally rendering a class attribute.

So in Star.js, the li will get a class of

selected if it's one of the selected stars.

For example, if a user clicks the fourth star then list items

one through four should get the selected class.

That changes the child svg's fill color to dark blue.

I've already created the styles for the selected class and

the style sheet index.css.

This exercise, while challenging, is a great way to practice what you've learned

so far about setting and updating state in React.

So good luck, have fun, and in the next video,

I'll begin to walk you through one solution.