1
00:00:00,287 --> 00:00:09,423
[MUSIC]

2
00:00:09,423 --> 00:00:13,709
Hi everyone, Laura here,
it's time for some practice.

3
00:00:13,709 --> 00:00:17,486
Practice helps you become a faster and
better developer, and

4
00:00:17,486 --> 00:00:20,110
helps you remember what you've learned.

5
00:00:20,110 --> 00:00:25,118
In this workshop, you're gonna
continue to sharpen your React skills

6
00:00:25,118 --> 00:00:30,631
by practicing how to initialize, use,
and manage state in your components.

7
00:00:30,631 --> 00:00:36,703
You'll build a star rating feature
that lets users rate a course like so.

8
00:00:36,703 --> 00:00:42,163
This practice exercise is a follow
up to our React Components course.

9
00:00:42,163 --> 00:00:48,216
If you haven't watched it yet, I suggest
you watch it before trying this challenge.

10
00:00:48,216 --> 00:00:53,031
I've added a link to the course in
the teachers notes with this video.

11
00:00:53,031 --> 00:00:57,415
To get started, download the project
files with this video and

12
00:00:57,415 --> 00:01:00,404
open them up in your favorite text editor.

13
00:01:00,404 --> 00:01:02,876
I'm using Visual Studio Code.

14
00:01:02,876 --> 00:01:07,690
The project was set up using
the tool Create React App.

15
00:01:07,690 --> 00:01:10,444
Once you have it open in your text editor,

16
00:01:10,444 --> 00:01:15,569
navigate to the practice-state directory
using your terminal or console.

17
00:01:15,569 --> 00:01:21,299
Run npm install to install
all the project dependencies.

18
00:01:21,299 --> 00:01:24,916
Then run npm start to launch
the project in the browser.

19
00:01:27,779 --> 00:01:32,657
This simple example course rating
app displays six JS courses

20
00:01:32,657 --> 00:01:37,834
users can rate using a star rating
component that you'll build.

21
00:01:37,834 --> 00:01:41,951
So first, let's go over the project files.

22
00:01:41,951 --> 00:01:43,799
In the source folder,

23
00:01:43,799 --> 00:01:48,873
the file course-data.js contains
an array named courses.

24
00:01:48,873 --> 00:01:55,034
This array consists of the course
objects used to display each course,

25
00:01:55,034 --> 00:01:59,757
including a name, desc, and
the url to its associated

26
00:01:59,757 --> 00:02:03,984
image located in
the public/image directory.

27
00:02:03,984 --> 00:02:08,111
This data is being imported
in the main App component,

28
00:02:08,111 --> 00:02:14,224
which renders a course component for
each course object in the course's array.

29
00:02:14,224 --> 00:02:19,506
Each course component renders
a self-contained star rating component.

30
00:02:19,506 --> 00:02:25,184
You're gonna begin writing your
code in the file StarRating.js.

31
00:02:25,184 --> 00:02:28,740
I already set up the component for
you as a function.

32
00:02:28,740 --> 00:02:34,068
And the file Star.js contains
the function component

33
00:02:34,068 --> 00:02:39,875
that will render each star as
an svg item inside a list item.

34
00:02:39,875 --> 00:02:43,715
So now let's go over
what you'll need to do.

35
00:02:43,715 --> 00:02:46,952
The star rating component works like this.

36
00:02:46,952 --> 00:02:49,938
It takes a courseRating state, and

37
00:02:49,938 --> 00:02:54,922
renders a rating as a set of selected or
highlighted stars.

38
00:02:54,922 --> 00:02:56,465
For this exercise,

39
00:02:56,465 --> 00:03:01,013
the StarRating component is
going to manage its own state.

40
00:03:01,013 --> 00:03:07,128
So you'll need to initialize
a rating state in StarRating.js.

41
00:03:07,128 --> 00:03:13,136
Then you'll write a function that renders
the stars that make up the rating widget.

42
00:03:13,136 --> 00:03:17,868
We want to be able to rate each
course up to five stars, so

43
00:03:17,868 --> 00:03:23,632
the component must render out 5
Star components, here's a hint.

44
00:03:23,632 --> 00:03:28,831
You can use a loop and
a push method to add stars to an array

45
00:03:28,831 --> 00:03:34,264
based on a number value,
then render the stars to the DOM.

46
00:03:34,264 --> 00:03:38,664
And then you'll need to write
an event handler that updates

47
00:03:38,664 --> 00:03:42,813
the courseRating state based
on the star a user clicks.

48
00:03:42,813 --> 00:03:48,815
That function will be passed down
to each Star component via props,

49
00:03:48,815 --> 00:03:52,094
and called when a user clicks a star.

50
00:03:52,094 --> 00:03:56,052
For example,
if a user clicks the third star,

51
00:03:56,052 --> 00:04:02,257
it will update the rating state to
three and display a three star rating.

52
00:04:02,257 --> 00:04:07,107
Click the fourth star to update
the rating state to four, and

53
00:04:07,107 --> 00:04:09,969
show a four star rating, and so on.

54
00:04:09,969 --> 00:04:14,419
The way you can show the selected
highlighted stars is by

55
00:04:14,419 --> 00:04:18,120
conditionally rendering a class attribute.

56
00:04:18,120 --> 00:04:19,263
In Star.js,

57
00:04:19,263 --> 00:04:25,178
the li tags will get a class of selected
if it's one of the selected stars.

58
00:04:25,178 --> 00:04:29,468
For example,
if a user clicks the fourth star,

59
00:04:29,468 --> 00:04:35,047
then list items one through four
should get the selected class

60
00:04:35,047 --> 00:04:40,104
that changes the child svg's
fill color to a dark blue.

61
00:04:40,104 --> 00:04:44,123
I've already created the styles for
the selected class in the stylesheet,

62
00:04:44,123 --> 00:04:44,890
index.css.

63
00:04:44,890 --> 00:04:51,790
This exercise while challenging is a great
way to practice what you've learned so

64
00:04:51,790 --> 00:04:55,798
far about setting and
updating state in React.

65
00:04:55,798 --> 00:05:00,890
Good luck, and in the next video, I'll
begin to walk you through one solution.