WEBVTT 00:00.350 --> 00:05.030 Okay, so we've got our react application up and running, and we're going to take a look at what's 00:05.030 --> 00:10.610 responsible for the output that we can see here in our browser, because some magic is going on here 00:10.610 --> 00:11.570 to produce that. 00:11.570 --> 00:16.340 And let's take a look at what's contained or some of the important files contained in there. 00:16.370 --> 00:21.800 Just a high level overview, because we're going to be working on this project of course, as we build 00:21.800 --> 00:22.640 our application. 00:22.640 --> 00:28.400 But a few highlights, and we'll start off with the fact that we're working on a single page application. 00:28.400 --> 00:32.390 And our single page is this index.html. 00:32.420 --> 00:36.500 Now, if you've seen a bit of HTML before, then this will all look very familiar to you. 00:36.530 --> 00:43.340 We have our HTML standard tags with the HTML tag, the head, the meta, and we've got our title, which 00:43.370 --> 00:47.180 affects what we see inside the tab at the top here. 00:47.180 --> 00:49.340 So we can change that to whatever we wish. 00:49.370 --> 00:54.740 I'm going to change this to re store the name of our app. 00:54.740 --> 00:56.540 And then we've got our body tag. 00:56.540 --> 01:01.100 And inside here we've got a div with the ID of route. 01:01.550 --> 01:09.820 And then we've also got a script tag which is opening up the main TSX file that's included in our project. 01:09.820 --> 01:15.070 So let's go take a look at that one next and see what's contained inside there, because we don't see 01:15.070 --> 01:17.050 any react code inside here. 01:17.050 --> 01:23.470 But if we do, take a look inside the source folder and take a look at main dot TSX, then we can see 01:23.470 --> 01:29.020 that we've got some JavaScript code here to get the element by the id and the id is route. 01:29.020 --> 01:36.400 And what this is, is some react code to create route and render effectively our react application. 01:36.400 --> 01:39.130 So what's contained inside this strict mode. 01:39.130 --> 01:46.510 And that's the mode that we run in to keep us aligned with best practice as we build our react application. 01:46.540 --> 01:51.850 Strict mode will warn us about anything that we're doing incorrectly, and a few other things that help 01:51.850 --> 01:55.840 us build our react application safely and effectively. 01:55.840 --> 01:59.980 And we've got some imports here where the create route is coming from. 01:59.980 --> 02:05.770 At the top here we've got an import from that's coming from react Dom client, and we've also got strict 02:05.770 --> 02:09.370 mode coming from react, and we've got some CSS being imported here. 02:09.610 --> 02:12.310 And we're also importing the app component. 02:12.310 --> 02:17.320 And the app component contains the code that we actually see inside our browser layer. 02:17.320 --> 02:24.370 So if we go and take a look at this which is the app dot TSX, then we can see that this has a JavaScript 02:24.370 --> 02:30.700 function that returns something and it returns what looks like HTML. 02:30.730 --> 02:33.700 But this is not strictly speaking HTML. 02:33.700 --> 02:39.640 It's just designed to look like HTML to make it easier for developers to learn react and create react 02:39.640 --> 02:40.870 applications. 02:41.050 --> 02:46.420 But what this is, is a JavaScript function that returns something, and this something is called or 02:46.420 --> 02:52.300 referred to as JSX or TSX in our case, because we'll be using TypeScript. 02:52.540 --> 02:55.180 And like I say, it looks a lot like HTML. 02:55.180 --> 02:59.530 And there are some differences where we see stuff inside curly brackets. 02:59.560 --> 03:01.360 That's actually JavaScript code. 03:01.840 --> 03:09.520 This is using something that's being imported at the top here, the V8 logo and the react logo as well. 03:09.640 --> 03:14.560 And we've also got some JavaScript functionality here as well where we've got the button, we've got 03:14.560 --> 03:21.400 an onClick event which is effectively updating some state, some memory that's contained inside this 03:21.400 --> 03:24.280 component, and it's tracking the counter. 03:24.280 --> 03:29.320 So if we go and click on the count button, then we can see that this goes up. 03:29.560 --> 03:32.890 And this state is only retained in the component's memory. 03:32.890 --> 03:39.340 So as soon as we refresh the page it resets itself to its initial value which is zero. 03:39.340 --> 03:44.470 As we can see up here, we'll get into what this code does and what this means as we talk more about 03:44.470 --> 03:45.130 react. 03:45.160 --> 03:48.820 I'm not going to worry too much about it right now, but we will come back to that. 03:48.820 --> 03:51.070 And what else have we got going on in here? 03:51.070 --> 03:56.920 We've also got some differences between what you would see here and what you would normally get with 03:57.130 --> 03:57.940 HTML. 03:58.120 --> 04:04.300 We don't use class inside here, because what we're working with at the moment is actually JavaScript, 04:04.300 --> 04:09.400 even though it looks like HTML and class is a reserved word in JavaScript. 04:09.400 --> 04:14.480 So in order to provide the styling class, we use class name instead. 04:14.510 --> 04:16.130 So that's our react component. 04:16.130 --> 04:21.410 And let's go ahead and simplify things, because we don't need all of this code and we won't work with 04:21.410 --> 04:22.010 all of this code. 04:22.010 --> 04:24.560 I'm just going to remove all of the imports at the top. 04:24.560 --> 04:28.130 I'm going to remove this code for using state as well. 04:28.130 --> 04:30.410 Please do the same of course on yours. 04:30.410 --> 04:38.540 And inside this return statement, I'm going to take out all of this code and this opening angle bracket 04:38.540 --> 04:40.010 and closing angle bracket. 04:40.010 --> 04:41.870 I'm also going to remove that as well. 04:41.870 --> 04:47.150 I'll talk about what that means soon, but we'll just have a simple div and we'll just have the name 04:47.150 --> 04:49.460 of the app of restore. 04:49.490 --> 04:50.780 As simple as that. 04:50.780 --> 04:52.610 Just the very, very basics. 04:52.610 --> 04:57.440 And just to mention how we give inline styling to something. 04:57.440 --> 05:00.710 If we did want to give it some style, we do use the style keyword. 05:00.710 --> 05:04.730 But inside here we provide this as an object. 05:04.730 --> 05:10.580 So if I wanted to give this a font size, for instance, then inside double curly brackets I'd specify 05:10.610 --> 05:17.910 font size and then I could in quotes, give it the size and I could say I want this to be 1.2 rem, 05:17.910 --> 05:20.340 for instance, to make the font a bit bigger. 05:20.460 --> 05:26.040 If I go and take a look at the progress, well, I can see that restore is centered on the page. 05:26.040 --> 05:31.620 That means we've still got some styling going on there, and I would like to remove any styles that 05:31.620 --> 05:33.600 have been provided as well. 05:33.600 --> 05:37.650 So inside the app dot CSS, I'm actually just going to delete this file. 05:37.650 --> 05:40.800 We don't need this particular CSS file. 05:40.800 --> 05:42.510 So I'm just going to move that to trash. 05:42.510 --> 05:45.570 And the other styles are coming from the index dot CSS. 05:45.600 --> 05:49.740 I'm just going to control A and delete all of the styles inside there. 05:49.830 --> 05:54.810 And where this was being used was in the main dot TSX. 05:54.840 --> 05:59.400 If we go back and take a look, we can see that restores on the top left hand corner. 05:59.400 --> 06:03.810 I'm not convinced the styling of the font was applied there. 06:03.810 --> 06:08.430 And let's just make it much bigger and say 1.6 REM. 06:08.430 --> 06:10.710 And sure, that has increased its size. 06:10.740 --> 06:14.040 Okay, so that styling class has been applied. 06:14.070 --> 06:15.990 Now other things to point out. 06:16.020 --> 06:18.660 Just before we move forward, a couple of other important files. 06:18.660 --> 06:20.400 We've taken a look at the package.json. 06:20.400 --> 06:27.360 This describes all of the dependencies, and these dependencies translate into actual files and folders 06:27.360 --> 06:30.210 that are contained inside this node modules folder. 06:30.210 --> 06:37.680 So when we install something an npm package into our react application, then it downloads and saves 06:37.680 --> 06:41.550 the files for that package into node modules. 06:41.580 --> 06:47.520 A very big folder contains thousands of files, and we will not typically go and look at what's inside 06:47.520 --> 06:47.910 there. 06:47.940 --> 06:52.470 We've got a public folder and anything contained inside here, things like images. 06:52.470 --> 06:56.580 Then these are not going to be shrunk or managed or compiled. 06:56.580 --> 06:59.790 They're just going to be used as they are inside the public folder. 06:59.790 --> 07:02.550 We'll be using that to store some images we'll add soon. 07:02.700 --> 07:07.620 Inside the source folder we've got our app TSX, the index dot TSX. 07:07.620 --> 07:08.850 We've looked at that already. 07:08.850 --> 07:14.100 And the only other thing I want to point out is the v config file, which again we've already looked 07:14.100 --> 07:14.280 at. 07:14.280 --> 07:19.540 So that's just a very brief high level overview of what's contained inside our projects. 07:19.540 --> 07:24.640 And before we move forward, there's just a couple of extensions I want to add to VSCode to improve 07:24.640 --> 07:27.310 our developer experience with react. 07:27.310 --> 07:30.130 So if you're using VSCode, please follow along. 07:30.130 --> 07:34.840 If you're not using VSCode, then just move on to the next lesson. 07:34.900 --> 07:39.520 But one extension we need if we are using VSCode, if we just type in react, we're going to use some 07:39.520 --> 07:43.660 snippets to help us create the boilerplate when we create a new react component. 07:43.690 --> 07:49.060 So I'm just going to search for react and install Es7 plus react Redux, React Native snippets. 07:49.090 --> 07:54.910 Just go ahead and install that one, and we'll also add another extension which will really help us 07:54.910 --> 07:57.220 out, which is called ESLint. 07:57.220 --> 08:00.940 And this is going to give our compiler our react compiler. 08:01.000 --> 08:08.830 It's going to allow VSCode to display very noisily any issues, syntax errors, whatever else with our 08:08.830 --> 08:10.000 code as well. 08:10.000 --> 08:13.390 So please make sure you have that one installed. 08:13.480 --> 08:14.140 Okay. 08:14.140 --> 08:15.400 Now we're ready to move on. 08:15.400 --> 08:20.080 And what we'll take a look at next is some basics of react components. 08:20.080 --> 08:21.250 And that's coming up.