1 00:00:01,500 --> 00:00:02,580 Instructor: In the last section, we installed 2 00:00:02,580 --> 00:00:05,760 a couple of modules into our newly generated project. 3 00:00:05,760 --> 00:00:07,350 I've started up my development server 4 00:00:07,350 --> 00:00:10,710 by running npm run start inside of my client directory. 5 00:00:10,710 --> 00:00:14,280 So now our development server for the front-end application 6 00:00:14,280 --> 00:00:16,830 is running on Port 3000. 7 00:00:16,830 --> 00:00:19,920 I still have my backend API server running as well 8 00:00:19,920 --> 00:00:21,423 on port 3090. 9 00:00:22,980 --> 00:00:26,310 Okay, so I've also, one other quick thing, I've started 10 00:00:26,310 --> 00:00:29,250 up my code editor already inside my client directory. 11 00:00:29,250 --> 00:00:33,090 So here is the React project that we just generated. 12 00:00:33,090 --> 00:00:35,640 Inside this section, we're gonna do a little bit of cleanup 13 00:00:35,640 --> 00:00:37,890 of some of the default code that we got inside of here. 14 00:00:37,890 --> 00:00:40,770 So we're gonna delete a couple of automatically 15 00:00:40,770 --> 00:00:42,330 generated files outta this thing 16 00:00:42,330 --> 00:00:43,950 and start putting together the React 17 00:00:43,950 --> 00:00:46,590 and Redux sides of our application. 18 00:00:46,590 --> 00:00:50,220 So just as we did way way earlier inside this course, 19 00:00:50,220 --> 00:00:53,160 I personally don't really like using pre-generated code, 20 00:00:53,160 --> 00:00:55,740 so I'm gonna take the entire src directory 21 00:00:55,740 --> 00:00:57,300 and we're gonna delete it. 22 00:00:57,300 --> 00:00:58,890 So we're gonna build out this entire 23 00:00:58,890 --> 00:01:02,100 authentication application from scratch. 24 00:01:02,100 --> 00:01:03,780 So now, inside the client directory, 25 00:01:03,780 --> 00:01:07,020 I'll make a new folder called src, 26 00:01:07,020 --> 00:01:11,673 and then inside there, I'll make my root file of index.js. 27 00:01:12,930 --> 00:01:16,350 Inside of index.js, we're going to import React, 28 00:01:16,350 --> 00:01:18,000 we're gonna get ReactDOM, 29 00:01:18,000 --> 00:01:20,580 we'll very quickly make an app component, 30 00:01:20,580 --> 00:01:22,140 and then pretty soon we'll wire up 31 00:01:22,140 --> 00:01:24,930 React Router DOM to this thing as well. 32 00:01:24,930 --> 00:01:27,030 So at the top, I'll get started by making 33 00:01:27,030 --> 00:01:29,967 an import statement for React from 'react', 34 00:01:30,930 --> 00:01:34,167 and I'll get ReactDOM from 'react-dom'. 35 00:01:36,510 --> 00:01:37,770 Now we're definitely going to need 36 00:01:37,770 --> 00:01:39,390 some component to show on the screen, 37 00:01:39,390 --> 00:01:41,820 so let's make an app component right away. 38 00:01:41,820 --> 00:01:45,150 The app component is gonna be kinda the centralized location 39 00:01:45,150 --> 00:01:48,690 of our entire application on the React side of things. 40 00:01:48,690 --> 00:01:50,370 Inside my src directory, 41 00:01:50,370 --> 00:01:54,090 I'm gonna make a new folder called components, 42 00:01:54,090 --> 00:01:58,833 and then inside there, I'll make an App.js file. 43 00:02:00,510 --> 00:02:04,290 Inside of App.js, we'll put together some boiler plate 44 00:02:04,290 --> 00:02:06,750 for a functional component. 45 00:02:06,750 --> 00:02:09,120 I really don't think this App component is going to need 46 00:02:09,120 --> 00:02:13,500 many helper methods or any component level state as well. 47 00:02:13,500 --> 00:02:16,740 So I think a functional component will do just fine. 48 00:02:16,740 --> 00:02:20,130 So at the top, I will import React from 'react', 49 00:02:20,130 --> 00:02:24,423 and then I will export default, an arrow function, 50 00:02:26,790 --> 00:02:29,937 that just returns a
. 51 00:02:31,530 --> 00:02:35,160 And let's just say, Hi, I'm the app. 52 00:02:35,160 --> 00:02:36,160 Good enough for now. 53 00:02:38,010 --> 00:02:39,633 So then I'll save this file, 54 00:02:40,770 --> 00:02:43,623 and then I'll flip back over to the index.js file. 55 00:02:44,760 --> 00:02:46,650 So back over inside of index.js, 56 00:02:46,650 --> 00:02:49,050 we'll import the app we just created. 57 00:02:49,050 --> 00:02:53,577 So import App from './components/App'. 58 00:02:54,750 --> 00:02:55,740 And then down beneath that, 59 00:02:55,740 --> 00:02:59,733 we'll do our ReactDOM.render call, so ReactDOM.render. 60 00:03:01,200 --> 00:03:03,360 We'll throw our in there. 61 00:03:03,360 --> 00:03:04,410 And as a second argument, 62 00:03:04,410 --> 00:03:07,263 we'll do our document.querySelector, 63 00:03:09,420 --> 00:03:12,930 and we'll get that root HTML element. 64 00:03:12,930 --> 00:03:14,760 So here's our HTML document. 65 00:03:14,760 --> 00:03:18,030 We're looking for the
00:03:21,813 So we're going to do a querySelector of '#root' like so. 67 00:03:23,010 --> 00:03:24,960 Okay, humble beginnings. 68 00:03:24,960 --> 00:03:28,470 Let's flip back over to the browser and see how we're doing. 69 00:03:28,470 --> 00:03:31,893 So back over here, if I do a forceable refresh on the page, 70 00:03:33,600 --> 00:03:35,820 we might have to restart our development server 71 00:03:35,820 --> 00:03:38,490 'cause we did nuke that default file. 72 00:03:38,490 --> 00:03:39,450 Oh no, we're good to go. 73 00:03:39,450 --> 00:03:41,940 All right, so we've got Hi, I'm the app on the screen. 74 00:03:41,940 --> 00:03:44,760 Again, humble beginnings, but it's a place to get started. 75 00:03:44,760 --> 00:03:46,020 So let's take a pause right here. 76 00:03:46,020 --> 00:03:47,250 We're gonna come back to the next section 77 00:03:47,250 --> 00:03:50,403 and start adding in some navigation to our app as well.