1 00:00:01,170 --> 00:00:06,330 Well here are a couple dozen videos into a course on full stack react. 2 00:00:06,330 --> 00:00:11,430 And somehow we have avoided working with react at all this entire time. 3 00:00:11,430 --> 00:00:15,740 We haven't touched a lick of re-act it's all been stuff on our server backend. 4 00:00:16,170 --> 00:00:20,580 In this section we're going to start to pivot away from the from the back end server a little bit and 5 00:00:20,580 --> 00:00:25,960 we're going to start to focus on some of the front end elements of our application. 6 00:00:26,070 --> 00:00:31,590 Now before we touch a lick of code before we do anything with the client side configuration at all I 7 00:00:31,590 --> 00:00:35,160 want to take just a quick pause and set some expectations. 8 00:00:35,160 --> 00:00:35,680 All right. 9 00:00:35,730 --> 00:00:40,680 So I want to give you a really good idea of what we're going to be doing in these coming sections because 10 00:00:40,680 --> 00:00:46,090 it's very important that you understand some kind of like how I designed this course to really work. 11 00:00:46,860 --> 00:00:53,550 So when we start to install the client side of our application the configuration that I have picked 12 00:00:53,610 --> 00:00:58,050 are the kind of architecture we're going to use is something that is pretty darn common. 13 00:00:58,080 --> 00:01:04,820 I would say relatively straightforward to set up and get working and exceptionally easy to deploy. 14 00:01:05,040 --> 00:01:08,240 So we're going to have a pretty easy time setting everything up. 15 00:01:08,340 --> 00:01:12,870 We're going to have an easy time deploying it and we're going to get a lot of awesome features out of 16 00:01:12,870 --> 00:01:18,340 the box with react like automatic reloading lynching. 17 00:01:18,510 --> 00:01:19,770 Really good reporting. 18 00:01:19,800 --> 00:01:24,570 All this kind of all the stuff that you really want to have when you are writing re-act applications. 19 00:01:24,570 --> 00:01:28,490 And we're going to have a really easy time setting all of it up. 20 00:01:28,680 --> 00:01:29,800 On the flip side. 21 00:01:29,820 --> 00:01:33,060 So this is this is why I want to specifically take time to tell you about this. 22 00:01:33,060 --> 00:01:38,790 It's really important that you understand it doing the setup will be very easy but understanding what 23 00:01:38,790 --> 00:01:44,130 is going on behind the scenes and understanding how our server is going to work together with the client 24 00:01:44,430 --> 00:01:47,520 is very complicated and very hard. 25 00:01:47,610 --> 00:01:48,950 I'm going to tell you that right now. 26 00:01:48,990 --> 00:01:49,840 OK. 27 00:01:49,850 --> 00:01:54,600 And the reason I'm telling you this is that when we do the setup it's going to fly by and you're going 28 00:01:54,600 --> 00:01:56,880 to think wow this is great really straightforward. 29 00:01:57,090 --> 00:02:02,520 But we are going to also dive into some of the stuff behind the scenes to really understand how everything 30 00:02:02,520 --> 00:02:07,780 is working together and at that point in time you might say to me Steven you're crazy. 31 00:02:07,800 --> 00:02:10,140 Why did we pick this server architecture. 32 00:02:10,140 --> 00:02:12,000 Why are we writing our application like this. 33 00:02:12,000 --> 00:02:14,100 Why is this so complicated. 34 00:02:14,100 --> 00:02:15,980 So I want to be super clear here. 35 00:02:16,230 --> 00:02:20,900 It's going to seem hard because we're going to try to figure out what is going on behind the scenes. 36 00:02:21,090 --> 00:02:23,750 You don't have to understand what's going on behind the scenes. 37 00:02:23,760 --> 00:02:27,960 And if you don't care about that you can just do the set up and be totally happy and say Well that was 38 00:02:27,960 --> 00:02:31,160 easy everything's really fantastic everything's working out just fine. 39 00:02:31,470 --> 00:02:35,460 So the reason we're going through all these behind the scenes stuff is that this is a course that is 40 00:02:35,460 --> 00:02:38,260 designed to teach you what is going on behind the scenes. 41 00:02:38,340 --> 00:02:42,930 Of course we could just easily do the client side setup and call it a day and you know build the app 42 00:02:42,930 --> 00:02:43,580 and walk away. 43 00:02:43,590 --> 00:02:47,240 But you know again that's not why you're here taking this course. 44 00:02:47,250 --> 00:02:51,020 We're doing this course because you want to figure out how stuff is really working. 45 00:02:51,450 --> 00:02:52,590 OK. 46 00:02:52,590 --> 00:02:59,430 So just you know one more time I got to tell you it will seem confusing it's just confusing because 47 00:02:59,430 --> 00:03:01,890 we are going behind the scenes to figure this stuff out. 48 00:03:01,890 --> 00:03:05,370 The actual real set up is very simple and very straightforward. 49 00:03:05,430 --> 00:03:06,580 OK. 50 00:03:07,410 --> 00:03:07,800 All right. 51 00:03:07,800 --> 00:03:08,770 So enough of that. 52 00:03:08,820 --> 00:03:10,440 I don't want to scare you away of course. 53 00:03:10,440 --> 00:03:11,180 Maybe I already did. 54 00:03:11,190 --> 00:03:13,500 But you know whatever. 55 00:03:13,560 --> 00:03:17,270 So let's figure out how we're going to be doing the front end application in this section. 56 00:03:17,280 --> 00:03:19,350 We're going to look at a little documentation. 57 00:03:19,350 --> 00:03:23,690 We're going to install the module and then generate a brand new re-act project. 58 00:03:23,700 --> 00:03:29,850 So in my browser I'm going to open up a brand new tab and I'm going to do a google search for create 59 00:03:30,840 --> 00:03:36,260 re-act create re-act app so create react up. 60 00:03:36,280 --> 00:03:39,750 We just see a nice little pop up on get hub towards the top. 61 00:03:40,090 --> 00:03:46,120 And this is old documentation about a very popular tool for building re-act applications called as you 62 00:03:46,120 --> 00:03:48,360 might guess create re-act out. 63 00:03:48,550 --> 00:03:54,700 So we're going to install this tool as an NPM module and then use it to generate a brand new re-act 64 00:03:54,760 --> 00:03:55,900 project. 65 00:03:55,900 --> 00:04:00,730 Now the reason I show you this documentation page is that you can look around on here and they've got 66 00:04:00,730 --> 00:04:07,480 some really just great great great documentation on how to work with this starter package all the different 67 00:04:07,480 --> 00:04:12,520 commands that are available and this great user guide right here that will answer a lot of many common 68 00:04:12,520 --> 00:04:14,020 questions you might have. 69 00:04:14,230 --> 00:04:19,240 So for example if you want to use SAS or lessen your project Hey here's a link on how to do it right 70 00:04:19,240 --> 00:04:20,030 here. 71 00:04:20,050 --> 00:04:22,700 You want to use images fonts files right here. 72 00:04:22,840 --> 00:04:26,740 Global variables flow type checking all of these different stuff. 73 00:04:26,740 --> 00:04:29,980 They have fantastic guides on here to help you along. 74 00:04:30,250 --> 00:04:31,030 OK. 75 00:04:31,600 --> 00:04:32,530 So let's get to it. 76 00:04:32,530 --> 00:04:38,380 We're going to flip on over to our terminal install create re-act up as a global NPM module and then 77 00:04:38,380 --> 00:04:40,930 use it to generate our project. 78 00:04:40,960 --> 00:04:42,950 So I get it on over to my terminal. 79 00:04:43,030 --> 00:04:45,410 I'm still inside my server directory right now. 80 00:04:45,520 --> 00:04:53,350 I'm going to install create re-act out as a global module by running the command sudo NPM install d'Asti 81 00:04:53,800 --> 00:04:55,260 create react. 82 00:04:55,450 --> 00:05:00,040 Now a quick note if you are on Windows you do not need to add on sudo here. 83 00:05:00,130 --> 00:05:03,190 If you are on Windows no sudo so go back and delete that. 84 00:05:03,310 --> 00:05:08,350 If you are on Windows I want you to make sure that your terminal is currently running with administrative 85 00:05:08,350 --> 00:05:09,390 privileges. 86 00:05:09,430 --> 00:05:14,110 If it's not you're going to see a message that says like you don't have permission to do this. 87 00:05:14,200 --> 00:05:19,270 So if you see that message and your own windows make sure you re-open your command prompt or whatever 88 00:05:19,270 --> 00:05:21,410 you're using with admin privileges. 89 00:05:21,790 --> 00:05:29,470 OK so once all this I get prompted for my password and then it goes ahead and does the installation. 90 00:05:29,680 --> 00:05:34,840 Now installing create re-act out will only take a second or two because it's just kind of a shell of 91 00:05:34,840 --> 00:05:38,260 a program that is used to generate a new project. 92 00:05:38,260 --> 00:05:44,620 Now the actual project that is generated is quite small and quite compact but when we generate the project 93 00:05:44,650 --> 00:05:47,140 and also pulls in a ton of dependencies. 94 00:05:47,290 --> 00:05:48,660 So that's what takes a lot of time. 95 00:05:48,700 --> 00:05:51,270 Gendering the project is what takes a long long time. 96 00:05:51,340 --> 00:05:53,670 Installing this tool does not. 97 00:05:53,740 --> 00:05:55,560 OK so we've now got the tool installed. 98 00:05:55,780 --> 00:06:01,000 We'll use it to generate a new project inside of our server directory. 99 00:06:01,000 --> 00:06:04,200 OK this is really really important right now. 100 00:06:04,360 --> 00:06:09,580 I want to make sure that you are inside of your server directory when you're inside the server directory 101 00:06:09,580 --> 00:06:12,160 and you should be able to see all the files we've been working on. 102 00:06:12,310 --> 00:06:16,130 We're going to run a command to generate our new re-act project. 103 00:06:16,130 --> 00:06:22,540 So I going to say create re-act app and then the name of our project which we're going to call client 104 00:06:22,970 --> 00:06:26,130 and again very important that you call this thing client. 105 00:06:26,280 --> 00:06:26,950 OK. 106 00:06:27,190 --> 00:06:29,470 So make sure you are in your server directory. 107 00:06:29,510 --> 00:06:34,030 You run this command and you call the thing client. 108 00:06:34,030 --> 00:06:39,250 So hit enter let do its thing and it's going to run off and start to install a whole bunch of different 109 00:06:39,250 --> 00:06:40,330 packages. 110 00:06:40,330 --> 00:06:44,770 It's just going to take a couple of minutes just like this message yours says. 111 00:06:44,830 --> 00:06:46,170 So let's take a quick break. 112 00:06:46,180 --> 00:06:47,080 We'll let it do its thing. 113 00:06:47,080 --> 00:06:48,680 We'll come back in the next section. 114 00:06:48,700 --> 00:06:53,860 We'll look at some of what we get for free out of the starter package and we'll start talking about 115 00:06:53,860 --> 00:06:55,990 how we're going to set up our application. 116 00:06:55,990 --> 00:06:58,870 So I'll see you in just a second.