WEBVTT 00:01.470 --> 00:10.320 Okay, so we have our application open in this program, The code Editor And in the previous video I 00:10.350 --> 00:17.580 clicked command O or I can do file open here like that to open the folder and once the folder is open, 00:17.580 --> 00:19.920 I can see that on the left pane here. 00:19.920 --> 00:23.420 I can also collapse it if I like to make more space for the code. 00:23.460 --> 00:25.980 This main section here is for the code. 00:25.980 --> 00:32.400 So for example, if I open this file, you can see here the file is here and I can collapse it. 00:32.400 --> 00:34.440 You will have more space there. 00:34.440 --> 00:36.570 What else do we have on the left hand side? 00:36.570 --> 00:39.180 We have search so we can search in files. 00:39.180 --> 00:44.490 If you have a phrase or a word that you would like to search for, you can use this. 00:44.490 --> 00:46.560 Then you have integration with Git. 00:46.590 --> 00:51.450 Then you have the back console here and you have some plugins. 00:51.450 --> 00:57.210 So you can also search for plugins and you can install them and there's a hundreds of hundreds of different 00:57.210 --> 00:59.670 plugins for different languages in different frameworks. 00:59.670 --> 01:06.310 So go ahead and install some of of the plugins you like or you will find very useful. 01:06.520 --> 01:12.550 So I will come back here to the source code and on the left hand side we can we have a few files. 01:12.550 --> 01:19.330 So let's go through these files first and it will give us a kind of hint what the React application 01:19.330 --> 01:19.870 is. 01:19.900 --> 01:27.700 We create our app with a single command and all of that has been made for us automatically. 01:27.700 --> 01:30.160 So first let's start with node modules. 01:30.160 --> 01:36.610 You can see it's a kind of gray and there is a reason why this is gray basically. 01:36.610 --> 01:39.790 That's a list of all dependencies. 01:39.790 --> 01:46.330 So all libraries, all that react use for this application will be installed here. 01:46.330 --> 01:53.440 And you can see here hundreds of of different small or bigger libraries and all dependent on each other. 01:53.440 --> 01:55.630 So everything will be installed here. 01:55.630 --> 02:02.200 But in fact you could remove that folder node modules completely if I will remove it. 02:02.230 --> 02:11.020 What I could do is I could do NPM install and it will be installed installed automatically and how the 02:11.020 --> 02:13.990 NPM install will know what to install. 02:14.020 --> 02:20.950 Basically we have package.json and what package.json is, it's a file that. 02:21.580 --> 02:24.040 Has built in dependencies. 02:24.040 --> 02:31.330 So basically, if we want to use some kind of libraries, we will add it to the dependencies, as you 02:31.330 --> 02:32.050 can see here. 02:32.050 --> 02:37.810 So the package.json, we are telling our that's our application, that's our version. 02:37.810 --> 02:43.840 And then we can have some flags like private true or false, and then we have dependencies section. 02:43.840 --> 02:50.860 That means we want to use this, react this version, react Dom, react scripts and so on, and that 02:50.860 --> 02:56.650 if we do NPM install it will be installed in the node modules here. 02:56.650 --> 02:59.200 Another option is NPM update. 02:59.200 --> 03:06.850 It will take the latest version and it will install the latest version and that will be here also written. 03:06.850 --> 03:08.410 So then we have scripts. 03:08.410 --> 03:11.650 Scripts is we already talked about it before. 03:11.650 --> 03:19.270 Scripts are the little snippets, the command line commands that we can do like NPM start will start 03:19.270 --> 03:24.920 our server as we've done before, and then we have NPM build, test, eject and so on. 03:24.960 --> 03:30.200 Then we have some configuration here and then we have browser list and so on. 03:30.200 --> 03:37.940 So basically it we don't need to change much in this package.json it is automatically created for us. 03:37.940 --> 03:42.230 But the important part here is the dependencies. 03:42.230 --> 03:46.760 Dependencies will kind of tell what we need to also have. 03:46.790 --> 03:54.050 At the moment we don't have a dev dependencies, but we can also have another version dev dependencies 03:54.050 --> 04:02.390 and this dev dependencies will be a list of different libraries or modules that we want to install during 04:02.390 --> 04:03.470 our development. 04:03.470 --> 04:09.470 So there are some tools that will help us developing the our application, but they are not needed for 04:09.470 --> 04:10.760 a production build. 04:10.760 --> 04:17.450 So once we put our application on the server, we don't need to include them so we can divide dependencies 04:17.450 --> 04:23.930 that will need to be always there and also dev dependencies that are dependencies only for our development 04:23.930 --> 04:24.650 process. 04:25.150 --> 04:28.300 So basically that's package.json we can close this. 04:28.300 --> 04:36.100 And also we have another file here, package log, Json that's kind of locking whatever we install with 04:36.100 --> 04:39.310 NPM install or whatever we had already. 04:39.310 --> 04:42.130 This because we've done create React app. 04:42.130 --> 04:43.480 This is locked file. 04:43.480 --> 04:50.080 So once we have that file we can give it to someone else and we will be sure that all that things that 04:50.080 --> 04:54.340 has been installed will have this version fixed. 04:54.340 --> 05:00.040 Because if you do NPM update you might have a different version and you might have some problems with 05:00.040 --> 05:03.010 compatibility in between different packages. 05:03.010 --> 05:09.880 So that's a lock is kind of locking to the current, build a different version from this file. 05:10.000 --> 05:14.620 And then we have a simple Readme which is automatically included there. 05:14.650 --> 05:21.250 Then we have a git ignore by default create react app is also initiate the git. 05:21.250 --> 05:25.370 So the git is included in this and in the git ignore. 05:25.370 --> 05:30.290 You have a list of the things that should be ignored like for example node modules. 05:30.290 --> 05:36.680 There is no point to include the node modules inside our git inside our version control because we can 05:36.680 --> 05:39.410 easily recreate it with NPM install. 05:39.410 --> 05:46.010 So that will just put extra files hundreds of or thousands of different files that we don't actually 05:46.010 --> 05:47.540 need to include. 05:47.540 --> 05:52.880 It will just exclude it from from the git because we can easily recreate it. 05:52.880 --> 05:58.700 So git ignore is just a list of things that we should ignore inside our git repository. 05:59.060 --> 06:05.390 Then we have two folders public and then source source is our application. 06:05.390 --> 06:11.150 Public is traditional HTML website. 06:11.150 --> 06:21.170 So if I will open HTML here you can see that's a normal HTML we have from head and we have some body. 06:21.170 --> 06:27.500 So let's go through what we have here and that's a standard setup with some meta and links. 06:27.500 --> 06:34.280 And basically we have a manifest file by default and then we have manifest here. 06:34.280 --> 06:42.800 So basically that manifest it's setup for PWA, which is progressive web app, and by default it's automatically 06:42.800 --> 06:43.700 almost enabled. 06:43.700 --> 06:47.690 You need to do a few more things here, but that's included in the build. 06:47.720 --> 06:55.370 So this is all prepared for being a progressive web app and you have linked to manifest here and then 06:55.370 --> 06:59.480 you have some setup for the favicon which is included here. 06:59.480 --> 07:01.880 So basically that's our landing page. 07:01.880 --> 07:04.580 And React is a single page application. 07:04.580 --> 07:06.830 That means we don't go to another. 07:06.830 --> 07:14.810 If we navigate to another with some links to another section, we are not going to reload this or navigate 07:14.810 --> 07:15.770 to different page. 07:15.770 --> 07:22.100 We will be always staying with index.html and we will just replace the content on the go. 07:22.760 --> 07:25.580 So here what we have, we have two things. 07:25.580 --> 07:32.960 First, if you don't have a JavaScript enabled in your browser, which almost everyone has a JavaScript 07:32.960 --> 07:38.780 enabled, we will display this because React application won't work with JavaScript, but if you do 07:38.810 --> 07:46.970 will do simply simply display a div with ID root and what does it mean? 07:46.970 --> 07:48.500 I will show you that in a second. 07:48.500 --> 07:59.240 If we go to the source and I will go to index.js here and you can see here get element by ID root and 07:59.240 --> 08:05.330 that's that line here allows up to be rendered. 08:05.330 --> 08:15.620 So basically react Dom which is document object model react render this app which is this and we will 08:15.620 --> 08:18.320 be talking more about the components later on. 08:18.320 --> 08:27.680 But basically we take some component from our our source, which is this app.js here and we put it in 08:27.680 --> 08:32.240 the root element, root which is here. 08:32.240 --> 08:38.810 So we have a single div on the page and we take a component and kind of inject it and show it there. 08:38.810 --> 08:41.120 So what is up app? 08:41.120 --> 08:44.780 If you go up here, that's our component. 08:44.810 --> 08:47.600 We'll be talking about component in the next section. 08:48.140 --> 08:57.200 But this you can see here that part, it's our content that we see on this page here. 08:57.200 --> 09:00.500 So you can see, edit and logo and some link. 09:00.530 --> 09:03.290 That's exactly what we see here. 09:03.290 --> 09:10.760 So we have image, we have paragraph, which is edit and then we have that link and then learn, learn, 09:10.760 --> 09:11.420 react. 09:11.450 --> 09:18.470 What I would like to show you is by default, if I will make a little bit more space here, you can 09:18.470 --> 09:22.730 see here and I will collapse a little bit here. 09:22.730 --> 09:24.200 So we'll divide the screen. 09:24.950 --> 09:25.830 Uh, two. 09:25.880 --> 09:26.290 Half. 09:26.290 --> 09:26.800 Half. 09:26.960 --> 09:32.000 So basically what we have here is the code editor and here browser. 09:32.000 --> 09:38.840 If I do some changes here, like for example, I will remove that image and remove it and then I will 09:38.840 --> 09:40.090 click save here. 09:40.100 --> 09:42.170 I'm not going to navigate to this. 09:42.200 --> 09:49.280 You can see that automatically refresh because we have our server running and it will look for the changes 09:49.280 --> 09:52.430 in our code and it will be reflected automatically here. 09:52.430 --> 10:00.590 So if I will take this link and remove it, save it Ctrl s, you can see it's already changing. 10:00.590 --> 10:02.120 So I can do here. 10:04.890 --> 10:10.970 Hello from re react five. 10:11.700 --> 10:13.020 Hello from React. 10:13.970 --> 10:16.080 So this is how it works. 10:16.100 --> 10:23.510 We have our code and it will be once we run our server and we can run this server also from here. 10:23.510 --> 10:24.710 So I go view. 10:26.370 --> 10:27.870 And terminal. 10:28.710 --> 10:30.540 And I can go to terminal. 10:30.540 --> 10:34.890 I will click Ctrl C here, I will close the terminal. 10:34.890 --> 10:37.350 So application is not running anymore. 10:37.470 --> 10:44.520 Or if I go here and refresh it, you can see the site cannot be reached, but this time I can do NPM. 10:45.060 --> 10:52.440 Start from here and you will have automatically start your server from here and you can see this will 10:52.440 --> 10:55.830 pick up the new version and it will be shown. 10:55.830 --> 10:57.030 Hello from React. 10:57.030 --> 11:04.920 So now we have everything set up in our ID so this will run our application and then we can lifecode 11:04.920 --> 11:15.150 it here and we'll see the effect here so that what we will do in the rest of our tutorial and I will 11:15.150 --> 11:19.050 show you a piece by piece what React is capable of.