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.