1 00:00:00,270 --> 00:00:03,030 In this video, we'll see how to get started with the reactor. 2 00:00:03,750 --> 00:00:08,610 So the first thing you have to do, you have to create some folder to get started with the reactor. 3 00:00:08,760 --> 00:00:09,900 You can create it anywhere. 4 00:00:10,800 --> 00:00:16,110 So I have created a reactor projects folder inside DeAndre and created a blog website for it. 5 00:00:16,560 --> 00:00:21,120 So inside this folder, I'll be writing the commands so that we can create the reactor. 6 00:00:21,810 --> 00:00:26,430 You can also select doing this project and be using Visual Studio code for the coding part because it 7 00:00:26,430 --> 00:00:29,370 has good snippets and all the packages and start. 8 00:00:30,180 --> 00:00:33,710 And then the terminal coming, you can use different types of code terminal. 9 00:00:33,840 --> 00:00:36,660 If you are a Linux user, you can use Linux in Terminal. 10 00:00:37,560 --> 00:00:44,040 If you can also use the Email Terminal Visual Studio Code, or you can use any other like custom terminal 11 00:00:44,040 --> 00:00:46,410 that you download from various open source platforms. 12 00:00:46,860 --> 00:00:49,350 I am using the custom terminal that is the hyper terminal. 13 00:00:49,650 --> 00:00:53,400 You can go to Google and just search for hyper terminal and then download it. 14 00:00:54,330 --> 00:00:59,100 The good thing about the airport terminal is it has a lot of customizations. 15 00:00:59,400 --> 00:01:02,100 We can change the colors according to what need and everything. 16 00:01:02,340 --> 00:01:03,750 It looks bit like. 17 00:01:03,750 --> 00:01:06,000 It looks a bit good, so I prefer that. 18 00:01:07,050 --> 00:01:07,980 You can also use anything. 19 00:01:08,130 --> 00:01:13,110 It's not a problem, but for it, but you using Visual Studio code is better. 20 00:01:14,110 --> 00:01:14,970 You can use any of them. 21 00:01:15,630 --> 00:01:19,950 So now inside this, the first line of code is NBC's start. 22 00:01:21,220 --> 00:01:21,700 Create. 23 00:01:23,190 --> 00:01:24,420 React app. 24 00:01:26,190 --> 00:01:27,090 So what this. 25 00:01:28,740 --> 00:01:29,240 There is a. 26 00:01:30,420 --> 00:01:30,620 Yeah. 27 00:01:31,820 --> 00:01:38,260 So what this line of command will do, firstly will concentrate on this creative act. 28 00:01:39,260 --> 00:01:43,310 So basically what happened is our Facebook developers who developed the react. 29 00:01:44,090 --> 00:01:48,770 They created a script to create that actually creating app is a very big process. 30 00:01:48,770 --> 00:01:53,030 We have to install on so many node modules, so many packages and everything. 31 00:01:53,210 --> 00:01:57,740 Installing instead of installing one by one, all different instead of using some kind of commands, 32 00:01:58,160 --> 00:02:00,200 all of them together, they made it as a script. 33 00:02:00,680 --> 00:02:03,200 So that's what we need to run for. 34 00:02:03,200 --> 00:02:06,700 That for running that we are using this and built is part of node package manager and. 35 00:02:07,670 --> 00:02:07,960 OK. 36 00:02:08,420 --> 00:02:09,260 This is a script name. 37 00:02:09,260 --> 00:02:13,850 We are running the thread and the DOT means we are running the scripting inside currently territory. 38 00:02:14,450 --> 00:02:22,040 If you give some name, like if you give a blog website, then what it will do is it will create a blog 39 00:02:22,040 --> 00:02:28,070 website or a folder inside the current folder that you are in the terminal and then inside that folder, 40 00:02:28,070 --> 00:02:28,940 it will create that. 41 00:02:29,480 --> 00:02:33,080 So since I already created a blog website folder, I want to talk so that it will create inside the 42 00:02:33,080 --> 00:02:33,830 directory itself. 43 00:02:34,430 --> 00:02:35,450 So once you do that. 44 00:02:36,080 --> 00:02:41,960 And one more thing that you have to remember is the the project name like in which you are creating 45 00:02:41,960 --> 00:02:44,970 the react and the folder should be in small letters. 46 00:02:45,230 --> 00:02:49,070 It should be in smaller escapes and still shouldn't be in uppercase. 47 00:02:49,130 --> 00:02:50,440 That it should be lowercase only. 48 00:02:51,400 --> 00:02:51,700 OK. 49 00:02:51,970 --> 00:02:54,790 And so after this, so this will take some time. 50 00:02:55,660 --> 00:02:58,500 It will take some three to four minutes, so just be patient. 51 00:02:58,840 --> 00:03:02,630 We'll meet once this code gets executed. 52 00:03:06,280 --> 00:03:06,940 So welcome back. 53 00:03:08,260 --> 00:03:14,500 Once you get these kind of messages like happy hacking and some kind of blue messages like npm start 54 00:03:14,500 --> 00:03:20,320 one and everything, then that means so your React Project Project has been successfully created and 55 00:03:20,320 --> 00:03:20,900 also in the region. 56 00:03:20,920 --> 00:03:23,520 You, your go to, you can see all the node modules pop up. 57 00:03:24,130 --> 00:03:26,560 You know, all the code boilerplate code, everything is great. 58 00:03:27,550 --> 00:03:32,920 So now how to run this project, but that we have to use and beam stock. 59 00:03:34,280 --> 00:03:38,830 So this command basically runs the project and it runs on the local host. 60 00:03:39,010 --> 00:03:39,800 Three thousand four. 61 00:03:39,860 --> 00:03:41,470 No, that is a default port. 62 00:03:41,480 --> 00:03:41,870 No. 63 00:03:42,270 --> 00:03:48,590 But before that water will get one is with Belize, we'll be seeing some law and some kind of text like 64 00:03:48,590 --> 00:03:53,150 react or something that is the boilerplate code that the developers actually give. 65 00:03:53,390 --> 00:03:58,460 So we don't want that so can completely delete source folder and you can start from scratch orders. 66 00:03:58,460 --> 00:04:00,680 You can basically edit the source for itself. 67 00:04:01,100 --> 00:04:02,390 So I'll read this word for it. 68 00:04:05,120 --> 00:04:10,370 So you can see this is the, you know, the boilerplate thing that we did, but we want to start from 69 00:04:10,370 --> 00:04:10,990 scratch, right? 70 00:04:11,000 --> 00:04:16,240 We want a plain white screen where we can start our project from, like the coding part for that, I'll 71 00:04:16,370 --> 00:04:19,220 delete the unnecessary things. 72 00:04:21,970 --> 00:04:24,790 So we don't need this test global. 73 00:04:25,980 --> 00:04:26,370 The Let. 74 00:04:32,060 --> 00:04:32,540 OK. 75 00:04:37,230 --> 00:04:38,810 So that's an a problem. 76 00:04:39,220 --> 00:04:40,330 So also. 77 00:04:42,960 --> 00:04:44,040 Index judges. 78 00:04:55,140 --> 00:04:57,790 Sorry to be deleting all the unnecessary court. 79 00:05:01,800 --> 00:05:04,500 We don't need this on, so you can delete them. 80 00:05:07,890 --> 00:05:08,700 And also, you can. 81 00:05:11,530 --> 00:05:15,490 No word, anything, yes, you want to print, whether you want to see the successful or not. 82 00:05:15,490 --> 00:05:17,170 So I I'll be printing a lot. 83 00:05:19,490 --> 00:05:22,220 This division with Class Nearmap and Halloway. 84 00:05:26,770 --> 00:05:28,870 So this is an important mechanism. 85 00:05:29,910 --> 00:05:32,160 This is that we shouldn't no need of any styling. 86 00:05:37,720 --> 00:05:37,960 Yeah. 87 00:05:38,230 --> 00:05:42,580 So once this is done, I'll run the government and stop. 88 00:05:44,260 --> 00:05:45,850 So you start the Soviet. 89 00:05:46,870 --> 00:05:48,280 This is in stock in the local post. 90 00:05:57,930 --> 00:05:59,410 The Senate, so yeah. 91 00:06:03,310 --> 00:06:07,510 So this is what the basic thing that you have to do like just to clear up the boilerplate code code 92 00:06:07,510 --> 00:06:13,150 that is given by the very act developers and then start with the fish head over court or you can also 93 00:06:13,150 --> 00:06:13,540 type. 94 00:06:14,470 --> 00:06:15,550 Hello, welcome to. 95 00:06:17,150 --> 00:06:17,930 Blog website. 96 00:06:24,750 --> 00:06:28,020 Now you can see you have some like called hello, welcome to blog website. 97 00:06:29,250 --> 00:06:33,090 So this is what we have completed in the video. 98 00:06:33,300 --> 00:06:38,160 We have got like we have a we saw how to get started with the React app, how to create the React app, 99 00:06:38,160 --> 00:06:43,440 how to run it on the localhost and how to get started with the code thing like approaches and strategies 100 00:06:43,440 --> 00:06:43,860 and everything. 101 00:06:44,130 --> 00:06:47,280 So one thing I want to say is in public, if you see. 102 00:06:48,770 --> 00:06:53,930 And next on intradermal, you can remove all this unnecessary code. 103 00:06:57,210 --> 00:06:59,790 Yes, everything, no need of any of them. 104 00:07:00,420 --> 00:07:01,920 So can simply remove them. 105 00:07:02,820 --> 00:07:08,040 So, yeah, so as you can see here we are having a division retired equal to do so. 106 00:07:08,040 --> 00:07:12,440 Knowing with this idea of no division, we want all the code to be inside this division. 107 00:07:12,450 --> 00:07:18,840 So how to target this that is working things that Jesus does through the help of Reactor Dome. 108 00:07:19,050 --> 00:07:20,580 There is are not in the function. 109 00:07:20,760 --> 00:07:25,200 What it will, does it, it will render the component that we give as the first parameter. 110 00:07:25,470 --> 00:07:30,450 And then the second parameter separated by a comma will have that target where we need to render this 111 00:07:30,450 --> 00:07:30,780 app. 112 00:07:31,620 --> 00:07:34,180 So the target is document or gate element by hook. 113 00:07:34,650 --> 00:07:40,470 So the element with this rule, the idea that we'll be having as the target and will render the app 114 00:07:40,470 --> 00:07:40,980 component. 115 00:07:41,340 --> 00:07:47,310 So here inside the as you can see inside index actually a menu and having the route and inside the script, 116 00:07:47,700 --> 00:07:49,410 we are having this app component. 117 00:07:49,410 --> 00:07:54,030 So what what is this about this Apache helicopter to block website? 118 00:07:54,180 --> 00:07:57,780 So basically, this is what we had, and I think this is the state state management, basically how 119 00:07:57,780 --> 00:08:01,350 to use this react and then through the help of components output. 120 00:08:01,350 --> 00:08:03,150 And this is the use of React. 121 00:08:03,150 --> 00:08:08,970 Basically, react is used so that we can work with components so that whenever that data gets updated, 122 00:08:09,180 --> 00:08:13,530 as you can see in many websites, the data should get updated at every second. 123 00:08:13,950 --> 00:08:16,710 So then at every second of the page, you need to be reloaded. 124 00:08:16,740 --> 00:08:18,600 Then it will be very slow and the users will. 125 00:08:18,660 --> 00:08:20,850 Then there won't be user traffic on the website. 126 00:08:21,270 --> 00:08:25,740 So for that, what they will do is we will divide that option into component. 127 00:08:26,100 --> 00:08:30,750 So whenever the data is changing, only the components related to that data will get refreshed. 128 00:08:31,260 --> 00:08:35,370 So we will do this with the help of props, hooks and everything that we see in the next videos. 129 00:08:35,910 --> 00:08:40,750 So this is basically the getting started of the React app and the basic inside the top level view of 130 00:08:40,750 --> 00:08:42,990 of of how the React app will be. 131 00:08:43,620 --> 00:08:48,390 And now, in the next year, we will get started with the users lives targeting the main coding part 132 00:08:48,390 --> 00:08:49,740 of the website for that. 133 00:08:50,490 --> 00:08:52,980 Let me just remove this. 134 00:08:55,050 --> 00:08:56,070 Unnecessary things. 135 00:08:57,510 --> 00:08:58,380 On sorry movies, this. 136 00:08:59,190 --> 00:09:00,000 So we are now. 137 00:09:01,890 --> 00:09:05,640 Not a lot of people, and now we are ready to go and see you in the next few.