1 00:00:00,360 --> 00:00:04,120 Because we know that we are done with the introduction, let's start building the application. 2 00:00:04,140 --> 00:00:06,160 Let's start going to. 3 00:00:07,500 --> 00:00:15,210 I hope you have installed me as good on your system, so we'll be calling on your school that ID or 4 00:00:15,210 --> 00:00:17,670 the coordinator, which we are going to use today in our project. 5 00:00:17,670 --> 00:00:23,280 So if you're an organ installer to install it or you can use and the other one like items online or 6 00:00:23,280 --> 00:00:24,690 any other which you want. 7 00:00:25,170 --> 00:00:26,280 There's no problem with it. 8 00:00:26,850 --> 00:00:28,140 Things are exactly the same. 9 00:00:29,070 --> 00:00:34,470 But the thing is, in the school, we have some special extensions which will be making use of. 10 00:00:34,470 --> 00:00:36,780 So I would recommend you to you to be a. 11 00:00:37,470 --> 00:00:39,690 But it's not the end of the world. 12 00:00:39,700 --> 00:00:42,150 You can use anything at the last. 13 00:00:43,040 --> 00:00:43,360 OK. 14 00:00:43,610 --> 00:00:48,350 So after installing the escort, if you don't have installed and if you have just opened it. 15 00:00:48,590 --> 00:00:51,680 So after opening it, you just need to go to the terminal. 16 00:00:51,740 --> 00:00:53,450 Don't worry about what I was showing you. 17 00:00:53,450 --> 00:00:57,560 I just just listen to what the commands of we need to follow. 18 00:00:57,710 --> 00:01:03,770 So just to click on the terminal and the new terminal, and then you will get a terminal or command 19 00:01:03,770 --> 00:01:04,670 prompt in your case. 20 00:01:04,670 --> 00:01:12,050 For me, I'm using the place, so I have the Ubuntu terminal here, but you might be using command prompt 21 00:01:12,050 --> 00:01:13,970 on Windows, so there's no problem with that. 22 00:01:14,570 --> 00:01:15,770 Things are exactly the same. 23 00:01:16,100 --> 00:01:21,350 OK, so here's what we need to do is you need to create that project. 24 00:01:21,730 --> 00:01:27,110 Now what is the project near the starting project, which is given to us by the project? 25 00:01:28,040 --> 00:01:34,670 So all the Normandy will send all that we need to install so that everything is installed by that particular 26 00:01:35,030 --> 00:01:37,490 command, which we are going to type right now. 27 00:01:37,970 --> 00:01:41,900 So let me just show you what you need to do. 28 00:01:41,900 --> 00:01:46,670 So the very first thing you need to check in the terminal if you have an audience and then be installed 29 00:01:46,670 --> 00:01:51,980 on a computer because that's really important for to work in the act, you need to have an audience 30 00:01:51,980 --> 00:01:53,360 and then be installed on a computer. 31 00:01:53,900 --> 00:01:57,140 So let me tap the command to check if it's installed or not. 32 00:01:57,140 --> 00:02:00,470 So that command is not hyphen iPhone version. 33 00:02:01,410 --> 00:02:07,290 And you can see there's a version of sixteen point one zero point zero, so this is the version that 34 00:02:07,290 --> 00:02:08,550 means it to successfully install. 35 00:02:08,880 --> 00:02:12,090 Next, we'll check the inputs and PM hyphen iPhone version. 36 00:02:12,090 --> 00:02:14,370 Same command, just the name is different. 37 00:02:14,700 --> 00:02:20,430 So for that, we have 7.2 4.0 editors also successfully installed on our machine. 38 00:02:20,730 --> 00:02:27,270 So if this divergence also shows up, that means that to successfully install and if it's not, then 39 00:02:27,270 --> 00:02:28,470 you need to download it. 40 00:02:28,800 --> 00:02:30,420 This a really simple process. 41 00:02:30,420 --> 00:02:40,080 You can just go to the browser and you can search for or just sort of AIG and from after going to this 42 00:02:40,080 --> 00:02:40,560 website. 43 00:02:40,560 --> 00:02:47,460 Or you can just download install it from here and that installer Insta like you have to install that 44 00:02:47,460 --> 00:02:50,970 and Node.js will be installed on your computer. 45 00:02:51,120 --> 00:02:57,360 And along with that, and people will also be installing a computer like boot installed from this particular 46 00:02:57,360 --> 00:03:04,440 installer so that you don't need to be it from separate off or website or separate application. 47 00:03:04,440 --> 00:03:05,380 So that is won't do. 48 00:03:05,750 --> 00:03:12,990 OK, so moving on, let's go back to our router and here now what we'll do is we'll create three or 49 00:03:12,990 --> 00:03:20,340 four projects and to create that, we will need to execute this commander to the space, create and 50 00:03:20,550 --> 00:03:23,460 react open app and give this space. 51 00:03:23,460 --> 00:03:28,020 And now we will give the name of the application, which we want to create. 52 00:03:28,410 --> 00:03:33,600 So in my case, I have given Google search and this is completely up to you. 53 00:03:33,600 --> 00:03:35,380 You can give any name you want. 54 00:03:35,400 --> 00:03:40,440 This is purely a string, or you can give numbers all to no problem, but you don't have to give space 55 00:03:40,460 --> 00:03:41,280 in between the name. 56 00:03:41,300 --> 00:03:46,890 So remember the name of the production or type of speakers I fund can be given no problem. 57 00:03:47,190 --> 00:03:51,960 So for now, we will give the Google search. 58 00:03:52,200 --> 00:03:54,570 So this is the name of the application which you have given now. 59 00:03:54,570 --> 00:03:58,200 What will happen is that a product will be created by this name. 60 00:03:58,210 --> 00:03:59,310 This is the Google search. 61 00:03:59,550 --> 00:04:05,700 So the first thing which will be done is the directory or the folder will be created by the statement 62 00:04:05,700 --> 00:04:07,140 inside that particular folder. 63 00:04:07,550 --> 00:04:11,010 Our project will be created, our project will be created. 64 00:04:11,310 --> 00:04:13,320 So this is how things will work. 65 00:04:13,530 --> 00:04:19,530 So after tapping the command, you need to just hit enter and the installation process will begin and 66 00:04:19,530 --> 00:04:26,100 it will take around five to six to even 10 minutes to install, depending on the processing power and 67 00:04:26,370 --> 00:04:31,170 internet speed of your system, so that it's completely fine. 68 00:04:31,350 --> 00:04:34,430 So if it takes a little longer, don't worry and don't panic. 69 00:04:34,470 --> 00:04:39,300 This is a usual process like it takes a little time only also takes around five to six minute. 70 00:04:39,630 --> 00:04:46,380 So once it is done so, I will not do it because I have already installed and I've already created the 71 00:04:46,380 --> 00:04:46,800 project. 72 00:04:46,800 --> 00:04:49,110 So because it takes a little time, so I have already done it. 73 00:04:49,950 --> 00:04:56,760 There's no special thing to start this command and and it will create a folder and inside the folder 74 00:04:56,760 --> 00:04:57,540 will be your files. 75 00:04:58,290 --> 00:05:02,160 Now we're going to do after you have installed the project. 76 00:05:03,340 --> 00:05:09,520 You need to open that particular folder for me is it is like this Google search this folder. 77 00:05:09,760 --> 00:05:17,980 So after installing, you need to open that folder with the help of VSCO to open the folder with VSCO 78 00:05:18,600 --> 00:05:19,510 electrical system. 79 00:05:20,110 --> 00:05:25,960 So what you will see is after you open that, you will see some files here and some folders here. 80 00:05:26,260 --> 00:05:29,240 So you need to see to these folders. 81 00:05:29,260 --> 00:05:34,520 Let me explain one by one what folder is for what use for the very first. 82 00:05:34,540 --> 00:05:38,500 This is the version generated by VSCO could be inaugurated next to the node module. 83 00:05:38,510 --> 00:05:39,940 So this is a very important folder. 84 00:05:40,510 --> 00:05:47,980 All the models are in this morning's and don't delete this folder or don't do anything inside this folder. 85 00:05:47,980 --> 00:05:49,570 Don't need to touch this folder. 86 00:05:49,900 --> 00:05:51,580 Next, we have the folder inside. 87 00:05:51,580 --> 00:05:58,570 This only one file is useful that is the index to estimate and that it's completely fine to. 88 00:06:02,210 --> 00:06:03,200 Who inside this? 89 00:06:03,230 --> 00:06:07,670 Only the one five, which is important is the index or the other things you can delete. 90 00:06:07,970 --> 00:06:08,960 There's no problem with that. 91 00:06:09,200 --> 00:06:13,580 Next, we have the essentially for all, this was one of the main folder in which we will be working 92 00:06:13,580 --> 00:06:15,650 most of the times, like 99 percent of the time. 93 00:06:15,650 --> 00:06:21,110 We'll be working inside this folder only and all the important files or little files would be presented 94 00:06:21,110 --> 00:06:24,470 inside this folder only. 95 00:06:24,950 --> 00:06:31,610 So the main thing here is is the app folder when you come to school and you go to a producer at the 96 00:06:31,610 --> 00:06:32,110 root file. 97 00:06:32,180 --> 00:06:34,760 This is the main file like any component you create. 98 00:06:34,760 --> 00:06:37,340 That component will be rendered inside this folder. 99 00:06:37,550 --> 00:06:44,030 And after you imported inside this and then, then only it will be reflected in the browser and otherwise 100 00:06:44,030 --> 00:06:47,220 it would not be reflected and it will just remain as it is. 101 00:06:47,300 --> 00:06:53,450 This is the we can call it as a base component or the tool component. 102 00:06:53,470 --> 00:06:54,410 Also, it can be called. 103 00:06:54,770 --> 00:06:56,900 And this is the main component. 104 00:06:57,560 --> 00:06:59,370 Next, we will have the next audio file. 105 00:06:59,390 --> 00:07:01,070 This is also really, really important. 106 00:07:01,070 --> 00:07:04,130 File like this is tool component. 107 00:07:04,130 --> 00:07:09,470 This is even higher than the app, just like the top-level component and after that comes to ABDEL-ATI. 108 00:07:09,780 --> 00:07:15,590 So this is responsible for this sending our data to the index of legitimate and rendering it to the 109 00:07:15,590 --> 00:07:16,100 browser. 110 00:07:16,430 --> 00:07:17,000 So. 111 00:07:18,130 --> 00:07:23,470 Now you need to do a little bit of cleanup because you will have some more files and folders here, 112 00:07:23,740 --> 00:07:28,780 and I want you to delete those files and folders and clean up a little bit too. 113 00:07:29,740 --> 00:07:32,650 So let me tell you what to keep and what you don't need to keep. 114 00:07:33,010 --> 00:07:35,080 So don't you don't need to. 115 00:07:35,410 --> 00:07:40,020 But these folders like in order to more public and this will follow these folders will be as it is, 116 00:07:40,030 --> 00:07:42,290 don't build anything from them. 117 00:07:42,330 --> 00:07:44,010 Don't even touch them the next. 118 00:07:44,030 --> 00:07:45,310 When you come to the source folder. 119 00:07:45,310 --> 00:07:52,370 Inside this, you might have you might be having some files like the report, web vitals or past 2.2 120 00:07:52,420 --> 00:07:54,610 years or something like that to just delete them. 121 00:07:54,610 --> 00:07:59,560 Just keep whatever is shown here on this screen, just abroad and the next two years. 122 00:07:59,980 --> 00:08:04,180 And here, because a lot of packages long producing and package distribution will be there, don't delete 123 00:08:04,180 --> 00:08:04,390 them. 124 00:08:04,630 --> 00:08:09,670 And the still windows config will come after you install detailed one it so that I have already done 125 00:08:09,670 --> 00:08:09,880 so. 126 00:08:09,890 --> 00:08:12,310 It's there, but I will show you how to do that. 127 00:08:12,430 --> 00:08:13,750 So don't worry about that. 128 00:08:14,020 --> 00:08:15,250 OK, so. 129 00:08:16,310 --> 00:08:22,940 This is that what you will do, and next you will come to the abroad file and this is the main file, 130 00:08:23,120 --> 00:08:28,760 so here that there will be some extra piece of code written, but you don't need that code, actually. 131 00:08:28,760 --> 00:08:34,430 So just delete that code and make your androgynous look something like this should look something like 132 00:08:34,430 --> 00:08:34,700 this. 133 00:08:34,940 --> 00:08:41,250 There will be some extra code extreme botox export so that you don't actually need to just delete them. 134 00:08:41,270 --> 00:08:48,350 OK, so next, let us go ahead and test an application that if it's a correctly, successfully installed 135 00:08:48,350 --> 00:08:54,350 or not, and then it's showing everything in the browser or not if it's rendering things in the browser 136 00:08:54,350 --> 00:08:54,710 or not. 137 00:08:55,860 --> 00:09:02,910 Well, let me just do this, so let me type out something, for example, here I will write a law world 138 00:09:03,600 --> 00:09:06,930 we are making. 139 00:09:08,590 --> 00:09:10,810 Google search. 140 00:09:12,290 --> 00:09:13,690 Two, using the. 141 00:09:14,690 --> 00:09:16,490 And you will save it. 142 00:09:16,820 --> 00:09:24,150 And now what we will do is how to run deep about how to run this, our world and how to see our things 143 00:09:24,150 --> 00:09:25,400 alive on the browser. 144 00:09:25,760 --> 00:09:26,780 So that is the question. 145 00:09:27,180 --> 00:09:29,540 So I'll give you the answer of that question. 146 00:09:29,540 --> 00:09:36,170 You need to type a command inside the tunnel so you can also open the tunnel by control and Bektic after 147 00:09:36,170 --> 00:09:38,120 that terminal will open control. 148 00:09:38,450 --> 00:09:44,570 You can also closed by control Bektic, and you can open it by control and Bektic by figures like above 149 00:09:44,570 --> 00:09:45,350 the Tab Key. 150 00:09:45,860 --> 00:09:46,640 That's the backpack. 151 00:09:46,850 --> 00:09:47,150 OK. 152 00:09:47,600 --> 00:09:52,340 Next thing to do is you need to navigate to that particular folder, ordinary to go to that particular 153 00:09:52,340 --> 00:09:54,920 folder where your product is residing. 154 00:09:54,920 --> 00:09:56,090 So in my case, it is. 155 00:09:56,660 --> 00:10:00,800 We will do a series of images directly, so we will go project. 156 00:10:00,800 --> 00:10:05,480 And here that is the Google search inside the Google search. 157 00:10:05,490 --> 00:10:08,960 What you will do is you will type this command, which I'm going to show you. 158 00:10:09,260 --> 00:10:15,530 And after that, you will be running your server, your own server, on the local host, on a particular 159 00:10:15,530 --> 00:10:15,830 port. 160 00:10:15,830 --> 00:10:18,710 Probably, it's probably it's three thousand. 161 00:10:19,010 --> 00:10:23,240 So let me do that, parents and PM space start. 162 00:10:23,870 --> 00:10:28,970 So this will start off the server, and that is a problem. 163 00:10:30,620 --> 00:10:33,120 OK, so we had a problem in our package. 164 00:10:33,560 --> 00:10:38,270 Yes, and like when I was building the application, I was testing it out, so I had some changes which 165 00:10:38,540 --> 00:10:39,380 will do in the future. 166 00:10:39,380 --> 00:10:42,950 And I like forgot to delete those dinners because we will do it again. 167 00:10:43,280 --> 00:10:44,390 That's why that was that. 168 00:10:44,420 --> 00:10:50,000 But now, if future 10 p.m. start and our salad will start normally, I guess. 169 00:10:51,040 --> 00:10:55,600 And this will take around like five to 10 seconds or maybe less than that. 170 00:10:56,480 --> 00:10:59,980 There's no problem to like that. 171 00:10:59,980 --> 00:11:00,880 It will take a more time. 172 00:11:01,180 --> 00:11:07,120 It will be just running in two seconds like we are doing it for the very first time after creating the 173 00:11:07,120 --> 00:11:07,420 project. 174 00:11:07,420 --> 00:11:08,800 So that's why it takes a little longer. 175 00:11:08,920 --> 00:11:14,740 As you can see, Sara is running on 3000 of the local host and this is the URL which is given to us 176 00:11:14,740 --> 00:11:17,690 or our servers running the localhost three thousand. 177 00:11:17,710 --> 00:11:22,600 So now you can go to the browser and you can open this, you are it, and you will see your genius live 178 00:11:22,600 --> 00:11:23,290 on the browser. 179 00:11:23,770 --> 00:11:25,090 Let me take you to the browser. 180 00:11:26,270 --> 00:11:33,200 And how you can see whatever we wrote in the Proteas, so that thing is being rendered here and the 181 00:11:33,200 --> 00:11:35,240 world we are making will search using react. 182 00:11:35,780 --> 00:11:37,160 And that is it. 183 00:11:37,160 --> 00:11:44,390 I think, you know, our our app is working fine and we can move ahead and start building other components 184 00:11:44,390 --> 00:11:48,500 inside the application and start installing some other important things. 185 00:11:48,830 --> 00:11:50,870 So see in the next video.