WEBVTT 00:00.860 --> 00:05.840 Okay, so now we know about react and we know how to use that framework. 00:05.840 --> 00:08.180 And we also know how to create API. 00:08.210 --> 00:11.720 It's time to start a project with our react application. 00:11.720 --> 00:13.640 So first thing first what we need to do. 00:13.640 --> 00:15.200 And we've done it before. 00:15.230 --> 00:20.630 Npx create react app and then we can name it. 00:20.630 --> 00:24.740 I will name my application Movie Creator. 00:25.550 --> 00:27.050 This will take a moment. 00:29.240 --> 00:30.140 So this is built. 00:30.140 --> 00:34.550 And what I could do is I could go to that folder and do npm start. 00:34.550 --> 00:40.670 But I'm not going to do it here because what we can do is at this moment, we can switch to our Visual 00:40.670 --> 00:43.190 Studio Code and finish the process over there. 00:43.190 --> 00:44.390 So I will do that now. 00:45.830 --> 00:46.310 Okay. 00:46.310 --> 00:52.610 We are inside Visual Studio Code and I have that folder open so you can see here Movie Writer. 00:52.610 --> 00:56.210 And what I have inside is I have a source and I have a public. 00:56.240 --> 00:59.780 At the moment we will do the we will deal with the source. 00:59.780 --> 01:02.750 But before we will do that let's run the application. 01:02.760 --> 01:07.080 So click on the terminal here and I will say new terminal. 01:07.200 --> 01:11.520 And here what I can do is I'm inside her already that folder. 01:11.520 --> 01:13.770 So I can do npm start. 01:17.700 --> 01:20.550 And there is some error here. 01:20.550 --> 01:22.650 I'm not really sure why this is happening. 01:22.680 --> 01:27.420 And probably by the time you will watch this, this will be resolved. 01:27.420 --> 01:31.110 But I have some problems with this library here. 01:31.110 --> 01:34.980 So it's basically cannot find a module a, a g, v. 01:35.220 --> 01:37.710 So that means I will need to install. 01:37.710 --> 01:39.120 That will fix it for me probably. 01:39.120 --> 01:45.870 You don't have to do that step but I will do npm install d and then. 01:48.030 --> 01:52.950 This packet and once it is installed I will do npm start. 01:53.700 --> 01:55.290 And it should be okay now. 01:55.380 --> 01:57.570 So probably you don't have to do that step. 01:57.570 --> 01:59.190 But in case you need to do it. 01:59.190 --> 02:01.920 And that will be way to solve it. 02:05.620 --> 02:09.100 And our application is up and running on localhost 3000. 02:09.100 --> 02:13.600 We can see a logo of react and some basic setup here. 02:13.600 --> 02:17.110 So what we will do in this video we will clean up a little bit. 02:18.730 --> 02:22.960 We have a lot of things here that we actually don't need. 02:22.960 --> 02:25.930 So I will open app.js here. 02:25.930 --> 02:31.360 This is basically um the page that we see there. 02:31.390 --> 02:36.970 I will leave the this app and this header and I will remove all the rest of it. 02:36.970 --> 02:38.440 So let's see. 02:38.470 --> 02:44.860 We will put H1 here and I can have a heading of movie writer for now. 02:45.160 --> 02:47.020 So we don't need that logo. 02:47.050 --> 02:48.400 We can remove it from here. 02:48.400 --> 02:51.400 And we can also remove the logo from here. 02:51.400 --> 02:53.830 So I will move it to trash. 02:53.860 --> 02:57.550 Another thing, what we are not going to do is we are not going to do any tests. 02:57.550 --> 02:59.860 So we have to a basic test here. 02:59.860 --> 03:06.280 I could remove it just for a sake of having everything a little bit simpler, and then set up test here. 03:06.280 --> 03:07.410 I can also remove it. 03:07.410 --> 03:13.140 So I do encourage you to write your own test for the application, but this is outside of the scope 03:13.140 --> 03:17.430 of this tutorial, so I will remove it just to have like a less files. 03:17.430 --> 03:23.370 So what we have here also is in the app.js we load up CSS. 03:23.460 --> 03:24.390 That will be the styles. 03:24.390 --> 03:31.230 But most of the things we removed so we don't need actually app logo, we don't need that app logo animation. 03:31.230 --> 03:32.430 So we remove that. 03:32.460 --> 03:34.350 I can leave app and app header. 03:34.350 --> 03:35.970 That's what we have done. 03:35.970 --> 03:39.930 We can remove the all the rest of the the things there. 03:39.930 --> 03:46.200 So I will leave with two two classes here and that two classes are here. 03:46.200 --> 03:53.490 So if I will go back here I have a movie radiator here and this is running. 03:53.490 --> 03:56.820 You can see here on the react app here. 03:56.820 --> 04:00.540 It's actually a name of the application. 04:00.540 --> 04:06.840 So if we go to public we can open index.html. 04:06.840 --> 04:09.640 And you can see under title. 04:09.640 --> 04:11.500 Here we have react app. 04:11.500 --> 04:13.960 This is what we can actually change it. 04:13.960 --> 04:17.050 So I will change it to Movie Rater. 04:17.050 --> 04:19.900 And that will be the title of our tab here. 04:19.900 --> 04:27.190 So I can close it and I can close also that we also have some logo, icon and favicon if I will open 04:27.190 --> 04:27.790 the favicon. 04:27.790 --> 04:29.080 This is the favicon. 04:29.080 --> 04:31.660 You can also change that if you like. 04:31.660 --> 04:35.710 So if you have your own orders, online generators for favicon. 04:35.710 --> 04:41.980 If you have your own graphics, you can generate the ICO from it and just replace this one and that 04:41.980 --> 04:42.970 will be enough. 04:42.970 --> 04:45.700 And you have the same with some some logos here. 04:45.700 --> 04:52.810 So if you open this, this will be used for, for example, if you have a shortcut on your mobile for 04:52.810 --> 04:54.310 the application, this will be used. 04:54.310 --> 05:03.070 So if you have your own asset just replace those um five 512 and 192 and the favicon okay. 05:03.070 --> 05:05.560 So that's a good enough for a start. 05:05.560 --> 05:11.020 We have our application up and running and we will start developing our application in the next video.