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