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