Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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