1 00:00:00,060 --> 00:00:04,800 Focusing on that, we are done with the introduction part, let's start coding the project and let's 2 00:00:04,800 --> 00:00:05,640 start building it. 3 00:00:06,180 --> 00:00:12,180 So the very first thing you need to do is if you are new to react and you have not installing and an 4 00:00:12,300 --> 00:00:16,110 just so you need to install that first, then your computer. 5 00:00:16,500 --> 00:00:21,180 Before that, you need to go to this website and this one. 6 00:00:21,780 --> 00:00:22,250 No. 7 00:00:23,350 --> 00:00:31,600 Well, gee, and after going through this website, you can download the installer and install the application 8 00:00:31,600 --> 00:00:34,990 and that will install just as well as the npm on your computer. 9 00:00:35,320 --> 00:00:36,970 Next, you will need a coordinator. 10 00:00:36,970 --> 00:00:43,270 So I am personally using a score for this project, and I will recommend that only for you so you can 11 00:00:43,270 --> 00:00:45,250 just to download it. 12 00:00:45,460 --> 00:00:48,220 You can just type in Google and you can just simply download it. 13 00:00:48,640 --> 00:00:52,930 There's no issue with that as an ongoing installation process like any other software in the world. 14 00:00:53,650 --> 00:01:01,750 So once you are done with that, then you can just open Visual Studio code, and at the beginning it 15 00:01:01,750 --> 00:01:03,330 will look something like this. 16 00:01:03,340 --> 00:01:05,040 I'm not saying exactly like this. 17 00:01:05,050 --> 00:01:12,460 It may look something different because I have opened it with the folder directory so that it doesn't 18 00:01:12,460 --> 00:01:12,970 matter now. 19 00:01:13,300 --> 00:01:14,830 So that will look something like this. 20 00:01:15,100 --> 00:01:15,940 Everything will be same. 21 00:01:16,930 --> 00:01:20,710 So now what you need to do is you need to install the React project. 22 00:01:21,160 --> 00:01:24,160 And now what is the Deac project? 23 00:01:24,490 --> 00:01:32,230 Is the like starting and starting for project, which is like having components with the same export 24 00:01:32,230 --> 00:01:38,200 and import like everything which is common in every project that is brought together, and it is clear 25 00:01:38,200 --> 00:01:39,010 that he had project. 26 00:01:39,340 --> 00:01:42,640 So that is the like the starting part, but it is really important. 27 00:01:42,640 --> 00:01:45,070 Without that, you cannot like build applications. 28 00:01:45,910 --> 00:01:50,350 OK, so that will be some node warnings and then all of the things that needs to be installed before 29 00:01:50,350 --> 00:01:52,720 moving further so that, you know, to do so. 30 00:01:52,720 --> 00:01:57,370 For that, you need to go to the terminal and you need to click on the new terminal. 31 00:01:58,960 --> 00:01:59,920 And when did you? 32 00:02:01,530 --> 00:02:08,580 And now what you do is you need to direct to the folder where you need to create or install the application. 33 00:02:09,030 --> 00:02:14,850 Or maybe if you want to install on the two or three only or the home directory only. 34 00:02:14,850 --> 00:02:16,050 So there is no problem with that. 35 00:02:16,500 --> 00:02:19,230 So the command for this is simple. 36 00:02:19,230 --> 00:02:23,640 But before that, let me check if npm and or just install or not on my computer. 37 00:02:24,000 --> 00:02:28,110 So for that, I will write npm if one iPhone version. 38 00:02:28,320 --> 00:02:29,580 So this will display me. 39 00:02:29,580 --> 00:02:34,320 There was know found them and it's just playing the version that needs and be successfully installed 40 00:02:34,320 --> 00:02:35,760 and you're good to go. 41 00:02:36,030 --> 00:02:41,460 But before that, let me check the node version also node I hyphen version. 42 00:02:41,940 --> 00:02:43,220 So what? 43 00:02:43,320 --> 00:02:45,180 These things are successfully installed. 44 00:02:45,420 --> 00:02:46,990 That means the tool. 45 00:02:47,010 --> 00:02:47,880 Let me clear this. 46 00:02:49,330 --> 00:02:52,590 Now we can use all the commands of npm and the app. 47 00:02:52,990 --> 00:02:59,380 OK, so the first thing which you do is we need to install the application, the application default. 48 00:02:59,770 --> 00:03:06,750 So for that, there is a command that is the end be x space create, but be it. 49 00:03:07,760 --> 00:03:16,010 iPhone, the iPhone app, and create a tap in the space and then you need to provide the name of the 50 00:03:16,010 --> 00:03:16,580 application. 51 00:03:16,880 --> 00:03:18,880 There's no compulsion you can provide any name. 52 00:03:18,890 --> 00:03:25,130 So basically this name is the name of the directory in which the application will be deciding, as well 53 00:03:25,130 --> 00:03:26,210 as the name of the project. 54 00:03:26,240 --> 00:03:26,660 So. 55 00:03:27,990 --> 00:03:29,790 For this, I have to review. 56 00:03:30,750 --> 00:03:36,810 And like this, and it's a purely string, you can choose anything alphanumeric, basically, you can 57 00:03:37,200 --> 00:03:38,490 provide some numbers also. 58 00:03:38,790 --> 00:03:39,780 There's no problem with that. 59 00:03:42,210 --> 00:03:46,760 But remember, don't provide spaces in between like you provide space and light, something else that 60 00:03:46,770 --> 00:03:53,160 will not be considered as a valid project name who can provide hyphen and then and then it's OK. 61 00:03:53,730 --> 00:04:00,660 So after that, what you need to do is you can just hit enter and it will take about five to six minutes 62 00:04:00,660 --> 00:04:04,560 or maybe even 10 minutes to install the application because it's quite large. 63 00:04:04,560 --> 00:04:10,410 And it also depends on the verses and color of your PC and your internet speed, obviously. 64 00:04:11,430 --> 00:04:20,280 So that is what it is, and depending factors on the installation time and once it is completed, it 65 00:04:20,280 --> 00:04:24,960 will show you and message a message which says, Happy hacking. 66 00:04:25,310 --> 00:04:30,880 Once you see happy hacking, that means you have successfully installed, you know, the application, 67 00:04:30,920 --> 00:04:32,430 the starting or free application. 68 00:04:32,790 --> 00:04:33,990 And then you do. 69 00:04:34,260 --> 00:04:39,600 So once you see that happy hacking message and it's installed to what you need to do is to just open 70 00:04:39,600 --> 00:04:40,600 that hole directly. 71 00:04:40,620 --> 00:04:44,870 That will be a directory like this and open that hole. 72 00:04:44,910 --> 00:04:46,110 You can see the name. 73 00:04:46,680 --> 00:04:50,880 OK, so you can open that whole directory with voice code. 74 00:04:51,270 --> 00:04:52,590 You have to open it, basically. 75 00:04:52,950 --> 00:04:59,910 But once you do that, your terminal, you will see a folder structure, something like this, that 76 00:04:59,910 --> 00:05:04,950 there will be maybe some things are not on there like this with your score and all that no problem. 77 00:05:05,310 --> 00:05:10,110 But the basic structure will look like this, and there will be some folders like node modules public 78 00:05:10,110 --> 00:05:10,920 as optional. 79 00:05:11,370 --> 00:05:15,150 So in that you need to delete, delete some of the files. 80 00:05:15,450 --> 00:05:17,720 Basically, the report web vital that they're stored. 81 00:05:17,730 --> 00:05:21,000 Yes, and the logo and all that you don't need. 82 00:05:21,600 --> 00:05:26,490 We are not the building application that goes into the production and that needs to be tested wisely. 83 00:05:26,490 --> 00:05:29,010 And so we are building a simple application. 84 00:05:29,460 --> 00:05:32,460 So that's why we don't need any testing at all. 85 00:05:32,760 --> 00:05:39,210 So now what we need to do is you need to go to this after deleting that, after deleting all the files 86 00:05:39,210 --> 00:05:42,870 and cleaning up everything and the full structure should look something like this. 87 00:05:43,220 --> 00:05:44,850 And but then you need to open this. 88 00:05:45,330 --> 00:05:51,710 You don't have to take this node models folder and the public folder are and leave it like they as it 89 00:05:51,720 --> 00:05:51,890 is. 90 00:05:52,200 --> 00:05:55,410 So inside these sorts will the subsidy folder. 91 00:05:55,740 --> 00:05:56,900 What is that? 92 00:05:57,180 --> 00:06:03,420 That is the abductees and an index tortillas and exhausted, it says maybe abroad to get us out of this 93 00:06:03,430 --> 00:06:04,500 debt problem. 94 00:06:04,830 --> 00:06:07,470 But other than this, whatever is there, just deleted. 95 00:06:07,830 --> 00:06:13,370 And what you need to do is you need to open the in this file, which is the abnormal. 96 00:06:13,380 --> 00:06:19,620 And yes, after opening this file, your file will be quite different from mine if you have just installed 97 00:06:19,620 --> 00:06:20,280 the application. 98 00:06:20,700 --> 00:06:28,110 And before that, what you need to do is to clean up that and make it look like this. 99 00:06:28,790 --> 00:06:31,740 This just for lines it should be looking like this. 100 00:06:32,160 --> 00:06:38,490 Put a report where vitals and like there will be some import and there will be some other other things 101 00:06:38,880 --> 00:06:41,640 other gold, a piece of code which we don't need. 102 00:06:41,640 --> 00:06:42,390 Exactly. 103 00:06:42,630 --> 00:06:47,640 So you can just delete that and you can make it look like this. 104 00:06:48,230 --> 00:06:55,290 Once it looks like this, then you need to test out an application now how to best start application 105 00:06:55,290 --> 00:07:01,710 or how to see whatever the genius which we are making inside the browser or to get those reflections 106 00:07:01,710 --> 00:07:02,340 in the browser. 107 00:07:02,670 --> 00:07:08,280 Before that, you need to spin up a server and their server will be spinning on a particular port on 108 00:07:08,280 --> 00:07:12,420 the local host, and then you can just review it in the browser before that. 109 00:07:12,450 --> 00:07:16,920 First of all, you need to open the terminal and you can open from here also. 110 00:07:17,220 --> 00:07:22,190 But there's a shortcut for opening the terminal that is the control plus backpacks. 111 00:07:22,560 --> 00:07:28,290 So after coming here, you know, to go to the, you know, to navigate to the folder where you have 112 00:07:28,290 --> 00:07:30,570 created the applications, for example. 113 00:07:31,500 --> 00:07:32,040 And. 114 00:07:33,220 --> 00:07:40,210 Projects and then for me, it is a review, and then you can just see what are the things are that inside 115 00:07:40,210 --> 00:07:41,740 the folder using the Ellis command? 116 00:07:42,010 --> 00:07:46,930 And you can see all of the things are exactly same that look package lock and the Normandy's and the 117 00:07:47,200 --> 00:07:48,160 SHC folder. 118 00:07:48,370 --> 00:07:50,350 So all other things are the same only. 119 00:07:50,620 --> 00:07:51,700 So that is it. 120 00:07:51,910 --> 00:07:54,670 So now we're going to do is going to spin up the server. 121 00:07:54,970 --> 00:08:02,850 And for that, you need to run a command that is the npm spears start, S.T.A.R.T. start and then it'll 122 00:08:02,870 --> 00:08:03,850 just hit enter. 123 00:08:04,030 --> 00:08:07,390 So it will take a few seconds to spin up the server. 124 00:08:07,750 --> 00:08:12,310 And once it is done, you can just go to the browser and you can just. 125 00:08:13,790 --> 00:08:20,660 Open on the boat like probably the number three thousand on local host, but once you are done, then 126 00:08:20,660 --> 00:08:27,020 you can open it and it will be like disappeared on your browser so you can see it compiled successfully. 127 00:08:27,020 --> 00:08:32,590 And it is showing us like where you are and the localhost three thousand, and this is also localhost 128 00:08:33,140 --> 00:08:33,670 three thousand. 129 00:08:34,010 --> 00:08:38,320 So then you can just call to the browser and let me show you how it looks. 130 00:08:38,450 --> 00:08:40,640 It is basically an empty project right now. 131 00:08:40,640 --> 00:08:41,300 There's nothing. 132 00:08:42,020 --> 00:08:49,310 So let me just add something so that something is displayed and we can, like, test our application 133 00:08:49,310 --> 00:08:49,790 properly. 134 00:08:50,180 --> 00:08:52,670 So right here. 135 00:08:52,730 --> 00:08:53,540 Hello, world. 136 00:08:54,710 --> 00:08:55,900 Hello, world. 137 00:08:56,510 --> 00:08:58,460 That's what the world. 138 00:09:00,460 --> 00:09:03,490 This is the. 139 00:09:04,840 --> 00:09:05,530 Do you? 140 00:09:06,670 --> 00:09:08,830 Application and I it. 141 00:09:11,010 --> 00:09:13,560 And now when I go to the browser. 142 00:09:14,870 --> 00:09:21,530 You can see whatever time is displayed here, that means our application is working fine and it is it 143 00:09:21,530 --> 00:09:26,900 has been installed successfully and whatever we were like, whatever we were typing. 144 00:09:26,900 --> 00:09:28,820 So that is being displayed properly. 145 00:09:28,820 --> 00:09:35,870 So this was the expected behavior of an application and which simply means that the solution was successful 146 00:09:35,870 --> 00:09:40,250 and now we can move ahead and we can do the rest of the things. 147 00:09:41,650 --> 00:09:43,810 OK, so now what we will do is. 148 00:09:45,290 --> 00:09:51,870 He would come here and let me minimize the terminal and minimizing doesn't mean I'm closer to running 149 00:09:51,870 --> 00:09:52,500 in the background. 150 00:09:52,930 --> 00:09:58,950 You know, what I need to do is you need to create a folder here, which is the components folder and 151 00:09:58,950 --> 00:10:00,360 insert the components folder. 152 00:10:00,360 --> 00:10:03,710 All of the components would be there like, let me show you. 153 00:10:04,910 --> 00:10:11,060 But this was our application, and here, for example, this this is the like and never borrowed the 154 00:10:11,060 --> 00:10:17,540 header section and the colored button, there's this search bar to denote the note list. 155 00:10:17,840 --> 00:10:22,790 Every single thing is a different component and every single thing will be developed separately. 156 00:10:23,030 --> 00:10:29,440 Like, anything would not be like dependent on one another, like all developed together in one page. 157 00:10:29,450 --> 00:10:35,870 Not everything is a different component, and everything will be developed or coded separately. 158 00:10:36,050 --> 00:10:40,670 And then we can just bring together everything, and then the application will look like this. 159 00:10:40,880 --> 00:10:47,060 So this is the main pillar of react that you don't need to like, write every, every code and just 160 00:10:47,060 --> 00:10:54,560 one index for extreme weather and one index toward the file or in one style or CSC unit to write all 161 00:10:54,560 --> 00:10:55,100 of the cases. 162 00:10:55,100 --> 00:10:55,370 No. 163 00:10:55,610 --> 00:11:03,230 You can just customize every single component separately, and then you can just do much and bring two 164 00:11:03,230 --> 00:11:09,770 together every application and you can just importing the ABCD or JSON or directly or indirectly, then 165 00:11:09,770 --> 00:11:11,870 it will be displaying on the screen. 166 00:11:12,180 --> 00:11:16,310 So this whole application is consisting of different, different components. 167 00:11:16,340 --> 00:11:21,050 This is not just coded in one apply one page or one index for each team. 168 00:11:21,560 --> 00:11:23,170 So that is what we are going through now. 169 00:11:23,180 --> 00:11:28,850 We are going to create the components folder inside that will be creating different, different components 170 00:11:28,850 --> 00:11:35,030 using videos, file, for example, the header third and everything so that we will do in the next video. 171 00:11:36,340 --> 00:11:36,640 So. 172 00:11:37,460 --> 00:11:40,280 And it will create a folder and will do everything the next video.