Bummer! You have been redirected as the page you requested could not be found.
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 React Context API!
You have completed React Context API!
Preview
In this video, we'll initialize a new context using createContext(), and implement the Context API into our project.
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
We'll start off by creating a context for
the user state.
0:00
We'll create a new folder named
context inside the source folder.
0:04
In the context folder,
create a new file named UserContext.js.
0:12
This file structure and
naming isn't required.
0:20
I'm just doing it for
organization and maintenance reasons.
0:23
In UserContext.js,
let's first import React's
0:29
createContext method with import
{ createContext } from react.
0:34
Now we'll initialize a new context
using the createContext method.
0:43
We'll assign the context to a variable, so
0:49
let's declare a variable
named UserContext and
0:52
set it equal to createContext with
the default value set to null.
0:56
We're also going to export
our UserContext so
1:03
that it can be used in other components.
1:06
We'll type export default UserContext.
1:09
This is going to set up our provider and
consumer.
1:14
And we can see this by logging
UserContext to the console.
1:18
To do that in App.js,
let's import UserContext at
1:23
the top with import UserContext
from context/UserContext.
1:29
And in the return statement,
we'll log it to the console
1:37
with { console.log(UserContext) }.
1:42
UserContext now returns
an object with consumer and
1:48
provider properties that are also objects.
1:52
We'll make use of the provider in
the parent App component where we have
2:00
our state.
2:05
Now to provide the context
to all children of App,
2:07
I'll wrap all the JSX in the return
statement within provider tags.
2:11
We'll type UserContext.Provider and
2:17
I'll select the entire JSX and
2:22
place it inside the provider tags.
2:26
I'll fix the formatting by right
clicking and selecting Format Document.
2:32
If you have a look at the component
tree in React DevTools,
2:39
you should see that the new
component named Context.Provider is
2:44
now the parent of the header and
home components.
2:48
Now, my screen may look
a little different than yours.
2:53
That's because I've added some filters to
2:57
filter out the components
made by React Router.
3:00
If you would like to do the same,
pause the video and
3:04
add these filters to your react-devtools.
3:08
You may have noticed
a warning in our console.
3:11
In the next video,
3:15
we'll provide the user state to
the entire app using the value prop.
3:16
And set up the consumers
that will subscribe or
3:21
connect to the provider in order
to make use of the context.
3:24
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