Well done!

You have completed Practice Hooks in React !

Preview

Introducing the Challenge

2:57 with Reggie Williams

Prepare to refactor a React app using class components to use Hooks within function components.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

[SOUND] Hey everyone, Reggie here. 0:08

It's time for some practice. 0:12

Practice helps you become a faster and better developer. 0:14

Practicing and applying concepts helps you remember what you've learned. 0:18

React hooks provide function components with state and 0:22

other react features that are normally only available in class components. 0:25

Commonly used built in hooks include use state, use effect and use context. 0:29

In this practice, you will use hooks to refactor a user authentication react app. 0:36

You will practice both adding hooks to an existing function component and 0:41

refactoring class components into function components, 0:46

using hooks to manage state, context and more. 0:50

To be successful in this practice, 0:55

you should be familiar with the basics of working with react hooks. 0:57

If not, or if you need a refresher, 1:00

I've added a link to our hooks content in the teachers notes. 1:02

To get started, download and open up the project files. 1:09

The project files consist of an API and client folder. 1:13

Install the dependencies for each, then start both the API and 1:18

client in your terminal or console to run the app. 1:21

To view the app, visit local host 3000 in your browser. 1:26

You'll find links to sign in or sign up in the page header. 1:30

We can create an account by filling out the form on the sign-up page. 1:34

When the form is submitted, 1:38

we'll see a message that we have successfully been logged in. 1:39

And our username will be printed to the screen. 1:43

Our username is being passed to the header component through the context object. 1:47

We currently use the higher order component and 1:52

a function in the context file to provide context to each of our components. 1:54

With the use context hook, we can improve our code by reducing function calls and 2:00

eliminating the extra syntax required for 2:05

passing context to the components in App js. 2:07

For the first part of this challenge, use the use context hook to access 2:11

the authenticated user's username and authenticated.js. 2:16

You should be familiar with the use context hook. 2:20

You've used it before in our react hooks lessons. 2:23

When this works properly, you should be able to remove the call to 2:28

with context for the authenticated component and 2:32

pass the authenticated component directly to the private route tag in app.js. 2:35

And still see the correct username on the authenticated screen. 2:41

This exercise is a great way to practice what you've learned so 2:45

far about use context. 2:49

In the next video, I'll walk you through one solution to this part of the challenge 2:50

and introduce the second challenge. 2:54

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace