1 00:00:01,090 --> 00:00:04,960 We've now finished up our first example, but you might have a couple of questions around the code that 2 00:00:04,960 --> 00:00:05,740 we just wrote out. 3 00:00:05,990 --> 00:00:10,090 So in this video, we're going to tackle a couple of different questions that you might have about all 4 00:00:10,090 --> 00:00:10,600 that code. 5 00:00:11,020 --> 00:00:11,440 Here's a list. 6 00:00:11,440 --> 00:00:13,120 The questions are going to go over right here. 7 00:00:13,750 --> 00:00:18,730 We're going to first start off explaining exactly what that app function was inside of our apt that 8 00:00:18,850 --> 00:00:19,180 file. 9 00:00:19,770 --> 00:00:22,840 I'm talking specifically about this function right here. 10 00:00:23,500 --> 00:00:27,070 You'll notice that at the bottom we are returning what looked like HGL right there. 11 00:00:27,440 --> 00:00:29,530 So this whole app function is a little bit mysterious. 12 00:00:30,010 --> 00:00:33,730 Let's take a look at a couple diagrams and get a better understanding of what it is all about. 13 00:00:34,950 --> 00:00:39,090 OK, so the app function referred to as a react component. 14 00:00:39,490 --> 00:00:45,180 It is a react component because it is a plain JavaScript function that returns some JSA X. 15 00:00:46,090 --> 00:00:48,520 Components in REACT have two jobs. 16 00:00:48,760 --> 00:00:53,020 First off, they produce J.S. X, which tells react what we want to show on the screen to the user. 17 00:00:53,500 --> 00:00:59,290 And components also handle user events, such as the user typing into a text input or clicking on a 18 00:00:59,290 --> 00:00:59,640 button. 19 00:01:00,820 --> 00:01:06,910 All components we create are going to be functions that return J.S. X, G.S., X, is that H.T. male 20 00:01:06,940 --> 00:01:07,570 looking stuff? 21 00:01:08,110 --> 00:01:14,440 You can really think of G.S. X as being a set of instructions to tell react exactly what content we 22 00:01:14,440 --> 00:01:16,720 want to show on the screen at any given time. 23 00:01:18,510 --> 00:01:23,400 So if we look at the JSC that we have over here, we were essentially trying to tell react that we wanted 24 00:01:23,400 --> 00:01:26,220 to show a div with some content inside of it. 25 00:01:27,350 --> 00:01:31,580 J X looks very similar to H.T. Male and follows many similar rules. 26 00:01:32,140 --> 00:01:38,300 So for each tag or each element as referred to it, we have a either a closing element, as you see 27 00:01:38,300 --> 00:01:42,140 over here, or we have a self-closing tag, as in the case of the H. 28 00:01:42,180 --> 00:01:47,840 R right here, a self-closing tag is one where we do not have a separate closing element like so. 29 00:01:49,740 --> 00:01:51,810 So what are these G.S. sex elements all about? 30 00:01:52,170 --> 00:01:53,610 Well, quick follow up diagram. 31 00:01:54,880 --> 00:02:00,740 So we make use of sex elements to either tell react that we want to create a normal H.T. male element 32 00:02:01,100 --> 00:02:05,990 such as a div or a span in input, a table where any other age female element. 33 00:02:06,890 --> 00:02:11,660 We can also use J sex elements to tell react that we want to show another component. 34 00:02:12,080 --> 00:02:15,230 And we actually did that several times inside of our app component. 35 00:02:15,830 --> 00:02:17,010 We told using J. 36 00:02:17,060 --> 00:02:18,210 We told to react using J. 37 00:02:18,210 --> 00:02:23,510 RSX that we wanted to show a field component, a translate component in languages. 38 00:02:24,410 --> 00:02:25,910 That's what these things were right here. 39 00:02:26,180 --> 00:02:28,100 Beeld languages and translate. 40 00:02:28,900 --> 00:02:33,260 Now it's really important for us to understand exactly what react does with all this G.S. X. 41 00:02:33,740 --> 00:02:35,240 Let's take a look at one more diagram. 42 00:02:37,910 --> 00:02:43,700 So whenever we return J.S. X from a component react is going to start to iterate over every element 43 00:02:43,940 --> 00:02:47,420 inside that block of G.S. X or every single element. 44 00:02:47,510 --> 00:02:49,400 React is going to ask itself a question. 45 00:02:49,640 --> 00:02:52,430 It's going to say, OK, for this first element right here. 46 00:02:52,490 --> 00:02:53,300 Just this div. 47 00:02:53,870 --> 00:02:55,340 Is this a DOM element? 48 00:02:55,790 --> 00:02:57,680 If it is, then REAC says, OK. 49 00:02:57,740 --> 00:02:58,430 Fantastic. 50 00:02:58,580 --> 00:03:01,320 I'm going to create a div and show it on the screen to the user. 51 00:03:02,370 --> 00:03:05,600 React well, then walk into all the contents of that div. 52 00:03:05,730 --> 00:03:09,810 So in this case, the field tag languages HRR in translate. 53 00:03:10,800 --> 00:03:13,920 And for each of those, it's going to ask itself a very similar question. 54 00:03:14,850 --> 00:03:20,400 React we'll look at that field element right there and ask, is this a DOM element on this case? 55 00:03:20,430 --> 00:03:24,360 No, it's not a standard normal vanilla HGL element. 56 00:03:25,090 --> 00:03:29,430 Instead is a reference to a react component that we built or to be precise. 57 00:03:29,460 --> 00:03:31,380 I built for you for this particular project. 58 00:03:32,470 --> 00:03:38,110 If React decides that a given tag is a component, then React is going to call that component function 59 00:03:38,320 --> 00:03:41,080 and inspect all the JSF X that it gets back. 60 00:03:41,740 --> 00:03:44,050 Let's kind of walk through that process very quickly. 61 00:03:45,630 --> 00:03:47,530 So here's the field element right here. 62 00:03:48,340 --> 00:03:51,590 Let's take a look at the definition for that field component. 63 00:03:52,120 --> 00:03:55,180 We can find the definition for it inside the components directory. 64 00:03:55,840 --> 00:03:57,700 And then the field does James file. 65 00:03:58,860 --> 00:04:05,420 So we have another function over here that returns some J.S. X, so because back inside the apt j ust 66 00:04:05,420 --> 00:04:08,540 file react saw a field component right here. 67 00:04:08,840 --> 00:04:11,030 React is going to call this function right here. 68 00:04:11,630 --> 00:04:16,910 Get back this block of G.S. X and then start to iterate over all the elements inside of your as well. 69 00:04:17,780 --> 00:04:18,360 Really quickly. 70 00:04:18,410 --> 00:04:19,820 Let's walk through that process. 71 00:04:21,820 --> 00:04:25,210 Here is some of the J.S. sex that was returned from the field component. 72 00:04:25,870 --> 00:04:28,130 React is going to walk through all this stuff as well. 73 00:04:28,280 --> 00:04:31,550 So it's going to take a look at that opening div say, is this the DOM element? 74 00:04:31,850 --> 00:04:32,270 Yes. 75 00:04:32,540 --> 00:04:33,890 OK, I'll show that on the screen. 76 00:04:34,390 --> 00:04:35,930 It then moves onto the label right there. 77 00:04:36,380 --> 00:04:37,190 Is this the DOM element. 78 00:04:37,370 --> 00:04:37,790 Yes. 79 00:04:37,880 --> 00:04:40,220 Showed on the screen and then onto the input. 80 00:04:41,490 --> 00:04:46,110 After React has covered or walk through all the jail sex that has returned from the field component, 81 00:04:46,430 --> 00:04:48,300 it will then move on to the next element. 82 00:04:48,820 --> 00:04:52,910 We'll take a look at languages and once again, will say, is this a reactors mean? 83 00:04:52,920 --> 00:04:54,060 Is this a DOM element? 84 00:04:54,540 --> 00:04:55,020 Once again. 85 00:04:55,110 --> 00:04:55,800 No, it's not. 86 00:04:55,980 --> 00:05:01,920 So reactor is going to find the language component function all it get back some G.S. X and then walk 87 00:05:01,920 --> 00:05:03,870 through it in an identical fashion. 88 00:05:04,480 --> 00:05:09,180 It then repeats that entire process over and over again until it has walked through all the different 89 00:05:09,180 --> 00:05:11,690 elements that we returned from the app component. 90 00:05:13,500 --> 00:05:14,910 OK, so there's a whole bunch. 91 00:05:15,330 --> 00:05:17,790 Exactly what was going on with the app function? 92 00:05:19,650 --> 00:05:21,600 They're now going to move on to our next big question. 93 00:05:21,900 --> 00:05:24,120 How did some content get displayed on the screen? 94 00:05:24,360 --> 00:05:29,340 In other words, how did react somehow get this content visible over here? 95 00:05:30,750 --> 00:05:31,050 All right. 96 00:05:31,140 --> 00:05:32,010 Yet another diagram. 97 00:05:33,490 --> 00:05:35,680 So this is another kind of in-depth diagram. 98 00:05:35,820 --> 00:05:36,970 We'll walk through it step by step. 99 00:05:37,940 --> 00:05:43,100 So on the right hand side of Code Sandbox, this preview window right here, we are essentially looking 100 00:05:43,160 --> 00:05:45,320 at a little miniature Web browser. 101 00:05:46,070 --> 00:05:48,080 You'll notice that there's even an address bar right here. 102 00:05:48,170 --> 00:05:49,880 And we can even refresh that page. 103 00:05:50,720 --> 00:05:56,540 So whenever your browser makes a request or tries to load up some content for this page, here's what 104 00:05:56,540 --> 00:05:58,070 has happening behind the scenes. 105 00:05:58,690 --> 00:06:05,600 So in that mini browser window, that little mini window is going to make a HTP request over to Code 106 00:06:05,660 --> 00:06:06,350 Sandbox. 107 00:06:06,770 --> 00:06:09,980 And that is the tool that is running this entire online editor for us. 108 00:06:11,360 --> 00:06:17,150 From this initial request, our mini browser is going to get back in index dot, hgl file inside the 109 00:06:17,150 --> 00:06:17,780 response. 110 00:06:19,190 --> 00:06:24,830 Our little mini browser window is going to load up that index dot HMO file and pass all the H.T. mail 111 00:06:24,920 --> 00:06:26,240 and script tags inside there. 112 00:06:27,140 --> 00:06:32,390 One of the script tags inside there is going to tell that little mini browser window to make another 113 00:06:32,390 --> 00:06:35,090 request and get some JavaScript files. 114 00:06:35,300 --> 00:06:38,960 In this case, a very special JavaScript file called a bundle dot G.S. file. 115 00:06:39,650 --> 00:06:44,780 This bundle dodgiest file combines all the different JavaScript files that are present inside of our 116 00:06:44,780 --> 00:06:45,320 project. 117 00:06:45,990 --> 00:06:51,770 So it combines the index dot J.S. app field languages and translate all into one single JavaScript file. 118 00:06:53,880 --> 00:06:58,380 Code Sandbox then sends that entire bundle dodgiest file back over to us. 119 00:06:59,100 --> 00:07:01,410 And then all the JavaScript inside there is executed. 120 00:07:02,130 --> 00:07:07,410 The key thing to take away here is that we have a little mini browser window that makes a request, 121 00:07:07,710 --> 00:07:09,870 gets back and indexed on HGL file. 122 00:07:11,580 --> 00:07:15,920 The HMO file has a couple of scrip tags in it that caused the mini browser window to make a followup 123 00:07:15,930 --> 00:07:18,420 request and get a bunch of JavaScript and executed. 124 00:07:19,200 --> 00:07:20,760 So where does that really leave us? 125 00:07:21,030 --> 00:07:21,900 What does that really mean? 126 00:07:22,620 --> 00:07:24,810 Well, let's take a look back inside this code. 127 00:07:24,860 --> 00:07:25,770 Ed, really quickly. 128 00:07:27,210 --> 00:07:30,300 Back over here, I want you to take a look at the public directory. 129 00:07:30,630 --> 00:07:35,340 So that is the index dot, each nail file that gets loaded up over here on the right hand side. 130 00:07:36,240 --> 00:07:39,540 So then we make that follow up request to get some different JavaScript files. 131 00:07:40,080 --> 00:07:44,730 And when we get back all those JavaScript files, the first file that is executed automatically. 132 00:07:46,000 --> 00:07:47,040 Is the index stopped? 133 00:07:47,080 --> 00:07:48,370 J.S. file right here. 134 00:07:49,380 --> 00:07:54,390 So this is the file and all the code inside of it that initially boots up our REACT application and 135 00:07:54,390 --> 00:07:55,980 gets everything running from the get go. 136 00:07:56,760 --> 00:08:01,530 The key line inside of here to really understand is this react, dom, dot, render a call. 137 00:08:02,290 --> 00:08:06,210 So it's going to break down that line of code right there and really understand how react is starting 138 00:08:06,210 --> 00:08:06,990 up our project. 139 00:08:08,130 --> 00:08:08,370 OK. 140 00:08:08,430 --> 00:08:09,930 Another slightly complicated diagram. 141 00:08:09,990 --> 00:08:10,530 But don't worry. 142 00:08:10,650 --> 00:08:12,330 Well, we will walk through it step by step. 143 00:08:14,180 --> 00:08:16,630 So on the right hand side is our index dodgiest file. 144 00:08:17,050 --> 00:08:19,120 And there's the react dom dot render call. 145 00:08:19,240 --> 00:08:21,600 And I've split it up into a couple of different lines of code. 146 00:08:22,570 --> 00:08:28,030 The first argument to react on that render is a reference to our app component or the app function, 147 00:08:28,840 --> 00:08:32,050 that little color right there, or bypassing that first argument. 148 00:08:32,460 --> 00:08:37,990 We're essentially telling react that we wanted to call our app function and get back all the J.S. X 149 00:08:37,990 --> 00:08:42,430 we had written out inside there and then eventually go through that process of turning it into HDMI 150 00:08:42,430 --> 00:08:42,700 all. 151 00:08:44,140 --> 00:08:50,920 The second argument to react on that render is a reference to where we want to show our react project 152 00:08:50,980 --> 00:08:52,740 inside of the index Stutt H. 153 00:08:52,780 --> 00:08:53,860 T.M. file. 154 00:08:55,270 --> 00:08:57,700 So here's some kind of generic HGL right here. 155 00:08:58,630 --> 00:09:01,480 Inside there is a div with an I.D. of root. 156 00:09:01,780 --> 00:09:06,840 And we can actually see that element if we go back over, go into that public directory and find index 157 00:09:06,840 --> 00:09:07,460 dot HDL. 158 00:09:08,890 --> 00:09:14,110 Once we have that file open, we can then scroll down a little bit and right here is that div. 159 00:09:15,270 --> 00:09:21,030 So we are going to tell react to render our application or show all of our different components inside 160 00:09:21,090 --> 00:09:22,070 of that div right there. 161 00:09:23,660 --> 00:09:25,730 That is how our application first get started up. 162 00:09:26,150 --> 00:09:32,000 We turn our app component into HD mail and then tell react where we want all that H.M. to be displayed. 163 00:09:33,320 --> 00:09:34,850 All right, just two more quick questions here. 164 00:09:36,530 --> 00:09:38,150 Inside that index dot James file. 165 00:09:38,450 --> 00:09:39,960 We saw two different libraries. 166 00:09:39,980 --> 00:09:42,650 One was called React and the other was called React Dom. 167 00:09:43,130 --> 00:09:44,100 Why are there two libraries? 168 00:09:44,120 --> 00:09:45,230 Why isn't there just one? 169 00:09:45,350 --> 00:09:47,570 We're just here to learn about react anyways, right? 170 00:09:48,140 --> 00:09:50,120 Well, yet again, let's take a look at a diagram. 171 00:09:51,570 --> 00:09:55,390 So whenever you work with React, we we're actually working with two separate libraries. 172 00:09:55,690 --> 00:09:56,680 One is called yakked. 173 00:09:56,740 --> 00:09:57,610 The other is react. 174 00:09:57,610 --> 00:10:03,100 Um, the React Library itself has a bunch of code inside of it that knows how to get a bunch of different 175 00:10:03,100 --> 00:10:07,610 components to work together, how to call a component function, how to get back that J. 176 00:10:07,620 --> 00:10:12,460 ASX and how to essentially iterate over all those elements and decide whether to create some kind of 177 00:10:12,520 --> 00:10:16,000 H.M. element or whether to call some other component function. 178 00:10:17,060 --> 00:10:20,120 We referred to the React Library as a reconciler. 179 00:10:20,360 --> 00:10:22,100 That's the kind of technical term for it. 180 00:10:23,410 --> 00:10:26,040 The other library that we're going to work with is react, um. 181 00:10:26,620 --> 00:10:31,420 This is a very specialized library that knows how to take a set of instructions on different elements 182 00:10:31,420 --> 00:10:34,870 that we need to create and actually create female out of it. 183 00:10:35,560 --> 00:10:41,410 You can really imagine that react, Dom, is what takes all that J.S. X turns it actually into HMO and 184 00:10:41,410 --> 00:10:45,550 then puts all that HDMI out into the DOM and shows it to the user. 185 00:10:46,840 --> 00:10:51,130 Because React, Dom is responsible for rendering content or showing content to a user. 186 00:10:51,190 --> 00:10:53,200 We refer to it as a render. 187 00:10:55,020 --> 00:10:56,010 All right, last question here. 188 00:10:56,730 --> 00:10:59,970 About all that you state stuff that we saw inside of our app function. 189 00:11:00,630 --> 00:11:04,890 So inside of our app, dot, J.S. file, all this you state stuff right here. 190 00:11:07,540 --> 00:11:13,780 OK, so you state that is a function that we make use of to work with a system in react called the state 191 00:11:13,780 --> 00:11:19,810 system, the state system is all about managing data inside of your application, specifically data. 192 00:11:19,870 --> 00:11:25,000 That is going to somehow change over time without going too deeply into the code we wrote out here. 193 00:11:25,330 --> 00:11:30,820 You can kind of get the impression that we are trying to store some piece of data related to the language 194 00:11:30,820 --> 00:11:36,250 that the user has selected and the text that a user has entered into that text input right there. 195 00:11:37,120 --> 00:11:42,460 Both the value inside this text input and the language that a user selects are going to change over 196 00:11:42,460 --> 00:11:42,880 time. 197 00:11:43,030 --> 00:11:46,210 And that's why we are using the state system to keep track of that data. 198 00:11:47,460 --> 00:11:49,290 In general, we make use of the state system. 199 00:11:49,580 --> 00:11:53,430 Anytime that we want to get react to somehow update the content on the screen. 200 00:11:54,210 --> 00:11:58,950 And so whenever a user type something into that text input or whenever they select a different language, 201 00:11:59,640 --> 00:12:04,290 we've got some code inside of here to essentially do our translation and then update the translation 202 00:12:04,290 --> 00:12:05,190 text right there. 203 00:12:05,280 --> 00:12:08,750 So we're trying to use the state system to update some content on the screen. 204 00:12:10,140 --> 00:12:10,500 All right. 205 00:12:10,680 --> 00:12:17,340 So that is a not so fast overview on a lot of the code that we just wrote out in that sample application, 206 00:12:18,000 --> 00:12:21,750 everything that we discussed in this video is not stuff you need to memorize just yet. 207 00:12:22,140 --> 00:12:24,490 We're going to go over all these different topics once again. 208 00:12:24,720 --> 00:12:27,960 This was just kind of a quick overview on some high level concepts. 209 00:12:28,860 --> 00:12:29,880 Let's take a pause right here. 210 00:12:30,060 --> 00:12:31,410 We're going to continue the next video. 211 00:12:31,620 --> 00:12:34,350 We're gonna start to work on an even larger application. 212 00:12:34,830 --> 00:12:35,640 Should be a lot of fun. 213 00:12:35,700 --> 00:12:37,270 So I'll see you in just a minute.