1 00:00:00,690 --> 00:00:04,850 In the last video we started talking about the differences between the props system and the contex system 2 00:00:04,860 --> 00:00:05,750 in react. 3 00:00:05,790 --> 00:00:11,130 So remember the prop system is about communicating information from a parent to a direct child whereas 4 00:00:11,130 --> 00:00:17,220 the context system is about communicating information from a parent to a deeply nested child in order 5 00:00:17,220 --> 00:00:19,260 to get a better idea of how the system works. 6 00:00:19,270 --> 00:00:22,990 We're going to start talking about an application that we're going to be building in this video. 7 00:00:23,380 --> 00:00:23,750 OK. 8 00:00:23,760 --> 00:00:28,830 So here's a mockup of the application we're going to make in the next couple of coming videos in our 9 00:00:28,830 --> 00:00:32,010 application which is going to be very simple and very straightforward. 10 00:00:32,070 --> 00:00:37,260 We are going to show a little language selector at the top of the screen next to the text select a language 11 00:00:37,500 --> 00:00:42,480 we are going to show an American flag and a Dutch flag or a Netherlands flag. 12 00:00:42,810 --> 00:00:47,760 Any time the user clicks on the American flag right here we're going to render a form underneath it 13 00:00:47,880 --> 00:00:49,480 in plain English. 14 00:00:49,530 --> 00:00:53,130 So we're going to have a English label and a English text button. 15 00:00:53,490 --> 00:00:58,920 If the user then clicks on the other flag the Dutch flag right here we are going to rerun the form in 16 00:00:58,920 --> 00:01:00,650 the Dutch language instead. 17 00:01:00,870 --> 00:01:06,840 So the label right here of name will go to Nahm and the submit button will go to vore leggin. 18 00:01:06,840 --> 00:01:10,900 Now I'm sorry if you are a native Dutch speaker and I just butchered those pronunciations. 19 00:01:10,950 --> 00:01:15,270 I don't actually speech speak Dutch I just picked that language at random. 20 00:01:15,270 --> 00:01:19,610 Now if you do not want to use the English language or the Dutch language that is totally fine. 21 00:01:19,680 --> 00:01:24,070 When we build this application you can use any languages you want to. 22 00:01:24,230 --> 00:01:26,950 The form itself is not going to have any actual behavior. 23 00:01:27,020 --> 00:01:33,160 So we are really just focused about building in some translation or internationalization to this application. 24 00:01:33,230 --> 00:01:33,820 That's it. 25 00:01:33,860 --> 00:01:35,510 Nothing else. 26 00:01:35,510 --> 00:01:39,650 Now we could definitely build out this application using a single component but we're going to split 27 00:01:39,650 --> 00:01:44,600 this into multiple different components instead just to have a better idea of how the context system 28 00:01:44,600 --> 00:01:46,670 behaves. 29 00:01:46,680 --> 00:01:49,670 So here's how we're going to split this out into separate components. 30 00:01:49,680 --> 00:01:52,250 We're still going to have an overall app component. 31 00:01:52,560 --> 00:01:56,610 The app component is going to have the language selector built into it. 32 00:01:56,610 --> 00:02:01,300 The app component is also going to create a user create component as well. 33 00:02:01,620 --> 00:02:06,690 The user create is going to show a field and a button components inside of it. 34 00:02:06,690 --> 00:02:11,820 The field component is going to render a label and a text input underneath that and the button is going 35 00:02:11,820 --> 00:02:14,430 to be a very simple very straightforward button. 36 00:02:14,700 --> 00:02:20,730 So for components in total now I first want to imagine how we would build out these four components 37 00:02:20,760 --> 00:02:24,880 and communicate information between them using the prop's system. 38 00:02:24,930 --> 00:02:28,900 So here's how we would probably communicate information using the prop's system. 39 00:02:29,130 --> 00:02:34,530 At the very top we've got our app component that has that language selector inside of it so we might 40 00:02:34,680 --> 00:02:40,620 have the user select a language and then communicate the selected language as a prop down into use or 41 00:02:40,620 --> 00:02:43,370 create a language right here is a prop. 42 00:02:43,440 --> 00:02:50,830 It might have a value of something like English or a value of Dutch or whatever language actually gets 43 00:02:50,830 --> 00:02:51,760 selected. 44 00:02:52,090 --> 00:02:57,670 So then the user create would have to take that language data and communicate it down to the field and 45 00:02:57,680 --> 00:02:58,870 button. 46 00:02:58,870 --> 00:03:02,500 But when you really think about this form that we're putting together you'll very quickly realize that 47 00:03:02,560 --> 00:03:07,280 user create doesn't really care about the language that has been selected all at all. 48 00:03:07,360 --> 00:03:11,110 It's only the fields and the button that care about the language. 49 00:03:11,260 --> 00:03:16,540 So this would be a good candidate or a good place to use the context system because we essentially want 50 00:03:16,540 --> 00:03:22,540 to communicate some information from a parent down to a deeply nested child and no intermediate component 51 00:03:22,750 --> 00:03:25,320 cares about the value of that data. 52 00:03:25,390 --> 00:03:30,110 So what we are going to actually do by using the context system is something like this right here. 53 00:03:30,460 --> 00:03:35,860 The app component is going to communicate the selected language directly down to the field and the button 54 00:03:36,160 --> 00:03:41,580 and the user create component is going to have no idea of what the current language is. 55 00:03:42,040 --> 00:03:46,420 OK so that's the idea that so we're going to do now the very last thing I want to do very quickly is 56 00:03:46,510 --> 00:03:51,030 generate a new Riak project so we can get started on this project in the next video. 57 00:03:51,220 --> 00:03:53,310 So I going to flip on over to my terminal. 58 00:03:53,350 --> 00:03:57,130 You'll notice that I've stopped all the running terminal windows from the last application we worked 59 00:03:57,130 --> 00:04:02,740 on and I'm back at a workspace directory of sorts and so inside of this workspace directory are all 60 00:04:02,740 --> 00:04:05,920 the different projects that we've worked on throughout this course. 61 00:04:05,920 --> 00:04:11,980 So once I'm out here I'm going to generate a new project by running create react up and I'll call this 62 00:04:11,980 --> 00:04:14,770 thing about translates like so. 63 00:04:14,830 --> 00:04:16,920 So that's going to start generating our project. 64 00:04:16,930 --> 00:04:20,850 Let's take a quick pause right here and we'll start working on our application in the next video.