1 00:00:01,050 --> 00:00:03,170 Looks like my react application has been created. 2 00:00:03,469 --> 00:00:08,330 I'm going to change into that book directory and the ones inside of your we're going to install build 3 00:00:08,330 --> 00:00:10,010 into our project once again. 4 00:00:10,010 --> 00:00:13,250 We're going to install a very specific version of this dependency. 5 00:00:13,370 --> 00:00:16,430 And I got to ask you, please make sure you use the exact same version. 6 00:00:16,860 --> 00:00:19,730 They'll do an install save exact. 7 00:00:20,090 --> 00:00:23,990 And then we are going to install Eskild Dash w a. 8 00:00:24,080 --> 00:00:28,940 S M at zero point eight point to seven. 9 00:00:28,940 --> 00:00:31,460 And I'll zoom out just you can see all that on one single line. 10 00:00:31,970 --> 00:00:32,450 There we go. 11 00:00:35,410 --> 00:00:41,050 OK, so I'm going to install that wall that runs open up a second terminal window very quickly and then 12 00:00:41,050 --> 00:00:43,540 open up a code editor using that second window. 13 00:00:46,590 --> 00:00:52,620 OK, so here's my project, it looks like we've got a couple of different files generated inside of 14 00:00:52,620 --> 00:00:53,670 our SIRC directory. 15 00:00:54,030 --> 00:00:59,430 Personally, I do not like working with these regenerated files coming from reactor up because I eventually 16 00:00:59,430 --> 00:01:02,640 have to figure out why I've got conflicting CSFs and stuff like that. 17 00:01:03,000 --> 00:01:09,000 So the very first thing I'm going to do is find all these files inside the SC directory, select Amol 18 00:01:09,270 --> 00:01:10,070 and delete them. 19 00:01:10,080 --> 00:01:12,320 So we are just going to totally start from scratch. 20 00:01:13,310 --> 00:01:19,160 After that, inside the SIRC folder will make a new file of index, not TSX. 21 00:01:20,380 --> 00:01:25,120 Then inside of here, we'll put together the absolute basics to get some real content visible on the 22 00:01:25,120 --> 00:01:28,690 screen, so we'll do a traditional import react Dom. 23 00:01:29,930 --> 00:01:31,610 From React, Dom. 24 00:01:32,800 --> 00:01:34,450 I'll make an app component. 25 00:01:36,570 --> 00:01:39,150 And right now we turn and each one. 26 00:01:40,230 --> 00:01:41,100 It just says hi. 27 00:01:42,350 --> 00:01:45,290 And then finally a react dom render. 28 00:01:46,990 --> 00:01:51,850 But in an instance of my app component that I just made, and it will specify where we want to render 29 00:01:51,850 --> 00:01:55,150 this component to, so document where selecter. 30 00:01:56,290 --> 00:01:57,520 Found route. 31 00:01:58,640 --> 00:02:00,590 And that's it, that's all we should need to get started. 32 00:02:01,310 --> 00:02:02,230 We're going to say this file. 33 00:02:02,540 --> 00:02:03,980 I'm going to go back over to my terminal. 34 00:02:05,860 --> 00:02:11,410 Back over here, it looks like the installation of that billed as module is complete. 35 00:02:12,820 --> 00:02:18,100 So I'm going to do and start to begin that development server and just make sure that the changes we 36 00:02:18,100 --> 00:02:19,810 just made are working as expected. 37 00:02:20,280 --> 00:02:23,050 It looks like I've already got a process running on port three thousand. 38 00:02:23,390 --> 00:02:26,950 I'm going to start up on a different port for you. 39 00:02:26,950 --> 00:02:29,050 It's probably going to be worth three thousand for me. 40 00:02:29,050 --> 00:02:32,860 It's slightly different because I've already got another react application running on my machine. 41 00:02:34,050 --> 00:02:37,590 And then going to go back over to my browser and open up this application. 42 00:02:38,600 --> 00:02:44,000 So for me, localhost three thousand one for you, most likely just three thousand once there, we should 43 00:02:44,000 --> 00:02:45,440 see high up here on the screen. 44 00:02:45,860 --> 00:02:46,790 So simple enough. 45 00:02:47,820 --> 00:02:53,570 Well, let's start to add in that text area, the button and some other stuff in just a moment.