"Build a Simple Android App" was retired on September 15, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Hooks in React !
You have completed Practice Hooks in React !
Preview
Prepare to refactor a React app using class components to use Hooks within function components.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up