- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.680 --> 00:00:02.100
Over the next few guides,
2
00:00:02.100 --> 00:00:06.610
we are gonna learn about the Context API in React.
3
00:00:06.610 --> 00:00:08.890
And the reason why we need to do this
4
00:00:08.890 --> 00:00:11.680
is because there are gonna be multiple parts
5
00:00:11.680 --> 00:00:13.000
of our application
6
00:00:13.000 --> 00:00:17.160
that need to know if you are logged in as an admin
7
00:00:17.160 --> 00:00:18.690
or if you're not.
8
00:00:18.690 --> 00:00:20.680
So all the way up until now,
9
00:00:20.680 --> 00:00:25.680
what we've done is when it comes to managing data
10
00:00:25.890 --> 00:00:28.900
is we have seen how we can pass props
11
00:00:28.900 --> 00:00:32.000
from a parent to a child.
12
00:00:32.000 --> 00:00:34.080
And we do that with using props,
13
00:00:34.080 --> 00:00:35.490
which are the properties
14
00:00:35.490 --> 00:00:38.800
where we can pass data between two components.
15
00:00:38.800 --> 00:00:42.020
Now, what would happen if you wanna pass data
16
00:00:42.020 --> 00:00:45.320
to many components in your application?
17
00:00:45.320 --> 00:00:48.660
So say that you wanted to pass components
18
00:00:48.660 --> 00:00:50.610
like seeing if the user's logged in
19
00:00:50.610 --> 00:00:55.370
to every page and then a number of the components,
20
00:00:55.370 --> 00:00:58.640
you would actually have to create a prop
21
00:00:58.640 --> 00:01:02.400
for every one of those components
22
00:01:02.400 --> 00:01:05.430
that needed to check if you're logged in or not.
23
00:01:05.430 --> 00:01:09.360
That's really not a great way to build your application
24
00:01:09.360 --> 00:01:12.070
because then any time you make a change,
25
00:01:12.070 --> 00:01:15.960
so say that you wanted to change the type of data
26
00:01:15.960 --> 00:01:18.410
that you're looking at when a user's logged in,
27
00:01:18.410 --> 00:01:19.243
you're gonna have to go
28
00:01:19.243 --> 00:01:21.590
and you're gonna have to change each one of those components
29
00:01:21.590 --> 00:01:24.700
and that's really a troublesome way
30
00:01:24.700 --> 00:01:26.047
to build your application.
31
00:01:26.047 --> 00:01:27.910
You're not gonna have a lot of fun
32
00:01:27.910 --> 00:01:30.440
and it's not gonna be very maintainable.
33
00:01:30.440 --> 00:01:33.580
So what we can do is we can use
34
00:01:33.580 --> 00:01:37.830
what is called the Context API in React.
35
00:01:37.830 --> 00:01:40.470
And what that's gonna give us the ability to do
36
00:01:40.470 --> 00:01:44.610
is to wrap up different parts of our application
37
00:01:44.610 --> 00:01:46.810
and make data available
38
00:01:46.810 --> 00:01:50.010
to all of those components automatically.
39
00:01:50.010 --> 00:01:52.150
And don't worry if that doesn't really make a ton
40
00:01:52.150 --> 00:01:53.600
of sense right now.
41
00:01:53.600 --> 00:01:54.700
We're gonna walk through it
42
00:01:54.700 --> 00:01:55.910
over the next few guides
43
00:01:55.910 --> 00:01:57.940
and we're gonna start in this guide
44
00:01:57.940 --> 00:02:01.130
with a really simple base case.
45
00:02:01.130 --> 00:02:03.930
Now, just to give you a high level
46
00:02:03.930 --> 00:02:05.950
for how the Context API works.
47
00:02:05.950 --> 00:02:08.590
It really helps to think about Context
48
00:02:08.590 --> 00:02:12.107
and what that word means in everyday usage.
49
00:02:12.107 --> 00:02:16.510
If you're trying to tell a story to a friend,
50
00:02:16.510 --> 00:02:19.480
it helps if you can provide some context,
51
00:02:19.480 --> 00:02:22.960
some background, some type of information
52
00:02:22.960 --> 00:02:27.260
that is going to really help lay out all
53
00:02:27.260 --> 00:02:29.500
of the different and the background for the story
54
00:02:29.500 --> 00:02:30.760
that you're trying to tell.
55
00:02:30.760 --> 00:02:32.370
It's kind the same thing
56
00:02:32.370 --> 00:02:34.730
when you're building React applications
57
00:02:34.730 --> 00:02:37.020
and you are building a context.
58
00:02:37.020 --> 00:02:39.270
You are laying a scene,
59
00:02:39.270 --> 00:02:42.480
you're providing details and then every one
60
00:02:42.480 --> 00:02:45.110
of the components can then have access
61
00:02:45.110 --> 00:02:48.050
to that context and then it can use it.
62
00:02:48.050 --> 00:02:50.130
So in our case, our context
63
00:02:50.130 --> 00:02:52.190
is gonna be pretty straight forward.
64
00:02:52.190 --> 00:02:54.050
It's simply going to check to see
65
00:02:54.050 --> 00:02:56.120
if a user's logged in or not
66
00:02:56.120 --> 00:02:58.810
and if so, it's gonna let all of the components
67
00:02:58.810 --> 00:03:01.820
that want to know that information,
68
00:03:01.820 --> 00:03:04.210
it's just gonna let 'em know that or not.
69
00:03:04.210 --> 00:03:06.700
Now, you're also gonna see in the next few guides
70
00:03:06.700 --> 00:03:08.430
how we're even gonna be able
71
00:03:08.430 --> 00:03:11.800
to add some additional behavior to the context,
72
00:03:11.800 --> 00:03:15.030
such as being able to log the user out
73
00:03:15.030 --> 00:03:18.120
and then to update our context in that way.
74
00:03:18.120 --> 00:03:19.760
So there's gonna be quite a bit
75
00:03:19.760 --> 00:03:22.960
and this is pretty advanced React material
76
00:03:22.960 --> 00:03:24.470
but it's very helpful
77
00:03:24.470 --> 00:03:27.690
because this is one of the one most helpful things
78
00:03:27.690 --> 00:03:29.600
that you're going to be able to build
79
00:03:29.600 --> 00:03:30.680
into your applications
80
00:03:30.680 --> 00:03:32.491
because you're now gonna be able to spread
81
00:03:32.491 --> 00:03:36.600
and share data across many components
82
00:03:36.600 --> 00:03:38.400
in a really efficient manner.
83
00:03:38.400 --> 00:03:39.233
So in this guide,
84
00:03:39.233 --> 00:03:41.580
we're simply gonna walk through the syntax
85
00:03:41.580 --> 00:03:45.560
and see exactly how the Context API can work
86
00:03:45.560 --> 00:03:47.390
and then over the next few guides,
87
00:03:47.390 --> 00:03:49.140
we're actually gonna implement it
88
00:03:49.140 --> 00:03:53.100
to see if you as an admin are logged in or not.
89
00:03:53.100 --> 00:03:55.500
Now, after this guide is complete,
90
00:03:55.500 --> 00:03:57.980
I actually have some homework for you
91
00:03:57.980 --> 00:04:00.940
and so I want you to go to the docs
92
00:04:00.940 --> 00:04:02.987
for the Context API for React
93
00:04:02.987 --> 00:04:05.880
and I want you to read through them
94
00:04:05.880 --> 00:04:07.420
and look at these examples
95
00:04:07.420 --> 00:04:08.990
and actually really dig into it
96
00:04:08.990 --> 00:04:10.770
because you're gonna see
97
00:04:10.770 --> 00:04:13.480
that they provide some really great code
98
00:04:13.480 --> 00:04:16.140
and some great ways and examples
99
00:04:16.140 --> 00:04:18.538
for how to use the Context API.
100
00:04:18.538 --> 00:04:23.538
So in the show notes, I'll share the link to that.
101
00:04:23.840 --> 00:04:27.220
So let me just drag that off onto another screen
102
00:04:27.220 --> 00:04:30.440
and let's actually start building this out.
103
00:04:30.440 --> 00:04:35.250
So we're gonna start by creating a Context.
104
00:04:35.250 --> 00:04:37.422
So I'm going to come over here
105
00:04:37.422 --> 00:04:40.820
and the way that you start by creating a Context
106
00:04:40.820 --> 00:04:42.420
is you actually have to create
107
00:04:42.420 --> 00:04:45.370
some standard JavaScript files.
108
00:04:45.370 --> 00:04:49.240
So we'll start and in the src directory,
109
00:04:49.240 --> 00:04:52.667
I'm gonna create a new directory and file here.
110
00:04:52.667 --> 00:04:56.300
I'm gonna say context is the directory
111
00:04:56.300 --> 00:05:00.630
and I'm just gonna call this the AdminContext.js.
112
00:05:00.630 --> 00:05:05.130
And then we're also gonna create another directory
113
00:05:05.130 --> 00:05:08.060
and another file in the src directory,
114
00:05:08.060 --> 00:05:11.180
called providers and then I'm gonna call
115
00:05:11.180 --> 00:05:16.173
the file AdminProvider.js.
116
00:05:17.130 --> 00:05:21.190
So these are gonna be the two files.
117
00:05:21.190 --> 00:05:24.450
The Context is kind of the entry point
118
00:05:24.450 --> 00:05:27.280
for that code and then the provider
119
00:05:27.280 --> 00:05:32.280
is where you place all of the actual behavior
120
00:05:32.370 --> 00:05:34.100
and the business logic.
121
00:05:34.100 --> 00:05:34.990
And so in this guide,
122
00:05:34.990 --> 00:05:38.860
we're simply gonna build out a pretty basic implementation
123
00:05:38.860 --> 00:05:42.870
just to kind of see it all working in action.
124
00:05:42.870 --> 00:05:44.750
So both of those files created,
125
00:05:44.750 --> 00:05:48.040
let's actually implement the code
126
00:05:48.040 --> 00:05:50.100
that we're gonna need to get this started.
127
00:05:50.100 --> 00:05:52.480
So in the AdminContext,
128
00:05:52.480 --> 00:05:55.930
we're just gonna import some boilerplate code here.
129
00:05:55.930 --> 00:05:58.890
So we're first going to import
130
00:05:58.890 --> 00:06:01.627
a function called createContext
131
00:06:02.600 --> 00:06:04.560
and all of this is located
132
00:06:04.560 --> 00:06:08.430
in the documentation that I'm gonna provide to you.
133
00:06:08.430 --> 00:06:13.200
So we're gonna say import createContext from react
134
00:06:13.200 --> 00:06:16.400
and then from there, we're gonna create a variable
135
00:06:16.400 --> 00:06:18.633
and I'm gonna call this AdminContext
136
00:06:19.520 --> 00:06:23.460
and I'm simply gonna set this equal to createContext
137
00:06:23.460 --> 00:06:28.010
and we're gonna pass in null as the starting value.
138
00:06:28.010 --> 00:06:31.020
Once again, this is simply some boilerplate code
139
00:06:31.020 --> 00:06:32.250
to get this working.
140
00:06:32.250 --> 00:06:34.870
Everything from a behavior perspective
141
00:06:34.870 --> 00:06:39.050
is gonna be placed inside of the provider.
142
00:06:39.050 --> 00:06:41.890
And then lastly, we simply need to export this.
143
00:06:41.890 --> 00:06:45.600
So I'm gonna say export default AdminContext
144
00:06:45.600 --> 00:06:48.270
and that's all we're going to need here
145
00:06:48.270 --> 00:06:51.500
for our AdminContext file.
146
00:06:51.500 --> 00:06:52.850
Now, in the provider,
147
00:06:52.850 --> 00:06:56.220
this is actually where the business logic is gonna be.
148
00:06:56.220 --> 00:07:01.220
So here I'm gonna say that I want to import React
149
00:07:01.650 --> 00:07:05.980
and then let's say that we wanna useState
150
00:07:05.980 --> 00:07:09.950
and then eventually we're gonna have useEffect
151
00:07:09.950 --> 00:07:12.140
but for right now, let's just say useState
152
00:07:12.140 --> 00:07:14.780
and that's gonna be from react
153
00:07:14.780 --> 00:07:19.440
and then from there, I'll say export default
154
00:07:19.440 --> 00:07:22.840
and we need to take in some props.
155
00:07:22.840 --> 00:07:25.290
So we're gonna take in some props
156
00:07:25.290 --> 00:07:30.290
and then lastly, we're going to return some values.
157
00:07:30.350 --> 00:07:31.660
So right here,
158
00:07:31.660 --> 00:07:34.240
we're actually gonna have to return the context.
159
00:07:34.240 --> 00:07:36.790
So let's go up top and let's import it.
160
00:07:36.790 --> 00:07:39.263
So I'll say import AdminContext
161
00:07:40.560 --> 00:07:45.560
from and then ../contexts/AdminContext,
162
00:07:47.280 --> 00:07:50.130
which is just that file that we just created
163
00:07:50.130 --> 00:07:51.860
with that boilerplate code.
164
00:07:51.860 --> 00:07:53.950
Now, the way that the provider works,
165
00:07:53.950 --> 00:07:56.580
we need to return the context.
166
00:07:56.580 --> 00:07:59.060
So I'm gonna say return
167
00:07:59.060 --> 00:08:03.970
and then I'll say AdminContext.Provider
168
00:08:05.150 --> 00:08:07.300
and then I'm gonna close this off
169
00:08:07.300 --> 00:08:09.180
and then inside of here,
170
00:08:09.180 --> 00:08:13.240
we're going to say props.children.
171
00:08:13.240 --> 00:08:17.800
So this is the base for what is needed here
172
00:08:17.800 --> 00:08:21.470
and don't worry if some of this code looks kind of weird
173
00:08:21.470 --> 00:08:24.777
and you're wondering why we need to do this.
174
00:08:24.777 --> 00:08:26.710
This is one of those examples
175
00:08:26.710 --> 00:08:28.410
where it really is gonna start
176
00:08:28.410 --> 00:08:30.690
to make sense what's happening here
177
00:08:30.690 --> 00:08:35.420
when you see the behavior in the application itself.
178
00:08:35.420 --> 00:08:38.000
So that is what we're going to be doing.
179
00:08:38.000 --> 00:08:40.920
Now, let's just add some sample data here.
180
00:08:40.920 --> 00:08:42.600
So let's use our state.
181
00:08:42.600 --> 00:08:46.200
So I'm gonna say that I want to use a hook,
182
00:08:46.200 --> 00:08:50.710
so I'll say const and I'll say isLoggedIn
183
00:08:50.710 --> 00:08:51.810
and then setIsLoggedIn
184
00:08:55.450 --> 00:08:57.230
and then we'll say useState
185
00:08:58.170 --> 00:09:01.720
and then we'll say by default it's gonna be false
186
00:09:01.720 --> 00:09:03.730
and then in one of the next guides,
187
00:09:03.730 --> 00:09:06.510
you're gonna see how you can actually update that
188
00:09:06.510 --> 00:09:08.150
by calling the API.
189
00:09:08.150 --> 00:09:11.840
And then we also need to export this data.
190
00:09:11.840 --> 00:09:13.960
So I'm gonna create another variable here,
191
00:09:13.960 --> 00:09:15.330
there'll be an object
192
00:09:15.330 --> 00:09:18.730
and I'm gonna list out everything we wanna export.
193
00:09:18.730 --> 00:09:20.430
So I'll say isLoggedIn
194
00:09:20.430 --> 00:09:24.800
is for right now all that we want to export.
195
00:09:24.800 --> 00:09:28.271
And I wanna do, let's say just,
196
00:09:28.271 --> 00:09:30.250
we're gonna call this variable stateValue.
197
00:09:30.250 --> 00:09:33.440
And then lastly, inside of the provider
198
00:09:33.440 --> 00:09:36.640
as a prop, what we're gonna pass in here
199
00:09:36.640 --> 00:09:38.680
is something that says
200
00:09:38.680 --> 00:09:40.470
that this is gonna be our value.
201
00:09:40.470 --> 00:09:44.060
So value is equal to stateValue.
202
00:09:45.770 --> 00:09:48.750
And hit Save and this is really everything
203
00:09:48.750 --> 00:09:50.860
that we need to get started.
204
00:09:50.860 --> 00:09:54.380
Now, with the way that the Context API works
205
00:09:54.380 --> 00:09:57.760
is you create the context, you create the provider,
206
00:09:57.760 --> 00:09:59.610
just like we've done right here.
207
00:09:59.610 --> 00:10:03.340
And then to get this functioning in the application,
208
00:10:03.340 --> 00:10:05.750
you have to tell the app
209
00:10:05.750 --> 00:10:08.750
where you want this to reside
210
00:10:08.750 --> 00:10:10.395
and so with Context,
211
00:10:10.395 --> 00:10:15.395
we are going to wrap up our entire application
212
00:10:15.460 --> 00:10:17.690
with this provider.
213
00:10:17.690 --> 00:10:21.510
So to do this, let's go to the bootstrap file.
214
00:10:21.510 --> 00:10:24.450
This is located in the src directory
215
00:10:24.450 --> 00:10:27.030
and it's a bootstrap.js.
216
00:10:27.030 --> 00:10:29.310
Now you notice one thing that I did here
217
00:10:29.310 --> 00:10:31.420
with the code that is actually an issue,
218
00:10:31.420 --> 00:10:32.810
you may have caught it or not,
219
00:10:32.810 --> 00:10:35.820
we're actually using BrowserRouter here
220
00:10:35.820 --> 00:10:37.430
in the bootstrap file
221
00:10:37.430 --> 00:10:41.860
but then also if you open up the app file,
222
00:10:41.860 --> 00:10:43.210
we're using it there
223
00:10:43.210 --> 00:10:46.390
and so we don't actually need that one
224
00:10:46.390 --> 00:10:47.223
in the bootstrap,
225
00:10:47.223 --> 00:10:49.690
so we're gonna get rid of this entirely
226
00:10:49.690 --> 00:10:51.310
and everything will still work
227
00:10:51.310 --> 00:10:52.910
because we're calling it from the app.
228
00:10:52.910 --> 00:10:55.840
That's just a little cleanup item that we can do.
229
00:10:55.840 --> 00:10:58.040
Now let's import our provider.
230
00:10:58.040 --> 00:10:59.930
So inside of the bootstrap file,
231
00:10:59.930 --> 00:11:04.490
I'm gonna say import AdminProvider from
232
00:11:04.490 --> 00:11:08.800
and this is gonna be just one ./
233
00:11:08.800 --> 00:11:12.670
and that's gonna be the providers directory
234
00:11:12.670 --> 00:11:14.370
and the AdminProvider.
235
00:11:14.370 --> 00:11:17.545
And what we can do is right where we had the BrowserRouter,
236
00:11:17.545 --> 00:11:22.545
just replace that with the AdminProvider and hit Save.
237
00:11:23.490 --> 00:11:26.450
So what a provider does
238
00:11:26.450 --> 00:11:28.810
is in the way that you call it
239
00:11:28.810 --> 00:11:31.940
is you wrap up any components
240
00:11:31.940 --> 00:11:35.750
that you want to have access to its data
241
00:11:35.750 --> 00:11:37.500
and now we're using,
242
00:11:37.500 --> 00:11:39.670
we're wrapping up the entire application,
243
00:11:39.670 --> 00:11:43.320
which means that every component in our application
244
00:11:43.320 --> 00:11:46.800
will have access to any data
245
00:11:46.800 --> 00:11:48.810
that we put inside of here,
246
00:11:48.810 --> 00:11:50.730
which makes it very helpful
247
00:11:50.730 --> 00:11:52.160
and very easy to work with.
248
00:11:52.160 --> 00:11:55.240
But say that you're working on a very large application
249
00:11:55.240 --> 00:11:56.430
and I've done this
250
00:11:56.430 --> 00:11:59.210
and we may even do this later on in this course.
251
00:11:59.210 --> 00:12:03.510
Say that you're working with the drag-and-drop functionality
252
00:12:03.510 --> 00:12:04.540
that we wanna add
253
00:12:04.540 --> 00:12:07.040
and you only wanna wrap up maybe four
254
00:12:07.040 --> 00:12:09.680
or five components with a context
255
00:12:09.680 --> 00:12:12.180
and with a provider, you can do that as well.
256
00:12:12.180 --> 00:12:15.810
You can say I just wanna wrap up these set of components
257
00:12:15.810 --> 00:12:17.620
and then all of those components
258
00:12:17.620 --> 00:12:19.320
that are nested in side of it
259
00:12:19.320 --> 00:12:20.880
will have access to the data
260
00:12:20.880 --> 00:12:22.210
and that's a really nice way
261
00:12:22.210 --> 00:12:25.540
of deciding which components have access
262
00:12:25.540 --> 00:12:26.930
and which ones don't.
263
00:12:26.930 --> 00:12:29.840
In this case, I want the entire application
264
00:12:29.840 --> 00:12:33.130
to know if you are logged in as an admin
265
00:12:33.130 --> 00:12:35.810
or if not because as you're gonna see later on,
266
00:12:35.810 --> 00:12:37.400
that's how we're going to be able
267
00:12:37.400 --> 00:12:40.410
to decide which routes can be accessed
268
00:12:40.410 --> 00:12:43.060
because we don't want a non-admin
269
00:12:43.060 --> 00:12:46.440
to be able to create blog posts for you, for example.
270
00:12:46.440 --> 00:12:50.010
And so that's something that we want to be able
271
00:12:50.010 --> 00:12:51.466
to protect against.
272
00:12:51.466 --> 00:12:56.100
Okay, so we've now wrapped up our entire application
273
00:12:56.100 --> 00:12:58.500
inside of this AdminProvider.
274
00:12:58.500 --> 00:13:00.260
We have some base state here,
275
00:13:00.260 --> 00:13:02.570
which is isLoggedIn,
276
00:13:02.570 --> 00:13:04.200
which is set to false.
277
00:13:04.200 --> 00:13:05.420
Now let's test this out.
278
00:13:05.420 --> 00:13:07.350
Let's see if this is actually working.
279
00:13:07.350 --> 00:13:09.590
I'm gonna open up the home,
280
00:13:09.590 --> 00:13:12.470
which is because it's in the application,
281
00:13:12.470 --> 00:13:13.720
it's one of the components,
282
00:13:13.720 --> 00:13:16.040
it should now have access to this.
283
00:13:16.040 --> 00:13:18.120
So how can we call this data?
284
00:13:18.120 --> 00:13:21.600
Well, inside of the home component,
285
00:13:21.600 --> 00:13:23.320
I'm gonna add a comma up here
286
00:13:23.320 --> 00:13:26.710
and I'm gonna use a tool called useContext,
287
00:13:28.020 --> 00:13:29.550
which is another hook
288
00:13:29.550 --> 00:13:33.790
and then let's import that AdminContext.
289
00:13:33.790 --> 00:13:36.463
I'm gonna say import AdminContext
290
00:13:37.530 --> 00:13:42.530
from ../contexts/AdminContext
291
00:13:43.760 --> 00:13:47.600
and then inside of the function component itself,
292
00:13:47.600 --> 00:13:50.660
I'm gonna be able to perform some destructuring here.
293
00:13:50.660 --> 00:13:53.220
So technically I could do something like this.
294
00:13:53.220 --> 00:13:57.160
I could say adminContext, create a variable here.
295
00:13:57.160 --> 00:13:59.607
Set this equal to useContext
296
00:14:00.770 --> 00:14:03.500
and then pass in the context
297
00:14:03.500 --> 00:14:05.230
that I'm wanting to use.
298
00:14:05.230 --> 00:14:08.120
And then I could come down here
299
00:14:08.120 --> 00:14:11.280
and instead of this JWT token
300
00:14:11.280 --> 00:14:12.640
'cause we're not gonna be using that
301
00:14:12.640 --> 00:14:14.330
in this component anymore,
302
00:14:14.330 --> 00:14:17.940
I'm gonna say is logged in?
303
00:14:17.940 --> 00:14:20.320
And then inside of the curly brackets,
304
00:14:20.320 --> 00:14:21.803
I could say adminContext,
305
00:14:22.980 --> 00:14:25.380
which is our variable right here
306
00:14:25.380 --> 00:14:27.000
and then I could say .isLoggedIn
307
00:14:30.310 --> 00:14:31.460
and that would work
308
00:14:31.460 --> 00:14:35.020
but because this is passing back an object,
309
00:14:35.020 --> 00:14:37.830
what we can do is we can perform destructing.
310
00:14:37.830 --> 00:14:39.540
So I can just copy this,
311
00:14:39.540 --> 00:14:41.620
I can use curly brackets
312
00:14:41.620 --> 00:14:43.120
and I can say const isLoggedIn
313
00:14:44.230 --> 00:14:47.100
and now I can simply have access to this
314
00:14:47.100 --> 00:14:48.580
just like it's a variable.
315
00:14:48.580 --> 00:14:51.240
Just like it's a variable or a piece of state
316
00:14:51.240 --> 00:14:53.250
inside of this component.
317
00:14:53.250 --> 00:14:54.830
Now, to make this work,
318
00:14:54.830 --> 00:14:57.990
because Boolean values won't actually show up
319
00:14:57.990 --> 00:15:02.190
on the screen, we need to use JSON.stringify
320
00:15:03.290 --> 00:15:04.970
and then wrap this up to get this
321
00:15:04.970 --> 00:15:06.700
so that it actually shows.
322
00:15:06.700 --> 00:15:08.070
So here's the moment of truth.
323
00:15:08.070 --> 00:15:09.320
Let's see if it's working.
324
00:15:09.320 --> 00:15:12.610
So I'm gonna hit Save here and look at that.
325
00:15:12.610 --> 00:15:15.370
We have access to the data.
326
00:15:15.370 --> 00:15:18.560
So even though we didn't pass in any props,
327
00:15:18.560 --> 00:15:20.500
we didn't go to the router
328
00:15:20.500 --> 00:15:23.860
and pass props directly into this home component
329
00:15:23.860 --> 00:15:25.290
or anything like that,
330
00:15:25.290 --> 00:15:28.450
simply because in our bootstrap file,
331
00:15:28.450 --> 00:15:31.100
we wrapped the entire application
332
00:15:31.100 --> 00:15:34.710
in this provider, every one of our pages
333
00:15:34.710 --> 00:15:38.950
and our components now has access to the data.
334
00:15:38.950 --> 00:15:41.810
So what we're gonna be able to do over the next few guides
335
00:15:41.810 --> 00:15:43.390
is we're going to be able
336
00:15:43.390 --> 00:15:47.420
to build some behavior into this provider
337
00:15:47.420 --> 00:15:49.010
where we perform tasks
338
00:15:49.010 --> 00:15:52.090
such as checking to see if the user's logged in or not,
339
00:15:52.090 --> 00:15:54.970
giving the ability to log the user out
340
00:15:54.970 --> 00:15:56.830
and different tasks like that
341
00:15:56.830 --> 00:16:00.760
and then any component or page underneath that,
342
00:16:00.760 --> 00:16:03.360
so essentially everything in the application
343
00:16:03.360 --> 00:16:06.760
can then have access to those rules
344
00:16:06.760 --> 00:16:08.130
that we set up here.
345
00:16:08.130 --> 00:16:10.410
So very nice job if you went through that.
346
00:16:10.410 --> 00:16:12.020
I want to reiterate
347
00:16:12.020 --> 00:16:15.950
that you should not worry if some of this code
348
00:16:15.950 --> 00:16:18.670
didn't really make a ton of sense yet.
349
00:16:18.670 --> 00:16:21.530
This is a pretty advanced concept
350
00:16:21.530 --> 00:16:23.550
and topic in React
351
00:16:23.550 --> 00:16:25.400
but I wanted to introduce it to you now
352
00:16:25.400 --> 00:16:27.510
because I wanted to show you the right way
353
00:16:27.510 --> 00:16:30.080
to build an authentication system
354
00:16:30.080 --> 00:16:33.080
and what we're gonna do is over the next few guides,
355
00:16:33.080 --> 00:16:36.300
we're really going to dive into these components
356
00:16:36.300 --> 00:16:38.410
and these contexts and providers
357
00:16:38.410 --> 00:16:41.590
so that it will start to make a little bit more sense.
358
00:16:41.590 --> 00:16:44.360
My number one goal for this guide for you
359
00:16:44.360 --> 00:16:46.422
was to simply get an idea
360
00:16:46.422 --> 00:16:48.910
for how the Context API works,
361
00:16:48.910 --> 00:16:51.570
how you can wrap up any components
362
00:16:51.570 --> 00:16:54.420
or in our case, an entire application
363
00:16:54.420 --> 00:16:56.450
around these providers
364
00:16:56.450 --> 00:16:59.610
and these contexts so that you can get access
365
00:16:59.610 --> 00:17:01.330
to that data.
366
00:17:01.330 --> 00:17:03.300
So nice job if you went through that.
367
00:17:03.300 --> 00:17:04.960
Before you go into the next guide,
368
00:17:04.960 --> 00:17:09.300
I want you to go through that Context API documentation.
369
00:17:09.300 --> 00:17:11.370
I think that as you go through
370
00:17:11.370 --> 00:17:13.270
and you see some of the examples
371
00:17:13.270 --> 00:17:15.100
that it provides to you,
372
00:17:15.100 --> 00:17:17.510
it's gonna really start to sink in
373
00:17:17.510 --> 00:17:20.240
what the goal of the Context API is,
374
00:17:20.240 --> 00:17:21.415
when you should use it
375
00:17:21.415 --> 00:17:25.603
and some of the syntax features that we walk through.