1 00:00:00,420 --> 00:00:05,070 So until application is complete, you need to move into application, and for that purpose, we will 2 00:00:05,070 --> 00:00:07,650 be changing the trees to our password generator. 3 00:00:08,190 --> 00:00:13,350 So just click on it and then city and the name of your app. 4 00:00:13,470 --> 00:00:14,760 And in my case, it's. 5 00:00:15,950 --> 00:00:17,030 Password generator. 6 00:00:18,930 --> 00:00:19,890 And then hit enter. 7 00:00:20,250 --> 00:00:26,550 So now we're obviously not inside having the escort installed, I'll just outright write code with a 8 00:00:26,550 --> 00:00:30,450 PDA to open up my vehicle, an instance of a pathogen into that. 9 00:00:33,010 --> 00:00:36,220 So this is the vehicle instance of the pathogen data. 10 00:00:36,850 --> 00:00:41,650 Now if I just look at the source directly here we have an abducted is digest. 11 00:00:42,130 --> 00:00:43,900 So just head into our digest. 12 00:00:46,280 --> 00:00:53,160 So this is the default template that we get from creating identity now, along with the so strict we 13 00:00:53,170 --> 00:00:55,980 we have not modules we do know about and what we are doing. 14 00:00:56,020 --> 00:00:58,220 We are having a public folder in public folder. 15 00:00:58,220 --> 00:01:00,800 We are having our icon index strategy. 16 00:01:01,580 --> 00:01:03,050 So in the storage room alone. 17 00:01:03,530 --> 00:01:11,580 So it contains a head that adds some links as well as a title that is specifying react up and live with 18 00:01:11,580 --> 00:01:11,930 our data. 19 00:01:12,620 --> 00:01:18,320 So this is a place where all the compiled code is going to be dropped up in this particular divide. 20 00:01:19,850 --> 00:01:23,810 Now if we just close this and give it our first run. 21 00:01:24,950 --> 00:01:30,440 So open up your in-built terminals, which you can open up by pressing control, press back. 22 00:01:31,340 --> 00:01:32,680 So this is going to open up a domino. 23 00:01:34,220 --> 00:01:37,790 By clicking on this terminal tab and creating a new terminal. 24 00:01:39,340 --> 00:01:45,780 So any one of those is fine, just open up a terminal and run the command and start to start the application. 25 00:01:47,250 --> 00:01:52,230 Now this is going to compile the application and open up a default browser with our React app loaded, 26 00:01:52,230 --> 00:01:58,620 and so this is the default template that we get from Create React tab utility spending, react level 27 00:01:58,860 --> 00:02:07,320 and an attack that is going to take us to react juice documentation, not just head back into a quality. 28 00:02:07,620 --> 00:02:09,330 And let me just close at this terminal. 29 00:02:10,440 --> 00:02:15,090 Now let's just create a hello world component, so I need you to get rid of this head attack. 30 00:02:16,080 --> 00:02:19,290 Just get rid of this and create an etch one. 31 00:02:21,110 --> 00:02:23,510 Element so invigorating and a natural element. 32 00:02:24,050 --> 00:02:26,450 And let's just call this are Helloworld component. 33 00:02:30,450 --> 00:02:31,190 Now hit save. 34 00:02:32,140 --> 00:02:33,250 And Latvia right now. 35 00:02:35,420 --> 00:02:41,070 So here is a high level component, and we have made a first to ad component, so now head back into 36 00:02:41,070 --> 00:02:48,230 the app and now what it'll do is that doing a bit of housekeeping, let us get rid of what we do not 37 00:02:48,230 --> 00:02:49,250 need in an application. 38 00:02:49,760 --> 00:02:55,610 So the first thing that we do not need an application are these logos, as well as the thesis will be 39 00:02:55,610 --> 00:02:57,140 using SAS and obligation. 40 00:02:57,150 --> 00:02:59,390 So therefore there is no need of this Abdul thesis. 41 00:02:59,690 --> 00:03:00,770 So just get rid of this. 42 00:03:02,090 --> 00:03:08,780 Delayed this from a project structure, and apart from this ad, the thesis, I also want you to get 43 00:03:08,780 --> 00:03:15,380 rid of this Abdul astrologists, so get rid of this because he's not needed in an application. 44 00:03:16,130 --> 00:03:21,500 Apart from our, Rogers will also be getting rid of a logo that I said, you just delete it. 45 00:03:23,680 --> 00:03:25,540 OK, so we are almost done now. 46 00:03:26,210 --> 00:03:28,180 Now if I just go into my Abdul, yes. 47 00:03:28,870 --> 00:03:34,280 So this is a functional component and you have index data says that it's going to container index. 48 00:03:34,630 --> 00:03:38,230 I must say the theses properties and this is the index objects. 49 00:03:39,170 --> 00:03:46,370 So here we have an up and OK, so I want you to just change the name of your extension of the Abdul 50 00:03:46,370 --> 00:03:49,130 G.S. and moving into Abdul GSX. 51 00:03:49,590 --> 00:03:51,560 Now this is going to break up our obligation. 52 00:03:52,340 --> 00:03:58,940 If I just see if my dominance, it says that Abdul just can't find this particular file. 53 00:03:59,180 --> 00:04:04,880 It's because of the extension and it doesn't know that now we're having a different extension for our 54 00:04:04,880 --> 00:04:05,180 app. 55 00:04:05,540 --> 00:04:07,190 So let's just redeem for this. 56 00:04:07,910 --> 00:04:10,850 So then again, will been floating our app. 57 00:04:12,020 --> 00:04:19,670 This time it is going to be Abdul GSX, so here that Abdul GSX Nazir and the children find, OK, we 58 00:04:19,670 --> 00:04:23,690 have compiled everything successfully and it's running on localhost three thousand. 59 00:04:24,230 --> 00:04:26,060 So let's take a look at our application. 60 00:04:26,210 --> 00:04:31,130 So how does that up that this is completely what I wondering why it has suddenly changed places from 61 00:04:31,130 --> 00:04:33,020 the center of the screen to the left of the screen? 62 00:04:33,380 --> 00:04:38,330 Well, it's because we have defeated the ABDEL-ATI society, which contain the safest property to enter 63 00:04:38,330 --> 00:04:39,380 this particular element. 64 00:04:39,980 --> 00:04:45,290 So now we have made the necessary changes and now will be discussing the full structure of our application. 65 00:04:45,680 --> 00:04:47,150 So that is next on our list.