Preview
Video Player
00:00
00:00
Introducing the Challenge
2:57Prepare to refactor a React app using class components to use Hooks within function components.
[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