1 00:00:01,030 --> 00:00:04,470 In this video we're gonna make a new component called blog post provider. 2 00:00:04,480 --> 00:00:08,460 This thing is going to share some information with all the different components inside of our application. 3 00:00:08,780 --> 00:00:13,660 So to create that I'm gonna flip back over to my editor and inside my SRT directory I'm gonna make a 4 00:00:13,660 --> 00:00:15,910 new folder called context. 5 00:00:15,910 --> 00:00:20,380 So we're gonna place this new component there are gonna create inside this context directory. 6 00:00:20,380 --> 00:00:24,430 You might be curious why we're placing it inside this folder as opposed to a components directory or 7 00:00:24,430 --> 00:00:25,500 something like that. 8 00:00:25,510 --> 00:00:27,040 Well it's really simple. 9 00:00:27,040 --> 00:00:31,840 Usually when we make a context that's going to handle data or generally just going to have like one 10 00:00:31,840 --> 00:00:37,420 copy of that thing floating around and so we usually want to isolate or hold all these different data 11 00:00:37,420 --> 00:00:40,570 related components inside the context directory. 12 00:00:40,570 --> 00:00:47,860 So inside that directory I'm gonna make a new file called blog context dot J.S. then inside of here 13 00:00:47,920 --> 00:00:54,650 I'm going to import react from react the reactor library has a function called create contexts. 14 00:00:54,760 --> 00:00:58,310 That's what we're going to use to create this first context object. 15 00:00:58,540 --> 00:01:04,750 So I'm going to create a new variable called blog context and it's going to come from react dot create 16 00:01:05,470 --> 00:01:11,580 context like so so you can think of this object right here as like a pipe of sorts. 17 00:01:11,620 --> 00:01:16,840 This is going to be an object that's going to be responsible for essentially that line right there. 18 00:01:16,930 --> 00:01:22,150 It's what's going to essentially shepherd or move information from this blog post provider thing down 19 00:01:22,150 --> 00:01:29,120 to this blog list down here after creating my blog context and then going to create a new component 20 00:01:29,120 --> 00:01:35,410 inside of here called blog provider. 21 00:01:35,480 --> 00:01:35,720 OK. 22 00:01:35,750 --> 00:01:39,640 So this is the component that's going to be that thing right there. 23 00:01:40,370 --> 00:01:45,650 Then inside of here I'm going to return blog context. 24 00:01:46,870 --> 00:01:55,030 Dot provider and I'm going to write out in opening and closing tag and inside there I'm going to first 25 00:01:55,030 --> 00:02:01,860 receive a prop or from our props object right here called children and then inside of the opening closing 26 00:02:01,860 --> 00:02:05,120 tag I'm going to place children like so OK. 27 00:02:05,140 --> 00:02:07,900 So we just did two things here they're probably a little bit mysterious. 28 00:02:07,910 --> 00:02:09,350 First off what's children. 29 00:02:09,500 --> 00:02:12,260 And secondly what is blog context dot provider. 30 00:02:12,410 --> 00:02:15,350 Let's first discuss what this children thing is. 31 00:02:15,350 --> 00:02:16,010 All right. 32 00:02:16,010 --> 00:02:19,610 So that children thing is 100 percent unrelated to context. 33 00:02:19,670 --> 00:02:21,730 This is a different feature in react. 34 00:02:21,770 --> 00:02:26,500 We're just taking advantage of it here because it makes a lot of sense to use with this context system. 35 00:02:26,510 --> 00:02:28,910 So quick example of what children is. 36 00:02:28,910 --> 00:02:34,280 I want you to imagine that we've got some component called app and maybe inside of app we create something 37 00:02:34,280 --> 00:02:36,030 called Custom component. 38 00:02:36,110 --> 00:02:42,290 So we've got an opening tag and a closing tag and then inside those opening and closing tags we might 39 00:02:42,290 --> 00:02:47,480 pass in some element called text whenever we use this kind of syntax right here. 40 00:02:47,690 --> 00:02:51,320 The app component is going to essentially render our custom component. 41 00:02:51,320 --> 00:02:51,590 Right. 42 00:02:51,590 --> 00:02:53,000 No surprise there. 43 00:02:53,000 --> 00:02:58,280 But here's the really surprising thing that text element because it is wrapped inside of custom component 44 00:02:58,550 --> 00:03:05,780 is going to be passed as a prop from app down into custom component as a prop called children so we 45 00:03:05,780 --> 00:03:11,210 can use this technique right here to allow ourselves to make custom components just like this and accept 46 00:03:11,210 --> 00:03:14,600 some other component more or less as an argument. 47 00:03:14,630 --> 00:03:20,510 And again it's going to show up inside of custom component as a prop called Children So with that in 48 00:03:20,520 --> 00:03:22,280 mind taking a look at this code right here. 49 00:03:22,290 --> 00:03:28,080 Essentially all we've done is created a component that can accept another component more or less as 50 00:03:28,080 --> 00:03:32,670 an argument in that other argument is going to be shown inside of our blog provider 51 00:03:35,430 --> 00:03:35,760 OK. 52 00:03:35,790 --> 00:03:39,990 So now that we've created this component I'm going to export it from this file and then we're going 53 00:03:39,990 --> 00:03:45,510 to make use of it inside of our app dot J.S. file so to export this thing I'm gonna put the export keyword 54 00:03:45,510 --> 00:03:46,700 right here. 55 00:03:46,710 --> 00:03:51,520 Now notice that I'm not using export default I'm just using the export keyword. 56 00:03:51,570 --> 00:03:55,890 The reason for that is that we're going to eventually export that object right there at the blog context 57 00:03:56,340 --> 00:04:01,520 and we're going to export that thing as our default from this file. 58 00:04:01,560 --> 00:04:01,760 All right. 59 00:04:01,770 --> 00:04:03,140 So I just say this. 60 00:04:03,150 --> 00:04:08,700 I'll then flip back over to my apt j ust file and I'm going to import that blog provider that we just 61 00:04:08,700 --> 00:04:09,810 created. 62 00:04:09,810 --> 00:04:15,510 So at the very top I'll say import and I'll place a set of curly braces we're using curly braces here 63 00:04:15,510 --> 00:04:19,440 because we exported blog provider as something called a named export. 64 00:04:19,440 --> 00:04:22,660 So in other words we did not use the export default syntax. 65 00:04:22,710 --> 00:04:26,040 So in order to import it we have to use those curly braces. 66 00:04:26,130 --> 00:04:27,630 So I will import blog provider 67 00:04:31,690 --> 00:04:41,200 from source context blog context then I'm going to come down to that component we created just a second 68 00:04:41,200 --> 00:04:47,230 ago and here's why we added in that children thing I want to make sure that when we display blog provider 69 00:04:47,590 --> 00:04:50,830 it's going to display our app component inside of it. 70 00:04:50,830 --> 00:04:54,220 So I can put down blog provider that's our component. 71 00:04:54,230 --> 00:05:01,220 We just created and I'm going to show the app inside of it like so make sure if you add it on the semicolon 72 00:05:01,250 --> 00:05:08,210 after app make sure you clean that thing up so now we are passing app in as the child to blog provider 73 00:05:08,660 --> 00:05:11,680 so we can almost imagine back inside of our blog provider right here. 74 00:05:11,750 --> 00:05:19,820 We can almost imagine that children is actually app like so so by using this children thing we're essentially 75 00:05:19,820 --> 00:05:22,880 doing exactly what we're showing in this diagram over here. 76 00:05:23,090 --> 00:05:28,430 Our blog provider our blog post provider is wrapping or showing the react stack navigator inside of 77 00:05:28,430 --> 00:05:32,860 it which therefore includes all the other screens and components that we're displaying inside of our 78 00:05:32,860 --> 00:05:38,720 application Gates let's save our app dot j ust file as well and make sure I save everything inside of 79 00:05:38,720 --> 00:05:39,540 here. 80 00:05:39,920 --> 00:05:42,010 I should then be able to flip back over my app. 81 00:05:42,230 --> 00:05:44,180 And right now nothing is different over here. 82 00:05:44,180 --> 00:05:46,220 Everything is still exactly the same. 83 00:05:46,220 --> 00:05:48,500 But most importantly I don't have any errors. 84 00:05:48,670 --> 00:05:53,600 So at this point it probably feels like we didn't really do a whole lot but we did wire up this context 85 00:05:53,690 --> 00:05:54,250 thing. 86 00:05:54,350 --> 00:05:59,090 So let's take a quick pause right here and discuss exactly what we achieved by having this in in the 87 00:05:59,090 --> 00:05:59,690 next video.