1
00:00:00,940 --> 00:00:04,770
In this video we're going to start to understand how we're going to implement this blog post provider.

2
00:00:04,780 --> 00:00:09,460
Remember this is going to be a component that's going to share information with all the different components

3
00:00:09,490 --> 00:00:11,530
or screens inside of application.

4
00:00:11,530 --> 00:00:15,240
So let's take a look at a diagram and understand how this thing is going to work.

5
00:00:16,070 --> 00:00:20,840
So that new component is going to use a new system that we've not used before called context.

6
00:00:21,050 --> 00:00:26,780
Context is very similar to props and so understanding how context works is usually easiest if we kind

7
00:00:26,780 --> 00:00:31,160
of get a quick reminder on props first and then kind of compare and contrast between these two different

8
00:00:31,160 --> 00:00:32,180
systems.

9
00:00:32,210 --> 00:00:36,830
So as a quick reminder on the prop system we've been using this throughout the course the prop system

10
00:00:36,860 --> 00:00:42,160
is all about communicating information from a parent element to an immediate child.

11
00:00:42,200 --> 00:00:46,070
The downside to this prop system and we kind of saw this back on our search screen component inside

12
00:00:46,070 --> 00:00:51,290
the last application is that if we ever want to communicate data down multiple let levels or layers

13
00:00:51,320 --> 00:00:56,210
of components we end up having to write a lot of code and we're essentially writing all that code to

14
00:00:56,210 --> 00:01:02,110
just kind of shepherd around or move around all this data so the prop system is great.

15
00:01:02,170 --> 00:01:08,590
But again if we would need to move data down multiple levels it turns into a little bit of a pain so

16
00:01:08,590 --> 00:01:14,650
the context system solves that problem specifically the context system is all about moving information

17
00:01:14,890 --> 00:01:18,100
from a parent element to a nested child.

18
00:01:18,190 --> 00:01:21,670
So we're essentially talking about this kind of situation right here.

19
00:01:21,850 --> 00:01:27,280
If the blog post provider wanted to share some information with the blog list using only props we would

20
00:01:27,280 --> 00:01:32,200
have to have the blog post provider pass some information to the stack navigator then the stack navigator

21
00:01:32,200 --> 00:01:36,670
would have to pass that to the index screen and then the index screen would pass it to the blog list.

22
00:01:36,670 --> 00:01:42,070
That's using the prop system but with context we can essentially have the blog post provider pass some

23
00:01:42,070 --> 00:01:45,400
data directly down to that blog list component instead.

24
00:01:45,580 --> 00:01:48,850
So it saves us from having to write out a lot of code.

25
00:01:48,910 --> 00:01:52,700
The downside to the content system is that it's a little bit more complicated to setup.

26
00:01:52,990 --> 00:01:57,890
And in particular there's a couple of special terms that are just a little bit confusing okay.

27
00:01:57,900 --> 00:02:02,100
So at this point I just want to highlight the big difference between these two systems perhaps is all

28
00:02:02,100 --> 00:02:04,380
about from a parent to an immediate child.

29
00:02:04,380 --> 00:02:08,520
Context is from a parent to some deeply nested child.

30
00:02:08,520 --> 00:02:10,650
So now we understand the difference between these two.

31
00:02:10,650 --> 00:02:11,720
Let's take another quick pause.

32
00:02:11,730 --> 00:02:16,110
When we come back the next video we're going to set up this context thing inside of a new component

33
00:02:16,140 --> 00:02:18,180
that we're going to call blog post provider.