1 00:00:00,490 --> 00:00:05,380 OK, so now that we have installed everything, let's get to the main part, which is the creating our 2 00:00:05,380 --> 00:00:06,610 application from scratch. 3 00:00:07,270 --> 00:00:14,590 So I've already explained you the folder structure and also now will be creating the components that 4 00:00:14,590 --> 00:00:19,090 are entering the components and styling, designing them right and the logic and everything will be 5 00:00:19,090 --> 00:00:19,540 done now. 6 00:00:19,840 --> 00:00:24,730 So now you can just minimize this terminal, or obviously it will be running the whole set of it will 7 00:00:24,730 --> 00:00:27,220 be running, but that will be minimized. 8 00:00:27,790 --> 00:00:30,170 So now we need to create another component. 9 00:00:30,170 --> 00:00:32,960 So the first component which we are going to create is the nerve. 10 00:00:33,220 --> 00:00:39,040 So let me assure you, in that particular application demo, which I was showing you, the first thing 11 00:00:39,040 --> 00:00:43,060 was the never so first of all, will be creating this beautiful nav bar. 12 00:00:43,390 --> 00:00:45,490 And then we will be creating the rest of the things. 13 00:00:45,490 --> 00:00:51,490 So remember, this is are different components for this, and everybody's not like embedded in just 14 00:00:51,490 --> 00:00:52,900 one page and this is not a one. 15 00:00:53,020 --> 00:00:59,500 This is not the code for everything is not written in in just one and one just file. 16 00:00:59,500 --> 00:01:02,510 So there are particular JS files, which are known as components. 17 00:01:02,860 --> 00:01:05,320 And this is a different component. 18 00:01:05,320 --> 00:01:06,820 So that is what we are going to build. 19 00:01:07,060 --> 00:01:11,950 We are going to build this now component for the very first thing on which we are going to do. 20 00:01:12,400 --> 00:01:20,590 So let's go to ED and we need to create a board or just file, you can name it anything, but it's good 21 00:01:20,590 --> 00:01:27,790 to stick to the convention and it's good to have the like names which clearly justify the purpose of 22 00:01:27,790 --> 00:01:28,360 the component. 23 00:01:28,390 --> 00:01:28,690 OK. 24 00:01:29,080 --> 00:01:34,300 So you can create a folder here with the name of a container or component. 25 00:01:34,720 --> 00:01:40,420 But what I'll do is I'll create it like this only so it will be locally visible to you and you will 26 00:01:40,420 --> 00:01:42,910 be like understanding everything. 27 00:01:43,360 --> 00:01:46,480 So I just want to make things like clear speed as possible. 28 00:01:46,920 --> 00:01:49,210 So I created an as I see folder only. 29 00:01:49,300 --> 00:01:57,010 So that will be what you can click here and you can create a new file that can be nav bar or Jesus. 30 00:01:57,130 --> 00:02:01,200 OK, so now we're going to do is you need to write some code. 31 00:02:01,210 --> 00:02:08,470 So for that, like the default code, which is same for everything that can be directly like a guard 32 00:02:08,470 --> 00:02:14,950 phone somewhere so well that I'm using an really, really productive and useful extension, which is 33 00:02:14,950 --> 00:02:16,510 the E7 snippet. 34 00:02:16,520 --> 00:02:19,390 So I would also recommend you have installed application. 35 00:02:19,750 --> 00:02:25,960 So let me just show you first of all, which is there an application, not application actually extension? 36 00:02:25,960 --> 00:02:27,610 I'm sorry extension. 37 00:02:27,700 --> 00:02:30,820 So it's a we escort extension that you can see this one right here. 38 00:02:32,600 --> 00:02:38,720 This E7 React Redux graphic will react native snippets to just install this extension and then what 39 00:02:38,720 --> 00:02:42,980 it will do, it will give you the boilerplate code of the like. 40 00:02:42,980 --> 00:02:47,300 The Basic Basic Code will be given to the boilerplate code will be given to you. 41 00:02:47,570 --> 00:02:54,290 So you do it once you install that application, what do you need to do is to just a tablet RFID and 42 00:02:54,290 --> 00:02:59,630 then it will give you then hit enter and then it will give you the like boilerplate code. 43 00:02:59,630 --> 00:03:06,920 For me, it doesn't work for some reason, so maybe it's due to the essence of what I need to do is 44 00:03:06,920 --> 00:03:13,370 I need to do control shift and then I need to select the snippets out and then I need to do RFID. 45 00:03:13,730 --> 00:03:17,080 And then I got this boilerplate code for you. 46 00:03:17,090 --> 00:03:23,720 It may work with just autopsy, and if it doesn't, that you need to just press control, shift B and 47 00:03:23,720 --> 00:03:30,680 then Ieso in separate search and then odyssey. okay, so now that we have got the boilerplate code, 48 00:03:30,680 --> 00:03:36,170 what we can do is we can just write code here and then everybody else and that will be displayed. 49 00:03:36,620 --> 00:03:42,020 So let me explain you the syntax of whatever is being shown here. 50 00:03:42,410 --> 00:03:47,460 So first of all, we are importing the EC from React and then after that, whatever the thing, which 51 00:03:47,460 --> 00:03:55,520 will be here and after this function, before returning, basically before written, whatever code is 52 00:03:55,520 --> 00:03:55,820 there. 53 00:03:55,820 --> 00:03:58,500 So that is like jaws could brought before the script. 54 00:03:58,520 --> 00:04:03,470 That will be all logic and that will be all the logical statement and the function and everything. 55 00:04:03,680 --> 00:04:10,100 And after this is written inside, this parenthesis will be GSX, which is JavaScript and HTML, so 56 00:04:10,100 --> 00:04:15,890 there can be A. M. Also, there can be a DAO script also, and you can also give inline styling. 57 00:04:15,900 --> 00:04:17,360 So see us also. 58 00:04:17,360 --> 00:04:22,670 So basically this HTML, JavaScript and CSS and just one single file. 59 00:04:22,670 --> 00:04:27,500 So that is the magic of React, and that is what is present inside the written statement. 60 00:04:27,500 --> 00:04:32,540 So that is the GSX, GSX, but as NPR and the script is presented at the top. 61 00:04:33,020 --> 00:04:37,190 OK, so now we are done with this mike the explanation of the syntax. 62 00:04:37,640 --> 00:04:39,620 Now we can just create on that one. 63 00:04:40,610 --> 00:04:42,980 So first of all, I create our. 64 00:04:44,460 --> 00:04:48,480 Element that is the nav element for nav. 65 00:04:50,040 --> 00:04:59,100 And it will give it just looks like they've only for now and then will provide active so that they will 66 00:04:59,100 --> 00:05:02,640 be having a class name of NAB Center. 67 00:05:05,130 --> 00:05:05,520 OK. 68 00:05:06,120 --> 00:05:13,650 So I'm giving the class news from now so that it will be easy for us to do the thesis, but don't get 69 00:05:13,650 --> 00:05:14,070 confused. 70 00:05:14,070 --> 00:05:19,200 The class name could be anything but I'm giving these classes because I have written the thesis according 71 00:05:19,200 --> 00:05:21,600 to this class names, but no need to get confused. 72 00:05:21,600 --> 00:05:23,880 This is just a customizable thing. 73 00:05:23,910 --> 00:05:24,240 OK. 74 00:05:24,630 --> 00:05:32,310 Next, we'll have our three tag and this will contain like the brand name, like the brand name of the 75 00:05:32,310 --> 00:05:34,750 website or the company or anything. 76 00:05:35,280 --> 00:05:37,320 So we'll write hot deals here. 77 00:05:38,310 --> 00:05:38,490 I. 78 00:05:39,690 --> 00:05:44,670 This is what the name of our company, our imaginary company. 79 00:05:45,210 --> 00:05:46,920 Next, we'll be having our dev. 80 00:05:47,250 --> 00:05:53,430 So this will contain some of the information, like the like the bag icon. 81 00:05:53,430 --> 00:05:59,190 And along with that, it will be the count, the product count, it will. 82 00:05:59,370 --> 00:06:02,740 It will be showing the product count and it will be variable. 83 00:06:02,760 --> 00:06:03,960 It will not be static. 84 00:06:03,960 --> 00:06:04,830 It will be dynamic. 85 00:06:04,830 --> 00:06:08,730 As you change the number of products, it will be changing. 86 00:06:09,300 --> 00:06:12,220 Initially, it will be hard coded and initially it will be static. 87 00:06:12,240 --> 00:06:14,640 So we will go step by step. 88 00:06:15,000 --> 00:06:22,430 So for that, we need another device so that there will be nav container nav container. 89 00:06:22,440 --> 00:06:25,380 So basically whatever is contained in the nav. 90 00:06:25,740 --> 00:06:27,630 That's why I've given this name nav container. 91 00:06:28,110 --> 00:06:33,240 Inside this, we will have image, so that image will be of the bag. 92 00:06:33,240 --> 00:06:34,980 Let me show you in our project. 93 00:06:35,340 --> 00:06:38,070 So this image right here, this is as big. 94 00:06:38,340 --> 00:06:39,630 And this will be having. 95 00:06:40,050 --> 00:06:43,020 So I've already done one more thing. 96 00:06:43,020 --> 00:06:48,510 I've already downloaded, downloaded the images and logos, and I've created a folder which is media. 97 00:06:48,720 --> 00:06:54,630 And so that there are two sub folders with the first one is the icon, the second one is the product 98 00:06:55,050 --> 00:06:58,410 and the icons that are some icons and the products that are the images of the products. 99 00:06:58,830 --> 00:07:03,510 So this product and we just will not be using because the data will be coming from the external API, 100 00:07:03,510 --> 00:07:06,970 but still when we hardcourt the data that will be present. 101 00:07:06,990 --> 00:07:11,370 OK, so you also create this folder and put the icons here. 102 00:07:11,370 --> 00:07:15,720 You can use this also these icons and if you want, you can use another one also. 103 00:07:16,140 --> 00:07:19,040 OK, so first of all, we need an image, the bag image. 104 00:07:19,040 --> 00:07:21,180 So for that, we need to import that image. 105 00:07:22,170 --> 00:07:27,010 So import, you can give anything, any name you give back from. 106 00:07:27,240 --> 00:07:32,010 And then you need to provide the location of that particular image where it is residing. 107 00:07:32,490 --> 00:07:32,910 OK. 108 00:07:32,940 --> 00:07:36,270 So, OK, I made a typo and it is an art form it's from. 109 00:07:36,900 --> 00:07:40,120 And then you need to go to the media folder. 110 00:07:40,140 --> 00:07:46,740 OK, so inside media that have icons and icons that will be bagged out as we. 111 00:07:47,990 --> 00:07:48,340 G. 112 00:07:49,040 --> 00:07:49,390 OK. 113 00:07:49,550 --> 00:07:52,030 Let me just cross-check it starts turning, yeah. 114 00:07:52,070 --> 00:07:53,240 Bad dog, as we do. 115 00:07:53,240 --> 00:07:53,630 All right. 116 00:07:54,320 --> 00:07:55,010 All right. 117 00:07:55,010 --> 00:07:57,680 So next what we'll do is we'll import that image. 118 00:07:57,900 --> 00:07:59,390 Already we have already imported. 119 00:07:59,400 --> 00:08:02,630 Now we need to render that image before rendering an image. 120 00:08:02,630 --> 00:08:04,400 Obviously, we'll use an image tag. 121 00:08:04,970 --> 00:08:05,540 OK? 122 00:08:06,620 --> 00:08:13,550 And in the source will provide this name, this particular name from which we have imported that particular 123 00:08:13,550 --> 00:08:13,850 image. 124 00:08:14,210 --> 00:08:15,560 So that will be bag. 125 00:08:16,280 --> 00:08:22,060 And this is all text, for example, for some reason, if the image doesn't show up, so the text hit 126 00:08:22,400 --> 00:08:27,410 like cart on back anything, the bag. 127 00:08:27,740 --> 00:08:28,090 All right. 128 00:08:28,610 --> 00:08:36,590 So remember the image tag also in to the self-closing tag like every every tag, like something like 129 00:08:36,590 --> 00:08:40,150 this, like VR tag or something like that, those tags themselves. 130 00:08:40,460 --> 00:08:41,210 Clothing tags. 131 00:08:41,450 --> 00:08:47,570 So if you if you are coming from an esteemed background and you are new to react or don't do the closing 132 00:08:47,570 --> 00:08:52,880 tag for image, OK, because images of self-closing tagging react OK, but I'll just save it. 133 00:08:54,040 --> 00:08:56,500 And surveys, servers already running. 134 00:08:56,920 --> 00:09:01,840 Well, let us go to the browser and see what we are seeing right now. 135 00:09:03,630 --> 00:09:07,560 We are seeing nothing, so can you guess the reason why we are seeing nothing, why the changes are 136 00:09:07,560 --> 00:09:08,430 not being reflected? 137 00:09:09,510 --> 00:09:10,230 You guess it. 138 00:09:11,160 --> 00:09:17,600 The reason the reason is because we have not imported this narrow border gas component and not AB Dardis. 139 00:09:17,610 --> 00:09:24,140 Remember anything which you need to display on your website or you need to get rendered on your website. 140 00:09:24,150 --> 00:09:30,940 That particular component or or container should and should be rendered should be important in that 141 00:09:30,960 --> 00:09:33,810 gorgeous file, then only to be rendered otherwise. 142 00:09:34,050 --> 00:09:38,820 That will not show up and you would be just keep on searching where my container or component went. 143 00:09:39,390 --> 00:09:41,730 So from here, you will import than ever. 144 00:09:43,440 --> 00:09:47,560 Never far from why I keep on writing form and sort of from. 145 00:09:47,580 --> 00:09:51,060 All right, so then you need to just import this now. 146 00:09:52,230 --> 00:09:55,500 You can just provide the name of the car component you don't need to provide. 147 00:09:56,070 --> 00:09:57,110 You don't need to type. 148 00:09:57,120 --> 00:09:58,710 Never bothered Garcia. 149 00:09:59,070 --> 00:10:02,340 If you're just starting out, but that is enough you don't need right now, but our genes. 150 00:10:02,490 --> 00:10:05,510 And even if we write dogs, there's no problem with it. 151 00:10:05,610 --> 00:10:06,780 There's not at all a problem. 152 00:10:07,050 --> 00:10:13,820 OK, so now we have saved it, and now we need to include it to hit inside this app. 153 00:10:15,070 --> 00:10:16,780 Contain it, so here we'll. 154 00:10:19,580 --> 00:10:22,940 I have that component, so obviously this is also a said closing time. 155 00:10:24,060 --> 00:10:24,910 Then we'll see, save it. 156 00:10:25,910 --> 00:10:33,740 And now, if I go to the browser, you can see are heading this present and not icon are as big as all 157 00:10:33,760 --> 00:10:34,200 2000. 158 00:10:34,220 --> 00:10:39,170 Obviously, this doesn't look what we are expecting them to look because right now we have not done 159 00:10:39,170 --> 00:10:40,730 any styling or something like that. 160 00:10:41,210 --> 00:10:43,220 It's just like a raw thing. 161 00:10:43,750 --> 00:10:46,750 This is the very first thing we have not given any CSS or something like that. 162 00:10:46,760 --> 00:10:48,320 OK, so that doesn't matter right now. 163 00:10:49,100 --> 00:10:53,390 What matters is whatever we are trying to render is getting rendered or not. 164 00:10:54,170 --> 00:10:58,130 OK, so next we'll have another Dave and this will contain. 165 00:10:59,210 --> 00:11:05,120 The count, the product count, basically the amount of the container, so whatever you can call it, 166 00:11:05,630 --> 00:11:11,110 or this will be inside of this container only or get this inside the nav container only so that we wouldn't 167 00:11:11,120 --> 00:11:12,470 have a class name of. 168 00:11:13,910 --> 00:11:14,990 Amount container. 169 00:11:20,210 --> 00:11:28,550 And inside this, that will be a dog, a paragraph that best that particular tag also will have a class 170 00:11:28,550 --> 00:11:32,420 name, and the class name would be total amount. 171 00:11:37,620 --> 00:11:43,980 And inside this, there will be the what you can see that will be the count, the total count of the 172 00:11:43,980 --> 00:11:51,000 products which are present in your bag or in your car or on your wish list, whatever you you can say 173 00:11:51,460 --> 00:11:55,500 right now, I'm just giving a hardcoded value, maybe five. 174 00:11:56,240 --> 00:12:00,860 And then you can go to the browser and you can see that's being rendered OK. 175 00:12:01,440 --> 00:12:06,410 So these are the three important things for the name of the title of the name of the brand. 176 00:12:06,860 --> 00:12:10,670 Next, we have the card icon and then we have the count of the products. 177 00:12:11,480 --> 00:12:14,750 So we are done with the basic structure of one. 178 00:12:15,680 --> 00:12:21,320 Now what are the next thing we need to provide some styling for on there, but for that, we need to 179 00:12:21,320 --> 00:12:22,460 write some CSS. 180 00:12:23,180 --> 00:12:30,890 So the one thing here is that I'm not going to focus more on the CCIs part here because we are going 181 00:12:30,890 --> 00:12:36,230 to we are here to learn, react and if is just like things are basic in that. 182 00:12:36,230 --> 00:12:40,790 So I'll obviously review and I'll obviously treat you like what I'm writing. 183 00:12:40,790 --> 00:12:46,460 I obviously explain, but I'm not going to write every line of courses from scratch here, because if 184 00:12:46,460 --> 00:12:49,850 we do that, it will take so long and there will be five to six hours. 185 00:12:50,090 --> 00:12:51,560 We'll be just writing CSC only. 186 00:12:52,100 --> 00:12:56,720 So but still, we'll write some of the basics, which is understandable. 187 00:12:56,720 --> 00:12:58,770 And that's OK. 188 00:12:58,820 --> 00:13:01,280 So we'll write an index card. 189 00:13:01,280 --> 00:13:02,120 Yes, but all write.