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.