WEBVTT 0 00:00.360 --> 00:03.700 All right so the first thing is let's be on the same page. 1 00:03.750 --> 00:08.460 If you head over to the course resources you'll find a link under this lesson. 2 00:08.460 --> 00:15.890 And if you paste that link into your browser you'll be able to access this introduction to JSX sandbox. 3 00:15.900 --> 00:22.470 Now when you're here, if you want to save your work that you do here then go ahead and fork it and log 4 00:22.470 --> 00:23.860 in with GitHub. 5 00:23.970 --> 00:28.800 If you don't have a GitHub account it's free to sign up and it's pretty useful as a developer 6 00:28.800 --> 00:31.650 so I would recommend doing that anyways. 7 00:31.650 --> 00:39.420 Now once you've done that the next step is to head over here inside Explorer so that you can see the 8 00:39.480 --> 00:41.850 public and the source folders. 9 00:41.850 --> 00:49.950 Notice how inside here we've already got three files. a blank index.js, a index.html 10 00:50.160 --> 00:53.230 and a blank style.css. 11 00:53.250 --> 00:56.850 So this should be pretty familiar to you by now. 12 00:56.850 --> 01:02.070 If you look at the files the only one that has code in it is the index.html, 13 01:02.100 --> 01:04.520 so this is our entry point. Here 14 01:04.530 --> 01:11.820 all that we've created is just a really simple HTML backbone with a head section that links to the styles 15 01:11.820 --> 01:19.560 .css file and a body section with a single div that has an id of route. 16 01:19.560 --> 01:26.520 Now you're going to see this in pretty much any React app and by convention, we always create a div html 17 01:26.760 --> 01:29.010 element that has an id of root. 18 01:29.100 --> 01:33.270 And this is basically the root of your React application. 19 01:33.270 --> 01:39.330 So everything that we create using React is going to be inserted inside this div. 20 01:39.330 --> 01:47.430 Now at the very bottom just before our body ends we've got a script that links to our index.js 21 01:47.580 --> 01:53.800 JavaScript file. And notice how at the moment our website doesn't really do anything yet. 22 01:53.820 --> 02:00.780 And if you go ahead and open it up inside a new window, then you'll be able to see your website in all 23 02:00.780 --> 02:03.150 of its glory or not. 24 02:03.150 --> 02:08.670 The only thing that we've actually modified is the title which says React app. 25 02:08.670 --> 02:15.660 So I want you to go ahead and update that title to say JSX which is gonna be the topic of today's 26 02:15.660 --> 02:21.940 lesson. And once we refresh we'll see it updated over here. 27 02:21.940 --> 02:28.090 I recommend collapsing this browser part because we're gonna be using this tab instead. 28 02:28.210 --> 02:34.750 And we're going to give ourselves a little bit more extra space for coding by reducing the size of some 29 02:34.750 --> 02:41.450 of these left and right hand panes. And the code that we're going to be writing is not within the index 30 02:41.450 --> 02:42.460 .html, 31 02:42.520 --> 02:49.300 we're not going to touch this HTML file ever again in fact. And all of our code is going to be written 32 02:49.420 --> 02:51.790 in JavaScript using React. 33 02:51.790 --> 02:59.170 So head over to the index.js file and the very first thing we're going to do is we're going to 34 02:59.260 --> 03:03.910 require the React and the React dom modules. 35 03:04.510 --> 03:10.660 So normally when we've been working with node as you've seen in the previous lessons, we've always had 36 03:10.660 --> 03:16.210 to manually use the hyper terminal to install these dependencies. 37 03:16.210 --> 03:23.680 But in code sandbox, it is as simple as simply searching for a dependency and then just clicking on it 38 03:23.770 --> 03:26.230 for it to install into your project. 39 03:26.350 --> 03:29.470 Once we've installed our dependencies, that's not enough. 40 03:29.470 --> 03:34.090 We also have to require it inside the files that we need to use it in 41 03:34.090 --> 03:34.450 right? 42 03:34.900 --> 03:38.350 So let's go ahead and require these two dependencies. 43 03:38.350 --> 03:42.310 The first one I'm going to create a variable called React 44 03:42.520 --> 03:51.560 and this is going to be set equal to require. And we're simply going to specify that React module right 45 03:51.560 --> 03:58.430 here that's been installed as the module that we're going to require and we're going to bind it to this 46 03:58.520 --> 04:00.750 React keyword. 47 04:00.800 --> 04:05.980 Now in addition I'm also going to do the same with our ReactDOM. 48 04:06.080 --> 04:16.760 So require react-dom, all lowercase, and now we're able to actually use these two packages. In order 49 04:16.760 --> 04:21.440 to use React to actually create something on screen, 50 04:21.500 --> 04:23.630 we're going to use the render function. 51 04:23.780 --> 04:30.440 So we're going to tap into this ReactDOM that we've created up here which of course gives us access 52 04:30.440 --> 04:38.940 to the React dom module that comes from Facebook right here, and we're going to tap into its render function. 53 04:39.020 --> 04:48.680 Now this render function as you can see takes three inputs. The first input is "WHAT TO SHOW". 54 04:48.680 --> 04:50.440 And this is obviously not real code 55 04:50.450 --> 04:51.710 I'm just showing you. 56 04:51.710 --> 04:54.190 We're going to be fixing this a little bit later on. 57 04:54.470 --> 04:56.780 Now after the comma 58 04:56.780 --> 05:05.510 The next thing that we can add as an input to this render function is "WHERE TO SHOW IT". And finally we 59 05:05.510 --> 05:12.020 can also add a optional callback to tell us when that render function has completed. 60 05:12.020 --> 05:17.360 Now we don't need that functionality so we're gonna leave that third one out. But we do have to fix this 61 05:17.360 --> 05:23.930 code because as you can see over here I'm getting problems after problems and basically the browser 62 05:23.930 --> 05:28.790 is shouting at me as well telling me that there's a syntax error, but of course that's all because we've 63 05:28.790 --> 05:33.830 got some pseudocode in here. So let's first think about what do we want to show. 64 05:33.860 --> 05:37.450 Well at the moment our website is completely blank, 65 05:37.460 --> 05:39.140 there's really nothing here. 66 05:39.230 --> 05:47.690 So how about starting out with a simple h1 that just says the prerequisite Hello World. 67 05:47.720 --> 05:51.800 Now the next thing is to specify where to show it. 68 05:52.220 --> 05:59.300 So the location is going to be a particular HTML element that we're going to target inside our index 69 05:59.390 --> 06:00.690 .html. 70 06:00.800 --> 06:06.320 And if you've guessed this particular div as that target then you would have guessed right. 71 06:06.320 --> 06:13.280 So let's go ahead and grab a reference to this div with the id of root. And can you remember how to 72 06:13.280 --> 06:14.210 do that? 73 06:14.270 --> 06:20.210 I know it's been a while since we've been writing plain old vanilla JavaScript, but see if you can remember 74 06:20.210 --> 06:26.710 how to get access to that particular element using JavaScript. 75 06:26.880 --> 06:27.790 All right. 76 06:27.800 --> 06:32.200 Remember we have to tap in to the dom using that document keyword. 77 06:32.480 --> 06:40.280 And then we use the method GetElementById and then inside a set of parentheses we get to specify 78 06:40.400 --> 06:48.950 a element id, which of course is root. So let's go ahead and put that in there as a string. 79 06:49.470 --> 06:57.540 And now if we take a look at our preview or at our website over here, you can see we've now injected 80 06:57.660 --> 07:05.010 HTML into our web site even though we have not touched our HTML file at all. 81 07:05.010 --> 07:10.110 And so already you've written a line of React code right here. 82 07:10.110 --> 07:20.910 We've used the ReactDOM module's render method in order to display a h1 inside that root div. 83 07:21.120 --> 07:28.110 And the really remarkable thing right here is that if you think about it, we're inside a JavaScript file 84 07:28.560 --> 07:38.730 and we're able to write plain HTML without any sort of fancy angle brackets or for example the EJS 85 07:38.740 --> 07:44.550 brackets or anything to denote that this is somehow not Javascript. 86 07:44.580 --> 07:47.190 So what exactly is this magic? 87 07:47.190 --> 07:56.630 Well this is what JSX does. React works by creating these JSX files, so files where we've got 88 07:56.640 --> 08:05.670 HTML right in the body of a JavaScript file. And what happened behind the scenes is that our HTML 89 08:05.820 --> 08:16.500 is picked up by a compiler and it gets converted or compiled down to actual JavaScript. And the compiler 90 08:16.530 --> 08:20.690 comes from including this React module right here. 91 08:21.090 --> 08:26.610 So you can see that if I go ahead and comment this out then we're going to be getting some major problems 92 08:26.610 --> 08:27.560 right here. 93 08:27.560 --> 08:33.690 React is not defined and we no longer get our h1 being rendered. 94 08:33.690 --> 08:43.440 So inside the React module, there is something called Babel. And Babel, as they tell you, is a JavaScript 95 08:43.590 --> 08:54.510 compiler. So it's able to take next generation JavaScript like ES 6, 7, 8 and compile it down 96 08:54.510 --> 08:58.920 to a version of JavaScript that every browser can understand. 97 08:59.310 --> 09:05.240 And this includes compiling JSX down to plain old JavaScript. 98 09:05.400 --> 09:11.130 So if we head over to this section where it says 'Try it out', you actually get a side by side comparison 99 09:11.310 --> 09:18.690 and we can write some next generation crazy code over here and through the use of Babel it gets converted 100 09:18.690 --> 09:24.270 down into a version of JavaScript that can be read by every single browser, 101 09:24.270 --> 09:27.630 even good old Internet Explorer. 102 09:27.690 --> 09:33.880 So for example if I go ahead and just copy this line of code that I've written on line 4 and I paste 103 09:33.880 --> 09:42.180 it in here on the left, you can see that once Babel is done its job it converts this into an actual line 104 09:42.270 --> 09:50.040 of JavaScript code and it's able to create this h1 on the screen by using that create element method 105 09:50.070 --> 09:56.370 that comes from vanilla JavaScript which we've already seen before in the MDN docs. 106 09:56.760 --> 10:08.130 That means instead of having to write something like var h1 = document.createElement. 107 10:08.760 --> 10:14.730 And then the element that we're going to create is of course an h1 and then we write something 108 10:14.730 --> 10:23.070 like h1.innerHTML and set the content to be "Hello World!" as a string 109 10:23.070 --> 10:31.800 and then finally we do something like document.getElementById and we specify the one with the 110 10:31.800 --> 10:39.060 id of root and we go ahead and do that appendChild the method and we add in this h1 that 111 10:39.060 --> 10:40.560 we've created just now. 112 10:40.590 --> 10:46.800 So let's go ahead and comment this out and you can see that I've now got a 'Hello World'. And if I comment 113 10:46.800 --> 10:54.450 it back in, you can see that I achieve the same result create an h1 with the word 'Hello World' in it with 114 10:54.450 --> 11:02.790 the same outcome but one of these ways is very easily readable because we've got HTML embedded 115 11:02.880 --> 11:09.750 inside some JavaScript and the other way is pure JavaScript but it takes three times as many lines to 116 11:09.750 --> 11:17.020 write and it's a lot less easy to understand what's actually going on here, versus this right? 117 11:17.430 --> 11:25.410 So we've already started seeing the beauty of React but Babel actually goes a lot further than just 118 11:25.470 --> 11:32.390 rendering JSX, It allows us to use some next generation JavaScript, 119 11:32.430 --> 11:40.020 so for example ES6 OR ES 2015. And we can use some of the new constructs that are available through 120 11:40.020 --> 11:47.560 these new versions of JavaScript and it's able to compile it down into bog standard normal JavaScript. 121 11:48.380 --> 11:55.040 So for example on the home page here where they're using that map function, the arrow function, all of 122 11:55.040 --> 12:03.260 this gets converted down into browser compatible JavaScript so that every single browser is able to 123 12:03.260 --> 12:03.800 render it. 124 12:05.060 --> 12:13.310 So now when we're writing our code with the React module in place, we can write ES6 code without worrying 125 12:13.310 --> 12:19.370 about whether if our grandma who has Internet Explorer 5 will actually be able to see our hard work 126 12:19.400 --> 12:24.050 rendered, Babel and react will take care of all of that for us. 127 12:24.110 --> 12:31.720 So that's why in this module, I'm going to be teaching you a lot more of the latest features of JavaScript 128 12:31.730 --> 12:39.560 ES6 because we're actually able to be sure that it's not going to break because we've got all of 129 12:39.560 --> 12:45.140 these modules in place that's going to take care of the rendering and compiling for us. 130 12:45.500 --> 12:51.170 And one of the latest features to come to JavaScript is the import keyword. 131 12:51.170 --> 12:59.450 So instead of requiring the React module and setting it to a variable and doing all of this, the new 132 12:59.450 --> 13:07.470 way of doing it is to simply just import React from a particular module or a particular location, 133 13:07.490 --> 13:11.600 so in our case it's still the React module right here. 134 13:11.600 --> 13:14.270 We can do the same thing for our ReactDOM 135 13:14.270 --> 13:26.870 so import ReactDOM from react-dom. By using import and the export keywords, we're able to modularise these 136 13:27.050 --> 13:32.220 dependencies far better. We end up with code that's better organized. 137 13:32.390 --> 13:39.510 And if you look through the curriculum now inside this React module, there's a dedicated JavaScript ES 138 13:39.520 --> 13:41.600 6 lesson on this topic. 139 13:41.780 --> 13:46.540 So I recommend continuing the lessons in the order that they're created in the curriculum. 140 13:46.640 --> 13:49.480 But if you just can't wait to learn more about this 141 13:49.490 --> 13:55.910 ES6 feature importing and exporting, then feel free to jump over there and head back over here once 142 13:55.910 --> 13:56.580 you're done. 143 13:57.980 --> 14:07.310 So now that we've used the ReactDOM render method to render this piece of HTML into our root div, 144 14:07.850 --> 14:18.350 what if you had tried to add another HTML element like, 'This is a paragraph'? Well your code would crash 145 14:18.470 --> 14:20.920 and you would have a lot of problems. 146 14:21.530 --> 14:23.330 So what's the problem here? 147 14:23.990 --> 14:34.230 Well the reason is that when we use this render method it can only take a single HTML element. 148 14:34.400 --> 14:41.020 That means if you have two HTML elements back to back, then this is not going to work, 149 14:41.030 --> 14:50.210 It's not going to be accepted. But we know that there's a really easy way of turning these two HTML elements 150 14:50.480 --> 14:59.130 into one. Pause for a moment and have a think if you know how you might be able to do this. Well the solution 151 14:59.130 --> 15:01.300 is actually really simple. 152 15:01.340 --> 15:12.260 All we need to do is just simply to embed these two HTML elements inside a single div element. 153 15:12.260 --> 15:18.950 So if I go ahead and move this closing div bracket to the end of that closing paragraph bracket you 154 15:18.950 --> 15:25.270 can see that now again we have one single HTML element right? 155 15:25.400 --> 15:31.510 And anything that goes inside a div still counts as a single HTML element. 156 15:31.520 --> 15:39.290 So now we're able to render our h1 and our paragraph as well as as many elements as we want to cram 157 15:39.290 --> 15:48.600 in here because we've now wrapped it inside a single div. That's how easy it is to start using React 158 15:48.840 --> 15:57.210 to create our web pages to inject HTML inside JavaScript code and for it to be as easily readable 159 15:57.540 --> 16:01.370 as any other HTML file. In the next lesson 160 16:01.380 --> 16:08.040 I've got a challenge for you. Head over there and see if you can complete this challenge using what you've 161 16:08.040 --> 16:11.940 learnt from this lesson. So for all of that and more, I'll see you there.