1 00:00:00,740 --> 00:00:06,200 In this video we're going to start talking about the contex system in re-act the context system was 2 00:00:06,260 --> 00:00:12,260 recently introduced with re-act version 16 a previous version of context existed in releases before 3 00:00:12,260 --> 00:00:12,660 that. 4 00:00:12,680 --> 00:00:18,770 But in version 16 we got a new version of context or essentially a revamped version of context. 5 00:00:18,770 --> 00:00:23,060 When this feature came out inside of reacts everyone kind of rejoiced and said oh we don't have to use 6 00:00:23,090 --> 00:00:26,080 redux anymore but that's a little bit of a stretch. 7 00:00:26,120 --> 00:00:30,620 So in this video and the next couple are going to tell you more about the context system and help you 8 00:00:30,620 --> 00:00:36,080 understand what void or what purpose it really fills inside the re-act world. 9 00:00:36,080 --> 00:00:37,480 So let's get to it. 10 00:00:37,580 --> 00:00:43,610 Now the first thing I want to understand is exactly what the context system is Draut this course we've 11 00:00:43,610 --> 00:00:48,710 been making use of the props system in react and with the props system you and I have been passing pick 12 00:00:48,710 --> 00:00:54,240 data from a parent component to a direct child component with the context system. 13 00:00:54,250 --> 00:01:01,340 We are doing almost the exact same thing the context system is all about communicating information. 14 00:01:01,430 --> 00:01:07,130 The only difference is that with the contex system we are passing data from any parent component to 15 00:01:07,220 --> 00:01:11,180 any arbitrary nested child component. 16 00:01:11,180 --> 00:01:14,780 Now of course when just show you these text definitions right here they probably don't make a lot of 17 00:01:14,780 --> 00:01:15,370 sense. 18 00:01:15,410 --> 00:01:18,610 So let's take a look at this in Diagram format. 19 00:01:19,330 --> 00:01:19,590 OK. 20 00:01:19,610 --> 00:01:24,680 So this right here is a diagram of some imaginary application that is communicating data by using the 21 00:01:24,680 --> 00:01:26,530 props system at the very top. 22 00:01:26,530 --> 00:01:32,510 We've got some app component that is showing a header and the header is showing some button component. 23 00:01:32,570 --> 00:01:35,660 So all three these white boxes are Riak components. 24 00:01:35,960 --> 00:01:41,090 Let's imagine for a second that the app component wants to customize the text shown inside the button 25 00:01:41,660 --> 00:01:47,900 to do so we might create a new prop called button text and pass that from the app component down into 26 00:01:47,900 --> 00:01:48,610 the header. 27 00:01:48,950 --> 00:01:51,590 So there's the button text Propp right there. 28 00:01:51,590 --> 00:01:55,970 It would then be the responsibility of the header to make sure that it passed that prompt down into 29 00:01:55,970 --> 00:01:59,600 the button to customize how the button is displayed on the screen. 30 00:01:59,630 --> 00:02:00,740 So nothing new about this. 31 00:02:00,740 --> 00:02:07,850 This is the same old Propp system that you are used to data going from a direct parent to a direct child. 32 00:02:07,850 --> 00:02:12,110 So let's look at the same application or the same little hierarchy right here using the context system 33 00:02:12,140 --> 00:02:13,670 instead. 34 00:02:13,900 --> 00:02:18,410 All right so here it is with context with the context system we are still communicating information 35 00:02:18,590 --> 00:02:21,110 from a parent component down to a child. 36 00:02:21,170 --> 00:02:26,990 The only difference is that with context we can communicate from any arbitrary parent to any arbitrary 37 00:02:27,050 --> 00:02:27,910 child. 38 00:02:27,950 --> 00:02:31,370 It does not have to be a direct one to one communication. 39 00:02:31,370 --> 00:02:34,130 In other words parent down to direct child. 40 00:02:34,130 --> 00:02:39,980 In other words with the contex system we can communicate data from some very high up parent down to 41 00:02:39,980 --> 00:02:42,900 some very deeply nested child. 42 00:02:42,950 --> 00:02:48,560 Now that in total is the context system that is the purpose of the context system. 43 00:02:48,560 --> 00:02:52,140 It is all about communication of data and that is it. 44 00:02:52,310 --> 00:02:56,540 As I said just a little bit ago a lot of people have said oh yeah we don't have to use redux anymore 45 00:02:56,570 --> 00:02:59,140 or anything like that with context. 46 00:02:59,210 --> 00:03:01,040 But that's not necessarily the case. 47 00:03:01,040 --> 00:03:04,100 The contex system is just about communication. 48 00:03:04,100 --> 00:03:09,610 There are some patterns that we can use now with context that we're not quite so easy before. 49 00:03:09,770 --> 00:03:12,630 But at its core context is just like props. 50 00:03:12,650 --> 00:03:16,670 It's just about communicating information and nothing else. 51 00:03:16,670 --> 00:03:21,200 Now in order to get a better idea of how we actually make use of context let's take a quick pause right 52 00:03:21,200 --> 00:03:25,250 here and when we come back the next section we'll talk about a little application that we're going to 53 00:03:25,250 --> 00:03:26,060 put together. 54 00:03:26,120 --> 00:03:28,070 So quick pause and I'll see you in just a minute.