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
Let's go over the project files and note how context will be best used.
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
In this workshop, we're going to be
working with a simple login app.
0:00
To follow along with me,
download the project files and
0:05
open them in your favorite text editor.
0:09
I'm using Visual Studio code
which has an integrated terminal.
0:12
Open up the terminal by
clicking this button.
0:17
Make sure you're in
the react-context directory and
0:20
run npm i to install
the project's dependencies.
0:25
Then run npm start to run and
launch the app in your browser.
0:31
The project app consists of
three main routes or views.
0:38
There's the default route,
0:42
which the main text changes depending
on if the user has logged in or not.
0:44
There is a sign in route where a user can
log into the app using their credentials.
0:50
Currently, our simple app
doesn't authenticate the user.
0:55
It accepts any input the user enters.
0:59
If you would like to learn how to set a
basic authentication within a React app, I
1:03
recommend taking our React authentication
course after completing this workshop.
1:08
I also posted a link to this course
in the teacher's notes below.
1:14
And the last main route
is a settings route,
1:19
where users are able to
control the look of the app.
1:22
The user can toggle dark mode,
change the accent color, and
1:27
even adjust the font size of the app.
1:31
Our main app component
contains four states.
1:35
The user state that stores
the user information when they log in
1:39
isDarkMode that keeps track
whether dark mode is on or not.
1:43
accentColor,
which stores the color hex code.
1:49
And fontPercentage, that stores
the zoom percentage of the font.
1:54
These states are passed down
to many different components.
1:59
For example,
child components like header, nav,
2:04
home, settings need
access to the user state.
2:09
In Nav.js, the user state is used to
decide what links to render on the page,
2:13
which is nested three levels deep,
from App to Header to Nav.
2:21
In a similar way,
2:29
the accentColor state gets updated
in the AccentColor component,
2:30
which is also three levels deep,
from App to Settings to AccentColor.
2:35
In this component, you'll see that
I imported a component called
2:43
TwitterPicker from a package react-color.
2:48
The react color package provides you
components that display color selectors.
2:52
If you'd like to learn
more about this package,
2:58
I've attached a link to it in
the teacher's notes below.
3:01
You may have noticed something
you haven't seen yet
3:05
in React, the empty JSX tags
inside the return statement.
3:09
This is a shorthand react fragment.
3:14
A react fragment lets you group
a list of sibling elements or
3:17
components without having to add
an unnecessary wrapper element.
3:22
It doesn't render anything out to the DOM.
3:27
I'm using it here to contain the links.
3:31
You can read more about
React Fragment in the teacher's notes.
3:34
Currently, our state is distributed
through the component tree from
3:39
one component to the other
via a series of props.
3:43
Likewise, the props passing
the functions act as callbacks that get
3:48
invoked at a later time through some
interaction with the child component.
3:52
There are some prop drilling
happening in the app.
3:59
In between components like Header and
Settings, receive and
4:01
are aware of data that they do not need.
4:06
They're only responsible for passing
certain data down to their children.
4:10
For instance, the Header component
has no need for the user state but
4:15
it has to receive it via props in order to
pass it down the component tree to Nav.
4:20
And Settings' only job is to pass
data down to the theme components.
4:27
It doesn't render any UI based
on the data passed to it.
4:33
This might be something we want to avoid,
4:38
especially as our app grows in size and
complexity.
4:40
So this is where React's context API comes
in to help circumvent prop drilling.
4:45
Context is mainly used
when some data needs to
4:51
be accessible by many components
at different nesting levels.
4:54
The context API has three essential parts,
5:00
the create context method,
a provider and a consumer.
5:04
First, you have to create the context.
5:10
So create context sets up a context and
returns an object with a provider and
5:12
a consumer, the two main
components of the context API.
5:19
A single provider component is used
as high as possible in the tree, and
5:24
it allows consumer components
to subscribe to context changes.
5:29
Consumers access the provider
to get any data they need.
5:35
And that's how you avoid having
to pass props several levels deep
5:39
down the component tree.
5:43
The provider and
consumers are constantly communicating.
5:45
It's the communication between
the two that makes context work.
5:50
Our app will benefit with two contexts.
5:55
One for the user and one for
the theme states isDarkMode,
5:58
accentColor, and fontPercentage.
6:02
In the next video, we'll get started
by creating a new context for
6:06
the user state and
providing it to our app.
6:10
Later on, I'll challenge you
to create one context for
6:14
all the state that controls the theme.
6:18
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