1 00:00:00,150 --> 00:00:05,670 In order to bootstrap a fresh instance of reactor up, they suggest using and. 2 00:00:06,690 --> 00:00:14,450 So essentially we won't need to install their Cielito on our machine, which is a setup they had before. 3 00:00:15,030 --> 00:00:21,650 And as a side note, that's why our NPM version needs to be at least five point two cents. 4 00:00:21,750 --> 00:00:24,810 We do want to use and be X.. 5 00:00:25,380 --> 00:00:33,690 So while we're still on a subject, their previous setup was that we had to install the Cielito the 6 00:00:33,690 --> 00:00:36,200 Create React app globally. 7 00:00:36,660 --> 00:00:44,180 How now they switch to NPCs and they're also suggesting that if you have already installed the creator 8 00:00:44,200 --> 00:00:45,000 act globally. 9 00:00:45,240 --> 00:00:51,330 So, for example, maybe you're watching some other tutorial and you already installed create react 10 00:00:51,510 --> 00:00:52,500 app globally. 11 00:00:53,090 --> 00:00:55,260 I suggest that you uninstall it. 12 00:00:55,470 --> 00:01:03,540 So you need to run this command, the NPM install and then G create react app to uninstall the Sellitto, 13 00:01:03,810 --> 00:01:10,590 because that way it ensures that Northparkes users always the latest version. 14 00:01:10,890 --> 00:01:13,860 Now I already did that, so I'm good to go. 15 00:01:14,190 --> 00:01:17,700 And we're only looking for Scarman now. 16 00:01:17,700 --> 00:01:18,890 You can grab the whole thing. 17 00:01:19,260 --> 00:01:22,700 That just means that your app will be called my app. 18 00:01:22,920 --> 00:01:27,270 In my case, I'll just copy and create React app. 19 00:01:27,570 --> 00:01:29,760 So I'm going to navigate back. 20 00:01:30,030 --> 00:01:33,840 And by the way, if you want to check, what is your AMPM version? 21 00:01:34,150 --> 00:01:39,480 Same as with Noad, we just run AMPM and then the dash version. 22 00:01:39,630 --> 00:01:43,110 And of course I can see that I have six point twelve. 23 00:01:43,590 --> 00:01:52,020 Now at this point I would want to navigate to a desktop Weichsel online copy and paste my command and 24 00:01:52,020 --> 00:01:58,350 once I have command in place, I just need to come up with a name of my folder and in my case I'm going 25 00:01:58,350 --> 00:02:07,350 to go with the trail and you'll see how the Create React app starts bootstrapping your react application. 26 00:02:07,680 --> 00:02:15,990 Now, it does take a little bit of time, so I will stop the video and I'll resume it once all the dependencies 27 00:02:16,170 --> 00:02:24,000 are in place and thus create react app is done installing all dependencies and essentially setting up 28 00:02:24,000 --> 00:02:28,830 a ready to go react application we can see in the terminal. 29 00:02:29,100 --> 00:02:33,390 Then we have quite a few commands that we can use. 30 00:02:33,810 --> 00:02:40,500 Now, again, as we're progressing with tutorial, don't worry, we will cover other ones as well. 31 00:02:40,500 --> 00:02:48,990 But for the time being, the one that we really need is the and RPM start, which starts the development 32 00:02:48,990 --> 00:02:49,430 server. 33 00:02:49,800 --> 00:02:55,320 Now, let me tell you right away that there are two places where you can run the commands. 34 00:02:55,500 --> 00:03:03,480 So essentially start up the dev server or build the production ready application or for example, install 35 00:03:03,660 --> 00:03:08,190 the dependency and an extra dependency, for example, react icon. 36 00:03:08,490 --> 00:03:15,060 And these two places are following where I can run all my commands in the terminal. 37 00:03:15,060 --> 00:03:21,000 However, I just need to make sure that of course, I'm located in my folder. 38 00:03:21,000 --> 00:03:27,780 So, for example, in this case I would need to navigate tutorial and then I can run, for example, 39 00:03:27,780 --> 00:03:29,400 command of NPM start. 40 00:03:29,730 --> 00:03:33,450 And the other place is going to be our text error. 41 00:03:33,690 --> 00:03:39,090 Now I'm going to run my commands in text error in the integrated terminal. 42 00:03:39,300 --> 00:03:46,260 The reason why I'm showing her this is that once in a while, some students who use windows have complained 43 00:03:46,470 --> 00:03:53,310 that unfortunately, when they run their commands and the integrated terminal in the Visual Studio code, 44 00:03:53,580 --> 00:03:55,470 they're getting some issues. 45 00:03:55,650 --> 00:04:00,800 So just keep in mind, you don't have to run your commands and integrate eternal. 46 00:04:01,020 --> 00:04:07,250 Now, of course, I will do that throughout the course because I'm not having any issues once I do that. 47 00:04:07,410 --> 00:04:13,170 However, if you do, just remember that you can always set them up in your terminal as well. 48 00:04:13,410 --> 00:04:17,370 So in my case, I'm going to drag and drop my application. 49 00:04:18,230 --> 00:04:26,450 And then all right away, set up side by side a browser, because that's just how I prefer while I'm 50 00:04:26,450 --> 00:04:27,060 developing. 51 00:04:27,410 --> 00:04:32,430 So this is going to be a fresh instance of the browser and this is going to be our project. 52 00:04:32,630 --> 00:04:33,250 Now, don't worry. 53 00:04:33,270 --> 00:04:40,850 In the next video, we'll take a closer look of what is our folder structure and what essentially we 54 00:04:40,850 --> 00:04:46,550 can find in the fresh instance of creating app horror for now. 55 00:04:46,890 --> 00:04:49,100 I would just want to speed up my dev server. 56 00:04:49,310 --> 00:04:57,170 So like I said, I would open up the integrated terminal with Control and Tilde and then we run an RPM 57 00:04:57,500 --> 00:05:02,420 and then start and run localhost three thousand. 58 00:05:02,670 --> 00:05:07,670 We're going to get a brand new instance of our application. 59 00:05:07,790 --> 00:05:12,180 So essentially we'll see what create RIAB created for us. 60 00:05:12,410 --> 00:05:15,560 Now you see that we have some logo, we have some text. 61 00:05:15,740 --> 00:05:19,960 And like I said in the next video, we'll take a closer look at the folder structure. 62 00:05:20,270 --> 00:05:25,970 But for the time being, I would just want to showcase that the way the Dirceu works is each and every 63 00:05:25,970 --> 00:05:35,210 time we'll make some change, if there is no error, will automatically get the latest version of Harrap 64 00:05:35,450 --> 00:05:37,050 right away in the browser. 65 00:05:37,310 --> 00:05:43,100 So, for example, if I change the text in the app and again, you don't have to do that, but I'll 66 00:05:43,100 --> 00:05:47,390 change the text from the paragraph to a hello world. 67 00:05:47,390 --> 00:05:53,740 So whatever I have over here, I'll just change the whole world and you'll see the moment I save, I 68 00:05:53,750 --> 00:05:59,000 ride our way, get the latest version of my hand in the browser. 69 00:05:59,270 --> 00:06:00,970 So I'll create react app. 70 00:06:00,980 --> 00:06:06,740 Does this cool thing of heart reloading or essentially every time we'll make some changes unless we 71 00:06:06,740 --> 00:06:13,640 have some bugs, meaning some errors, then it right away restarts the application for us.