Introducing the Practice

[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