1 00:00:00,530 --> 00:00:05,720 In last video we spoke about how there are two ways to get information into a context object in two 2 00:00:05,720 --> 00:00:07,540 ways to get information out. 3 00:00:07,550 --> 00:00:12,020 We're not going to start to focus on creating a context object inside of application that's going to 4 00:00:12,020 --> 00:00:16,940 communicate the currently selected language from our app component down to both the button and the field 5 00:00:16,940 --> 00:00:18,020 components. 6 00:00:18,050 --> 00:00:22,930 So to get started I'm going to flip back over to my code editor inside of my SIRC directory. 7 00:00:23,000 --> 00:00:27,250 I'm going to make a new folder called contex like so. 8 00:00:27,260 --> 00:00:33,740 Notice that this is a directory that is a sibling to components inside the context directory and then 9 00:00:33,740 --> 00:00:37,670 going to create a new file called language context. 10 00:00:37,740 --> 00:00:43,730 J.S. the purpose of this file is to create a context object and export it. 11 00:00:43,730 --> 00:00:49,190 The reason we are putting this into a separate file is that we can import the Context object into only 12 00:00:49,190 --> 00:00:52,700 the component files that we care about in our application. 13 00:00:52,700 --> 00:00:58,500 We only want to connect this contact object to our app component and the button and the field. 14 00:00:58,550 --> 00:01:01,970 No other component needs to get access to the language context. 15 00:01:01,970 --> 00:01:06,320 So that is why we are creating it inside of a separate file so that we can only make use of it where 16 00:01:06,320 --> 00:01:11,300 we actually want to connect it then to create my Context object. 17 00:01:11,330 --> 00:01:17,390 I'm going to import re-act from react at the top of the file and then I will simply say export default 18 00:01:17,630 --> 00:01:21,010 re-act does create context like so. 19 00:01:21,350 --> 00:01:22,710 And that is pretty much it. 20 00:01:22,730 --> 00:01:26,230 That is all we have to do to create a context object. 21 00:01:26,390 --> 00:01:30,430 Like I said the challenge in understanding context is not in creating it. 22 00:01:30,500 --> 00:01:34,790 It is understanding how we get information into it and out of it. 23 00:01:34,790 --> 00:01:36,790 That's the real challenge. 24 00:01:36,820 --> 00:01:41,870 So now that we have created our context object we are going to get some information into the object 25 00:01:42,050 --> 00:01:44,340 by setting up a default value. 26 00:01:44,660 --> 00:01:50,020 We can create a default value by passing it directly into the create context call. 27 00:01:50,090 --> 00:01:55,940 So if you create context right here I'm going to pass a string of English like so. 28 00:01:55,940 --> 00:02:01,700 So that's going to indicate to my two components are my two nested children of the field and a button 29 00:02:01,910 --> 00:02:07,680 that by default the selected language that we should be showing on the screen is English. 30 00:02:08,210 --> 00:02:15,200 So the default value for the Context object is this string English now that we have put a default value 31 00:02:15,230 --> 00:02:19,630 into the Context object we're going to connect it to our button component. 32 00:02:19,620 --> 00:02:23,540 First we're going to do the same process for the field but we'll start with the button we're going to 33 00:02:23,540 --> 00:02:30,420 connect that context object to our nested child of button by making use of this this context property. 34 00:02:30,530 --> 00:02:35,840 So we're going to making use of this context to get information out of the Context object rather than 35 00:02:35,840 --> 00:02:37,670 creating this consumer component thing. 36 00:02:37,690 --> 00:02:43,400 Over here we'll talk about why we will use a consumer component later on. 37 00:02:44,100 --> 00:02:44,420 OK. 38 00:02:44,450 --> 00:02:51,710 So inside of my components directory I will find my button dodgiest file and then at the top I'm going 39 00:02:51,710 --> 00:02:55,580 to import the language context object that we just created. 40 00:02:55,580 --> 00:03:01,360 So I'm going to import language context from up one directory contex. 41 00:03:01,400 --> 00:03:05,700 Make sure you get the on there if you spelt the directory name over here with an S as well. 42 00:03:06,750 --> 00:03:10,890 And then I'm going to import the language context file like so. 43 00:03:12,410 --> 00:03:16,930 Now to hook up the language context object to my button component. 44 00:03:16,950 --> 00:03:19,880 Let's look at a quick diagram. 45 00:03:19,880 --> 00:03:21,870 All right so here's what we're going to do. 46 00:03:21,890 --> 00:03:27,440 We're going to first set up something called a context type that is going to essentially link our button 47 00:03:27,440 --> 00:03:29,740 component to the Context object. 48 00:03:30,170 --> 00:03:34,130 And then to actually reference the information that is inside of the Context object. 49 00:03:34,130 --> 00:03:37,310 We're going to make use of the this context property. 50 00:03:37,310 --> 00:03:43,910 So again the first thing we do is set up this context type property back inside of my component file. 51 00:03:44,950 --> 00:03:50,800 I'm going to add a little bit of space inside of my component class and then I'll add in static context 52 00:03:50,890 --> 00:04:00,150 type equals language context like so so this is how we Hookup a context object to a class component. 53 00:04:00,240 --> 00:04:06,540 We say static context type and then we just print out the Context object itself that we had created 54 00:04:06,540 --> 00:04:08,550 inside that other file. 55 00:04:08,550 --> 00:04:13,440 Now remember the context type property here much like many other properties we have created inside of 56 00:04:13,440 --> 00:04:16,440 Riak components is a very special property name. 57 00:04:16,590 --> 00:04:21,650 So if you call this anything else this context stuff is not going to work correctly if you called it 58 00:04:21,660 --> 00:04:25,010 something like my context right. 59 00:04:25,020 --> 00:04:26,060 Nope not going to work. 60 00:04:26,080 --> 00:04:29,550 Ask to be called exactly contex type like so. 61 00:04:29,550 --> 00:04:33,570 Now you may have not ever seen the static keyword syntax before. 62 00:04:33,630 --> 00:04:39,560 Essentially what static context typewrite here does is it adds a property to our class itself. 63 00:04:39,570 --> 00:04:45,030 Remember any time that we create a instance of a component by writing out something like button inside 64 00:04:45,030 --> 00:04:52,010 of GSX that is creating an instance of the Button class and each time we add methods to a class or any 65 00:04:52,050 --> 00:04:56,610 time that we update say or state property or anything like that we are changing properties that are 66 00:04:56,610 --> 00:05:00,630 assigned to an instance of our class when we make use of the static. 67 00:05:00,630 --> 00:05:01,520 You were right here. 68 00:05:01,590 --> 00:05:05,640 We are adding a property directly to the class itself. 69 00:05:05,640 --> 00:05:11,850 So the line of code that you see right there is identical to writing out button Dom context type equals 70 00:05:11,940 --> 00:05:14,140 language context. 71 00:05:14,220 --> 00:05:19,680 You can set up a context type property by making use of either methods that you see right here so we 72 00:05:19,680 --> 00:05:25,990 can write out either static contex type inside of the class declaration or after creating the class. 73 00:05:26,010 --> 00:05:33,920 We can then write out the class name Dom context type and then hook up the context like so you can do 74 00:05:33,920 --> 00:05:34,570 it either way. 75 00:05:34,610 --> 00:05:35,460 Totally up to you. 76 00:05:35,510 --> 00:05:39,860 Personally I make like making use of the static context type because it puts that declaration at the 77 00:05:39,860 --> 00:05:40,880 very top of the file. 78 00:05:40,880 --> 00:05:41,740 Very easy to read. 79 00:05:41,750 --> 00:05:43,170 Very easy to find. 80 00:05:43,580 --> 00:05:50,540 So now that we have added a reference of context type to our context object to our component class our 81 00:05:50,540 --> 00:05:56,510 component class can now reference this context and get access to the data inside of that context object 82 00:05:56,780 --> 00:05:59,280 which in this case is this string English. 83 00:05:59,630 --> 00:06:02,740 So to make sure that's the case I'm going to find my render method. 84 00:06:02,870 --> 00:06:08,690 And inside there are going to cons. log out this duck context like so. 85 00:06:08,710 --> 00:06:10,870 All right so now it's time to test this out. 86 00:06:10,930 --> 00:06:13,150 I'm going to save the button dachas file. 87 00:06:13,300 --> 00:06:15,300 I'm going to save the language context. 88 00:06:15,350 --> 00:06:18,600 Yes file and then I'll flip back over to my browser. 89 00:06:19,060 --> 00:06:23,620 I'm going to make sure I refresh the page and then when I do so I should see a console log over here 90 00:06:23,830 --> 00:06:25,790 of this string English. 91 00:06:25,900 --> 00:06:27,280 All right so that's pretty much it. 92 00:06:27,280 --> 00:06:29,320 That is a very basic example. 93 00:06:29,590 --> 00:06:32,340 We have now created a context object. 94 00:06:32,530 --> 00:06:37,870 We got a default value into it by passing the default value into the context object when we created 95 00:06:37,870 --> 00:06:38,680 it. 96 00:06:38,680 --> 00:06:44,650 And then we got that default value out of that context object by setting up the context type property 97 00:06:44,830 --> 00:06:47,020 to link our component to the context object. 98 00:06:47,230 --> 00:06:52,750 And we got reference to the actual data inside the context object with this context. 99 00:06:52,750 --> 00:06:58,030 Now one thing I want to kind of clear here is that I'm giving you like a super detailed academic definition 100 00:06:58,090 --> 00:06:59,400 of what's going on. 101 00:06:59,440 --> 00:07:04,630 So if it feels like this is kind of confusing I want to tell you it's really not you know at the end 102 00:07:04,630 --> 00:07:05,760 the day. 103 00:07:05,830 --> 00:07:11,050 Let's just like really simplify this create the context object define context type boom. 104 00:07:11,080 --> 00:07:12,380 You get this context. 105 00:07:12,430 --> 00:07:15,240 That's it that's all that's really going on. 106 00:07:15,280 --> 00:07:15,540 All right. 107 00:07:15,550 --> 00:07:20,710 Now let's going to show you very quickly is that we can very easily change the string that we make use 108 00:07:20,710 --> 00:07:25,530 of when we create our context to change the default value inside that context object. 109 00:07:25,570 --> 00:07:30,370 So for example rather than passing in a string of English I could say simply Dutch. 110 00:07:30,430 --> 00:07:36,670 So if I change that and then save the file we can flip back over NLC a console log if Dutch We do not 111 00:07:36,670 --> 00:07:39,460 have to pass in strings to a context object. 112 00:07:39,460 --> 00:07:46,480 For values that get shared we can use any type of valid javascript value so we can do an object with 113 00:07:46,480 --> 00:07:48,730 a color of red. 114 00:07:48,730 --> 00:07:51,350 So I can save that and I'll see color of red. 115 00:07:51,570 --> 00:07:58,250 We can do an array that has one 2 three. 116 00:07:58,460 --> 00:08:00,770 So I can save that and see one 2 three over here. 117 00:08:00,770 --> 00:08:02,280 So I think you get the idea pretty quickly. 118 00:08:02,300 --> 00:08:06,520 We can share any information that we want inside of our context object. 119 00:08:06,620 --> 00:08:11,060 But for our application it makes sense to have a default value of English. 120 00:08:11,520 --> 00:08:14,330 OK so now that we've got a very simple example put together. 121 00:08:14,450 --> 00:08:15,450 Let's take a quick pause. 122 00:08:15,470 --> 00:08:19,730 When we come back in the next section we're going to make sure that our button component updates itself 123 00:08:19,760 --> 00:08:21,750 based upon that context property. 124 00:08:21,860 --> 00:08:26,400 And then after that we'll make sure that we repeat the same process for our field component as well. 125 00:08:26,690 --> 00:08:28,600 So quick pulse and I'll see you in just a minute.