1
00:00:00,000 --> 00:00:08,542
[MUSIC]

2
00:00:08,542 --> 00:00:12,310
[SOUND] Hey everyone, Reggie here.

3
00:00:12,310 --> 00:00:14,217
It's time for some practice.

4
00:00:14,217 --> 00:00:16,950
Practice helps you become a faster and
better developer.

5
00:00:18,200 --> 00:00:22,420
Practicing and applying concepts helps
you remember what you've learned.

6
00:00:22,420 --> 00:00:25,194
React hooks provide function
components with state and

7
00:00:25,194 --> 00:00:29,810
other react features that are normally
only available in class components.

8
00:00:29,810 --> 00:00:36,290
Commonly used built in hooks include
use state, use effect and use context.

9
00:00:36,290 --> 00:00:41,620
In this practice, you will use hooks to
refactor a user authentication react app.

10
00:00:41,620 --> 00:00:46,486
You will practice both adding hooks
to an existing function component and

11
00:00:46,486 --> 00:00:50,411
refactoring class components
into function components,

12
00:00:50,411 --> 00:00:53,640
using hooks to manage state,
context and more.

13
00:00:55,140 --> 00:00:57,125
To be successful in this practice,

14
00:00:57,125 --> 00:01:00,908
you should be familiar with the basics
of working with react hooks.

15
00:01:00,908 --> 00:01:02,954
If not, or if you need a refresher,

16
00:01:02,954 --> 00:01:06,516
I've added a link to our hooks
content in the teachers notes.

17
00:01:09,168 --> 00:01:13,250
To get started, download and
open up the project files.

18
00:01:13,250 --> 00:01:16,740
The project files consist of an API and
client folder.

19
00:01:18,090 --> 00:01:21,771
Install the dependencies for
each, then start both the API and

20
00:01:21,771 --> 00:01:24,700
client in your terminal or
console to run the app.

21
00:01:26,280 --> 00:01:29,580
To view the app,
visit local host 3000 in your browser.

22
00:01:30,860 --> 00:01:34,670
You'll find links to sign in or
sign up in the page header.

23
00:01:34,670 --> 00:01:38,409
We can create an account by filling
out the form on the sign-up page.

24
00:01:38,409 --> 00:01:39,856
When the form is submitted,

25
00:01:39,856 --> 00:01:43,065
we'll see a message that we have
successfully been logged in.

26
00:01:43,065 --> 00:01:45,200
And our username will be
printed to the screen.

27
00:01:47,520 --> 00:01:51,250
Our username is being passed to the header
component through the context object.

28
00:01:52,300 --> 00:01:54,726
We currently use the higher
order component and

29
00:01:54,726 --> 00:01:58,620
a function in the context file to provide
context to each of our components.

30
00:02:00,100 --> 00:02:05,162
With the use context hook, we can improve
our code by reducing function calls and

31
00:02:05,162 --> 00:02:07,842
eliminating the extra syntax required for

32
00:02:07,842 --> 00:02:11,540
passing context to
the components in App js.

33
00:02:11,540 --> 00:02:16,009
For the first part of this challenge,
use the use context hook to access

34
00:02:16,009 --> 00:02:20,840
the authenticated user's username and
authenticated.js.

35
00:02:20,840 --> 00:02:23,531
You should be familiar
with the use context hook.

36
00:02:23,531 --> 00:02:26,220
You've used it before in
our react hooks lessons.

37
00:02:28,574 --> 00:02:32,714
When this works properly,
you should be able to remove the call to

38
00:02:32,714 --> 00:02:35,955
with context for
the authenticated component and

39
00:02:35,955 --> 00:02:41,540
pass the authenticated component directly
to the private route tag in  app.js.

40
00:02:41,540 --> 00:02:44,750
And still see the correct username
on the authenticated screen.

41
00:02:45,750 --> 00:02:49,146
This exercise is a great way to
practice what you've learned so

42
00:02:49,146 --> 00:02:50,436
far about use context.

43
00:02:50,436 --> 00:02:54,878
In the next video, I'll walk you through
one solution to this part of the challenge

44
00:02:54,878 --> 00:02:56,920
and introduce the second challenge.