1 00:00:00,000 --> 00:00:09,606 [MUSIC] 2 00:00:09,606 --> 00:00:10,618 Hey everyone, Guil here. 3 00:00:10,618 --> 00:00:12,112 It's time for some practice. 4 00:00:12,112 --> 00:00:13,715 Practice helps you to become a faster and 5 00:00:13,715 --> 00:00:16,710 better developer and helps you remember what you've learned. 6 00:00:16,710 --> 00:00:19,870 In this workshop, you are going to continue to sharpen your React skills 7 00:00:19,870 --> 00:00:24,560 by practicing how to initialize, use, and mange state in your components. 8 00:00:24,560 --> 00:00:28,940 You'll build a star rating feature that lets users rate a course, like so. 9 00:00:30,820 --> 00:00:34,470 This practice exercise is a follow up to the managing state and 10 00:00:34,470 --> 00:00:37,380 data flow stage of our React components course. 11 00:00:37,380 --> 00:00:40,680 If you haven't watched it yet, I suggest you watch it before trying this challenge. 12 00:00:40,680 --> 00:00:43,940 I have added a link to the course in the teacher's note with this video. 13 00:00:43,940 --> 00:00:46,790 To get started, download the project files with this video and 14 00:00:46,790 --> 00:00:48,520 open them in your favorite text editor. 15 00:00:48,520 --> 00:00:50,380 I'm using Visual Studio Code. 16 00:00:50,380 --> 00:00:54,440 The project was set up using the tool Create React App. 17 00:00:54,440 --> 00:00:56,350 Once you have it open in your text editor, 18 00:00:56,350 --> 00:01:01,520 navigate to the practice-state directory using your terminal or console. 19 00:01:01,520 --> 00:01:05,338 Run npm install, to install all the project dependencies. 20 00:01:09,732 --> 00:01:13,563 Then run npm start, to launch the project in the browser. 21 00:01:13,563 --> 00:01:14,932 You could also use Yarn. 22 00:01:17,462 --> 00:01:21,734 This simple example course rating app displays six JavaScript courses users can 23 00:01:21,734 --> 00:01:25,280 rate using a star rating component that you will build. 24 00:01:25,280 --> 00:01:28,180 So first, let's go over the project files. 25 00:01:28,180 --> 00:01:29,861 In the source folder, 26 00:01:29,861 --> 00:01:34,466 the file course-data.js contains an array named courses. 27 00:01:34,466 --> 00:01:38,440 This array consists of the course objects used to display each course. 28 00:01:38,440 --> 00:01:41,458 Including a name, description, rating, and 29 00:01:41,458 --> 00:01:45,990 the URL to its associated image located in the public image directory. 30 00:01:47,040 --> 00:01:55,700 This data is being passed to the root app component here in index.js via props. 31 00:01:55,700 --> 00:02:01,320 In the components folder, the app component renders a course component for 32 00:02:01,320 --> 00:02:04,460 each course object in the courses array. 33 00:02:04,460 --> 00:02:09,400 Each course component renders a self contained star rating component. 34 00:02:09,400 --> 00:02:13,880 You're going to begin writing your code in the file StarRating.js. 35 00:02:13,880 --> 00:02:17,190 I already set up the component for you as a class. 36 00:02:17,190 --> 00:02:21,500 And the file Star.js contains the function component 37 00:02:21,500 --> 00:02:25,950 that will render each star as an svg inside a list item. 38 00:02:28,750 --> 00:02:31,080 So now let's go over what you'll need to do. 39 00:02:31,080 --> 00:02:33,790 The StarRating component works like this. 40 00:02:33,790 --> 00:02:38,612 It takes a rating state and renders a rating as a set of selected or 41 00:02:38,612 --> 00:02:40,231 highlighted stars. 42 00:02:42,425 --> 00:02:43,650 For this exercise, 43 00:02:43,650 --> 00:02:47,261 the StarRating component is going to manage its own state. 44 00:02:47,261 --> 00:02:53,927 So you'll first need to initialize a rating state in StarRating.js. 45 00:02:53,927 --> 00:02:58,625 Then you will write a function that renders the stars that make up 46 00:02:58,625 --> 00:03:00,518 the rating widget. 47 00:03:00,518 --> 00:03:04,430 We want to be able to rate each course up to five stars. 48 00:03:04,430 --> 00:03:07,700 So the component must render out five star components. 49 00:03:07,700 --> 00:03:08,830 And here's a hint. 50 00:03:08,830 --> 00:03:09,950 You can use a loop and 51 00:03:09,950 --> 00:03:14,410 the push method to add stars to an array based on a number value. 52 00:03:14,410 --> 00:03:15,930 Then render the stars to the dom. 53 00:03:17,270 --> 00:03:20,460 Then you'll need to write an event handler 54 00:03:20,460 --> 00:03:24,610 that updates the rating state based on the star a user clicks. 55 00:03:24,610 --> 00:03:28,580 That function will be passed down to each Star component via props, and 56 00:03:28,580 --> 00:03:30,980 called when a user clicks on a star. 57 00:03:30,980 --> 00:03:35,100 So for example, if a user clicks on the third star, 58 00:03:35,100 --> 00:03:39,800 it will update the rating state to 3 and display a three-star rating. 59 00:03:39,800 --> 00:03:43,620 Click the fourth star to update the rating state to 4, and 60 00:03:43,620 --> 00:03:46,580 show a four-star rating, and so on. 61 00:03:46,580 --> 00:03:49,770 The way you can show these selected highlighted stars 62 00:03:49,770 --> 00:03:52,976 is by conditionally rendering a class attribute. 63 00:03:52,976 --> 00:03:57,166 So in Star.js, the li will get a class of 64 00:03:57,166 --> 00:04:01,863 selected if it's one of the selected stars. 65 00:04:04,190 --> 00:04:09,115 For example, if a user clicks the fourth star then list items 66 00:04:09,115 --> 00:04:13,086 one through four should get the selected class. 67 00:04:13,086 --> 00:04:16,590 That changes the child svg's fill color to dark blue. 68 00:04:16,590 --> 00:04:20,097 I've already created the styles for the selected class and 69 00:04:20,097 --> 00:04:21,861 the style sheet index.css. 70 00:04:24,142 --> 00:04:28,417 This exercise, while challenging, is a great way to practice what you've learned 71 00:04:28,417 --> 00:04:31,385 so far about setting and updating state in React. 72 00:04:31,385 --> 00:04:33,724 So good luck, have fun, and in the next video, 73 00:04:33,724 --> 00:04:36,016 I'll begin to walk you through one solution.