1 00:00:01,020 --> 00:00:03,870 OK, so another view of the scale of the project, let's start building. 2 00:00:04,530 --> 00:00:10,230 So if you do this and you have never worked with React, so first of all, you need to have an audience 3 00:00:10,230 --> 00:00:11,700 and be installed on a computer. 4 00:00:12,120 --> 00:00:18,000 And if you if you have idea and if you have knowledge about audience and you have installed just on 5 00:00:18,000 --> 00:00:19,740 a computer, you can skip this part. 6 00:00:20,070 --> 00:00:24,600 So what you will do is, first of all, I show you from where you can install an audience, so you need 7 00:00:24,600 --> 00:00:29,860 to just search Node.js on Google and then you need to go to this website, which is not the only way. 8 00:00:29,970 --> 00:00:34,230 From here, you need to download the recommended commas to most users, and then you need to download 9 00:00:34,230 --> 00:00:34,830 the installer. 10 00:00:34,830 --> 00:00:39,590 And that installer will install an audience along with npm on your computer. 11 00:00:39,600 --> 00:00:40,290 So that is done. 12 00:00:40,620 --> 00:00:43,650 The next you need a coordinator or coordinator. 13 00:00:43,650 --> 00:00:48,600 I will be using the escort, which is the Visual Studio code, and I will be recommending you to use 14 00:00:48,600 --> 00:00:51,330 this only because that is very development friendly. 15 00:00:51,540 --> 00:00:56,400 So just to download Visual Studio from this website, if you don't have, you can also use Sublime or 16 00:00:56,850 --> 00:00:59,190 any other text or editor like Vim. 17 00:00:59,520 --> 00:01:05,190 But I personally use Visual Studio Code, and I will suggest you knew that this only from from here 18 00:01:05,430 --> 00:01:06,570 after coming to this outside. 19 00:01:06,580 --> 00:01:09,240 From here, you can download according to your operating systems. 20 00:01:09,690 --> 00:01:13,230 And according to the configuration of your operating system, you can just download the file and you 21 00:01:13,230 --> 00:01:13,890 can install it. 22 00:01:14,250 --> 00:01:18,720 It's a normal installation process, so like any of the software in the world, so there's no problem 23 00:01:18,720 --> 00:01:19,050 with that. 24 00:01:19,560 --> 00:01:24,840 OK, so next at work we're going to do is we are going to use values to our for this particular project, 25 00:01:25,200 --> 00:01:26,460 which is being packaged. 26 00:01:27,520 --> 00:01:34,900 So what we'll do is we will lose our jobs here, and you will go to this website, to the official website 27 00:01:35,590 --> 00:01:37,270 here, that is documentation also. 28 00:01:37,730 --> 00:01:46,720 So what it is, it is just it provides us different shades of the colors so that what it is. 29 00:01:47,080 --> 00:01:51,400 So you need to install these values towards your project. 30 00:01:51,690 --> 00:01:53,710 So I'll show you how you can install it. 31 00:01:53,710 --> 00:01:57,060 First of all, I'm just telling you like what it is and the documentation and all. 32 00:01:57,670 --> 00:02:05,350 So this is the package and on and with that, the name of values dogs you can search on and beam if 33 00:02:05,350 --> 00:02:10,780 you don't know what is in beam and beam is a node package manager and it from here only we install all 34 00:02:10,780 --> 00:02:12,330 the packages are not required. 35 00:02:12,340 --> 00:02:15,700 And for the yes, so on that we have this values just. 36 00:02:16,980 --> 00:02:24,030 So here is the like you said, how you can use and everything else, so particularly we are using this 37 00:02:24,030 --> 00:02:27,420 one method, so I didn't show you which one method we are going to use. 38 00:02:27,950 --> 00:02:35,100 So but if you want, you can explore this package as as much as possible and you can make use of it 39 00:02:35,100 --> 00:02:36,120 in different, different ways. 40 00:02:36,540 --> 00:02:42,150 Now we will be using just one particular thing, but you can use on other things. 41 00:02:42,450 --> 00:02:46,680 So let me just show you the documentation if I can go to the documentation. 42 00:02:47,560 --> 00:02:48,190 And. 43 00:02:52,820 --> 00:02:54,800 Know start arbitrary as. 44 00:02:57,270 --> 00:03:02,430 This is all the you said in all or we'll be using this log color and all. 45 00:03:02,850 --> 00:03:06,290 And this is like value which will be passing. 46 00:03:06,300 --> 00:03:10,830 So it is what it is and this is that you can. 47 00:03:11,640 --> 00:03:13,650 There are several ways to use this package. 48 00:03:13,660 --> 00:03:19,740 You can install it via and beam also, and you can use the serial links also if you want. 49 00:03:19,770 --> 00:03:26,790 So in this production will be using npm and we'll be installing it in our project using npm. 50 00:03:27,090 --> 00:03:30,780 But if you want, you can use the code and also it works like exactly the same. 51 00:03:31,080 --> 00:03:37,440 What you need to do is just need to just copy this and paste in your indexed HTML and script that so 52 00:03:37,440 --> 00:03:39,270 that is all what you need to do. 53 00:03:39,660 --> 00:03:41,430 OK, so that's all for this. 54 00:03:41,430 --> 00:03:45,360 Now, let's let's move on to that project. 55 00:03:47,260 --> 00:03:48,060 Okay. 56 00:03:48,130 --> 00:03:50,920 So Project means I have open visual studio code. 57 00:03:51,040 --> 00:03:59,590 So once you download Visual Studio to just open this via sport and then you need to open the terminal 58 00:03:59,590 --> 00:04:06,190 in the stunning new tab into your score to this terminal and click on New Terminal and it will load. 59 00:04:06,190 --> 00:04:12,670 And I have personally installed WSM, which is the Windows Subsystem for Linux, who probably you will 60 00:04:12,670 --> 00:04:14,870 be using command prompt. 61 00:04:14,870 --> 00:04:18,760 So chances are high that you might see command prompt window here. 62 00:04:18,760 --> 00:04:23,230 Instead of this one to terminal, I am using this WCL also for me, it's open to terminal. 63 00:04:23,680 --> 00:04:30,220 And if you also want, obviously you can just Google like how to install WCL on Windows, or you can 64 00:04:30,220 --> 00:04:34,930 just install that and you're going to download this open to terminal from the Microsoft Store. 65 00:04:35,170 --> 00:04:36,040 OK, so. 66 00:04:39,030 --> 00:04:45,180 So for creating the project like the default reactor project, the initial real content on installing 67 00:04:45,180 --> 00:04:51,390 the reactor project, what you need to do this, you need to execute a command and command. 68 00:04:51,390 --> 00:04:55,530 So for that first, you need to check that if you have no yet installed on a computer and you are running 69 00:04:55,530 --> 00:05:01,680 the latest version of an audience before that, you will find this command that is not a fun, a fun 70 00:05:02,550 --> 00:05:03,910 version of this one. 71 00:05:03,920 --> 00:05:08,790 So this will show you the version of the Node.js, which you are using, so it should be updated. 72 00:05:08,790 --> 00:05:13,620 You can just maybe even think seeing this video, it will be more updated so you can just go ahead and 73 00:05:14,010 --> 00:05:18,900 check which is the latest version, and they can win it for most users and just install that. 74 00:05:19,210 --> 00:05:22,950 We can also check the version of the NBN's npm open iPhone. 75 00:05:23,880 --> 00:05:26,280 Perversion, but will show you the origin of then. 76 00:05:26,610 --> 00:05:30,150 Currently, I'm using these words so you can check and install accordingly. 77 00:05:30,450 --> 00:05:32,700 OK, so let me just clear this mess up. 78 00:05:33,600 --> 00:05:39,330 Now, if you have installed both of these things, it will show you these versions. 79 00:05:39,330 --> 00:05:45,230 And if you are unable to see this version, that means these two things are not installed on a computer. 80 00:05:45,240 --> 00:05:50,220 So first of all, you need to just go and install them like the way I told you. 81 00:05:50,310 --> 00:05:55,770 From where you need to install from there, installed that and then you need to open the escort again, 82 00:05:55,770 --> 00:06:01,410 and then you need to come to the terminal and then you tap this command, which is and b x space. 83 00:06:02,870 --> 00:06:09,380 Create iPhone app, iPhone, app and space, then you have to give the name of the project. 84 00:06:09,740 --> 00:06:11,840 So in this case, I have given caller. 85 00:06:14,090 --> 00:06:18,740 Generator, once you give the name, then you turn it into. 86 00:06:18,960 --> 00:06:21,140 So this name, particularly this name. 87 00:06:21,860 --> 00:06:26,510 This is the name of your project and this will be use of your project name. 88 00:06:26,780 --> 00:06:31,940 And once you hit enter up, a folder will be created automatically, will be created with this name. 89 00:06:32,210 --> 00:06:34,430 And inside that will be your project files. 90 00:06:34,750 --> 00:06:37,580 But once you've timed this command, then you need to just hit enter. 91 00:06:37,850 --> 00:06:40,160 And I've already installed two. 92 00:06:40,160 --> 00:06:43,910 I will not presently, but you need to because you need to install the project. 93 00:06:44,210 --> 00:06:48,320 Once you hit enter, it will take around five to six minutes to install the project. 94 00:06:48,350 --> 00:06:53,660 Generally, it takes five to six minutes, depending on the processing power of your PC before me usually 95 00:06:53,660 --> 00:06:54,650 takes five to six minutes. 96 00:06:54,900 --> 00:06:57,520 So don't panic if it takes too much time, it takes you. 97 00:06:57,950 --> 00:06:59,480 Sometimes it can even take 10. 98 00:06:59,480 --> 00:07:01,820 So don't worry, it also depends on your internet speed. 99 00:07:02,180 --> 00:07:08,390 All right, so once you've done it, then you need to open that particular for the folder. 100 00:07:08,390 --> 00:07:14,810 Like that is the folder will be created with the name of the app, which which you like and start doing 101 00:07:14,810 --> 00:07:17,180 that and create React app and space. 102 00:07:17,180 --> 00:07:20,930 The name which you entered from that name or directly will be created. 103 00:07:20,930 --> 00:07:24,800 And that directory or that folder you need to open via VSCO. 104 00:07:25,050 --> 00:07:30,470 So once you open that directory up for a lot of obvious scored, so things will look something like 105 00:07:30,470 --> 00:07:30,770 this. 106 00:07:31,150 --> 00:07:33,920 Let me explain the project structure like the folder structure. 107 00:07:35,120 --> 00:07:40,580 So there will be many more extra files here so that you need to delete and you need to just keep whatever 108 00:07:40,580 --> 00:07:43,190 I'm telling you to keep whatever you see here. 109 00:07:43,370 --> 00:07:46,880 So first of all, there will be a follow up node modules you don't even need to test. 110 00:07:46,880 --> 00:07:50,150 This will keep it as it is, never never delete this. 111 00:07:50,540 --> 00:07:52,550 And there will be a public folder. 112 00:07:52,550 --> 00:07:53,640 You need to touch it. 113 00:07:53,750 --> 00:07:55,270 Just keep it as it is. 114 00:07:55,280 --> 00:07:56,180 Never delete this. 115 00:07:56,540 --> 00:07:59,420 Then you will have a source folder on the site see folder. 116 00:07:59,720 --> 00:08:01,730 And inside this, there are some files. 117 00:08:01,940 --> 00:08:04,580 So this is the this is the project. 118 00:08:04,580 --> 00:08:08,370 This is the folder which we are going to use, like 99 percent of the time. 119 00:08:08,370 --> 00:08:13,310 We will be working on this folder only inside this folder that are many, many things. 120 00:08:13,310 --> 00:08:15,110 So you need to keep only these things. 121 00:08:15,380 --> 00:08:18,230 Most of all, you need to keep this app gorgeous in next door. 122 00:08:18,350 --> 00:08:22,490 Yes, and see if this file for both of them is an index Trotskyists. 123 00:08:22,820 --> 00:08:28,110 Then you do also keep this package logged or decent package into this and whatever you're seeing here, 124 00:08:28,110 --> 00:08:32,900 you basically you need to keep this other than that I-Report, web, vitals and other things, you have 125 00:08:32,900 --> 00:08:34,520 to just delete and clean it up. 126 00:08:34,910 --> 00:08:37,190 They are useful for, but for us, they are not. 127 00:08:37,190 --> 00:08:41,150 Actually, we are not working on such a scale that we will be using testing and all. 128 00:08:42,160 --> 00:08:42,510 OK. 129 00:08:43,010 --> 00:08:48,940 Once you cleaned up everything, you need to come to this file, which is the App Dogs, after coming 130 00:08:48,940 --> 00:08:55,570 to the App Jazz, you will see a lot of code here, which will not be with me, Lord be using. 131 00:08:55,810 --> 00:08:59,500 So you need to clean that code and make your drawer desk look like this. 132 00:08:59,860 --> 00:09:01,740 So your app drawer, this should look like this. 133 00:09:01,750 --> 00:09:04,450 Delete everything and just keep this basic thing. 134 00:09:04,940 --> 00:09:09,850 So once it is, once you've cleaned up everything, your app drawer just should look like this. 135 00:09:10,330 --> 00:09:14,260 OK, so now let's test an application by running it. 136 00:09:14,530 --> 00:09:22,270 Let me provide had something like hello, caller and Jen read. 137 00:09:23,750 --> 00:09:24,190 OK. 138 00:09:24,740 --> 00:09:30,770 So let me save it now to run our project, what we need to do is we need to go and we need to open the 139 00:09:30,770 --> 00:09:37,130 terminal and we need to navigate to our project folder, a project like the directly where our project 140 00:09:37,160 --> 00:09:37,880 is residing. 141 00:09:38,180 --> 00:09:43,370 OK, so I'll I'd like to see you demonstrate directly and I will like go to the folder. 142 00:09:43,970 --> 00:09:48,920 So that folder for me is project and color generator, and I turned up. 143 00:09:49,250 --> 00:09:52,810 Now I'm in the flow generator aplicar folder. 144 00:09:53,330 --> 00:09:58,700 From here, I will press this command that is npm space start and stop. 145 00:09:58,970 --> 00:10:03,950 So what it does, it just spins up a server on a particular post on local laws. 146 00:10:04,220 --> 00:10:06,500 Where do you want to see your changes, life? 147 00:10:06,500 --> 00:10:12,410 Whatever change you make in the application that will be reflected live on that local host you are and 148 00:10:12,410 --> 00:10:14,450 that you can browse it in the browser. 149 00:10:14,930 --> 00:10:16,910 So then you need to press or enter. 150 00:10:18,430 --> 00:10:22,960 Now it will take a few seconds if you're doing it for the first time, it can take a one minute bite. 151 00:10:23,350 --> 00:10:26,980 If not, then it can take few seconds to spin up the server. 152 00:10:27,560 --> 00:10:28,210 OK. 153 00:10:30,020 --> 00:10:36,500 Third, showing that gun buyers successfully and our website is running on this, you are a little for 154 00:10:36,650 --> 00:10:37,310 three thousand. 155 00:10:37,790 --> 00:10:45,440 So let me just go ahead and check in the browser and it should automatically open app so you can see 156 00:10:45,440 --> 00:10:49,340 on the board comparison we are running and this is the text with your tablet. 157 00:10:49,520 --> 00:10:50,750 Hello, color generator. 158 00:10:51,330 --> 00:10:52,010 So there it is. 159 00:10:52,130 --> 00:10:53,930 This is what we are going to see here. 160 00:10:54,500 --> 00:10:57,110 And that's it. 161 00:10:57,110 --> 00:10:58,300 Now we are. 162 00:10:58,500 --> 00:11:01,970 Our website is running here and our app is working fine. 163 00:11:01,970 --> 00:11:06,980 That means we have successfully installed the project for now. 164 00:11:07,100 --> 00:11:10,970 Let me just note this now we don't need values. 165 00:11:11,000 --> 00:11:14,930 Or yes, maybe we need for the documentation on yes, we do need. 166 00:11:15,770 --> 00:11:16,490 Okay. 167 00:11:17,090 --> 00:11:20,930 So let's go to the VSCO now and start coding.