1 00:00:00,660 --> 00:00:05,700 In the last section we put together the bare minimum amount of code required to get our express server 2 00:00:05,700 --> 00:00:09,500 running and then we accessed it inside the browser. 3 00:00:09,500 --> 00:00:15,090 I wanted take a little bit of time to now go back and analyze every last piece of the code snippet that 4 00:00:15,090 --> 00:00:17,180 we just added inside of here. 5 00:00:17,190 --> 00:00:19,840 Now before I start that you might be thinking seaven. 6 00:00:19,890 --> 00:00:23,880 This is really basic express stuff I already know express just get on with it. 7 00:00:24,200 --> 00:00:29,400 Well I want to remind you that this course is really for everyone who has previous experience with react 8 00:00:29,430 --> 00:00:30,300 and redux. 9 00:00:30,480 --> 00:00:34,240 And I'm kind of assuming that if you're here you might be a little bit newer to express. 10 00:00:34,260 --> 00:00:39,240 So I just wanted to cover everything from absolute basics and then have a really solid foundation and 11 00:00:39,240 --> 00:00:40,340 go from there. 12 00:00:40,350 --> 00:00:41,700 So if this stuff is review for you. 13 00:00:41,700 --> 00:00:42,080 Great. 14 00:00:42,090 --> 00:00:42,720 Hey it's Review. 15 00:00:42,720 --> 00:00:43,900 Just take the review. 16 00:00:44,130 --> 00:00:46,840 Otherwise hopefully you're learning something as you go through. 17 00:00:47,090 --> 00:00:48,650 Anyways let's get back to it. 18 00:00:48,660 --> 00:00:52,200 So we're going to analyze this whole segment of code right here. 19 00:00:52,200 --> 00:00:56,060 Now I've got a little diagram that breaks it down piece by piece. 20 00:00:56,070 --> 00:01:00,710 So in this diagram you see app get forward slash rec rez. 21 00:01:00,990 --> 00:01:04,790 Well that matches up with app get Ford slash rack. 22 00:01:04,800 --> 00:01:05,880 RAZ And so on. 23 00:01:06,110 --> 00:01:06,380 OK. 24 00:01:06,390 --> 00:01:08,730 So let's go through this thing piece by piece. 25 00:01:08,790 --> 00:01:11,500 First off is the app object. 26 00:01:11,520 --> 00:01:18,510 Remember this represents the underlying running express server the Express server has some number of 27 00:01:18,510 --> 00:01:25,460 Route handlers associated with it by calling app dot get like calling that function get. 28 00:01:25,560 --> 00:01:28,060 We are creating a brand new route handler. 29 00:01:28,410 --> 00:01:34,810 So this entire segment of code right here we would refer to as a route handler. 30 00:01:34,880 --> 00:01:37,110 Next is the get function. 31 00:01:37,160 --> 00:01:43,640 So we called out get this tells express that we want to create a route handler that is watching for 32 00:01:43,700 --> 00:01:48,000 incoming HTP requests with a very specific method. 33 00:01:48,380 --> 00:01:56,490 HTP request methods are used to indicate the type or kind of what the request is attempting to accomplish. 34 00:01:56,780 --> 00:02:04,550 So we made a route handler associated with the get method Express has access to several other methods 35 00:02:04,550 --> 00:02:05,160 as well. 36 00:02:05,180 --> 00:02:11,650 So we used to get good is associated with getting information about some particular record. 37 00:02:11,690 --> 00:02:16,150 We can also set up road handlers that are associated with other methods as well. 38 00:02:16,160 --> 00:02:21,610 So app dot post or app dot put update delete after patch. 39 00:02:21,710 --> 00:02:26,980 Each of these request methods again are associated with some intent. 40 00:02:26,990 --> 00:02:30,290 Now we're not really required to follow these very explicitly. 41 00:02:30,290 --> 00:02:36,350 They are more of kind of convention of what we follow so that it's really clear at just a glance what 42 00:02:36,410 --> 00:02:40,240 any given requests overall purpose or overall goal is. 43 00:02:40,550 --> 00:02:48,260 So we would say that any request with a get type method is attempting to get information a post wants 44 00:02:48,260 --> 00:02:54,800 to send information to the server A put wants to update some properties of something a delete wants 45 00:02:54,800 --> 00:02:57,880 to delete something and a patch wants to update update. 46 00:02:57,880 --> 00:03:00,550 Just like one or two properties of something. 47 00:03:01,250 --> 00:03:05,930 So over time we're going to be using some of these different methods to create different route handlers 48 00:03:06,260 --> 00:03:10,920 that are associated with different purposes of incoming requests. 49 00:03:11,750 --> 00:03:12,190 OK. 50 00:03:12,230 --> 00:03:18,590 Now the next one the forward slash the forward slash tells express to watch for incoming requests that 51 00:03:18,590 --> 00:03:22,930 are s that are attempting to access some very particular route. 52 00:03:23,000 --> 00:03:27,820 And so we refer to this forward slash right here as the route portion of the handler. 53 00:03:27,930 --> 00:03:34,700 This specifically instructs instructs express to say if anyone visits the route localhost Colan 5000 54 00:03:35,020 --> 00:03:36,200 slash. 55 00:03:36,350 --> 00:03:42,500 So whenever we type into our browser local calling 5000 we don't you know I don't really write on slash 56 00:03:42,500 --> 00:03:47,810 right here but the browser is just kind of interpreting or assuming that we are attempting to visit 57 00:03:48,050 --> 00:03:50,940 localhost Coel and 5000 slash. 58 00:03:50,990 --> 00:03:58,490 So this is kind of an implied slash right here and express really takes that to assume if anyone comes 59 00:03:58,490 --> 00:04:04,250 to like our route route that's what the forward slash here is really indicating we could just as easily 60 00:04:05,180 --> 00:04:12,970 have a route of something like Slash greeting like so and then to create an equivalent route handler 61 00:04:13,430 --> 00:04:14,640 over inside of our code base. 62 00:04:14,660 --> 00:04:17,210 We would say slash greeting. 63 00:04:17,240 --> 00:04:23,340 So now a request to local host Culin 5000 slash greeting would execute this route handler right here 64 00:04:25,440 --> 00:04:25,940 OK. 65 00:04:25,990 --> 00:04:31,160 But right now we're going to leave it as just slash back over here. 66 00:04:31,200 --> 00:04:38,340 So now onto the arguments to the arrow function which is the second argument of the Get request handler. 67 00:04:38,340 --> 00:04:41,140 The first argument is referred to as WREC. 68 00:04:41,190 --> 00:04:44,170 This is shorthand terminology for a request. 69 00:04:44,220 --> 00:04:48,030 It's javascript object that represents the incoming request. 70 00:04:48,030 --> 00:04:53,250 So it has a bunch of data that says a little bit about who is making the request and some associated 71 00:04:53,250 --> 00:04:54,810 data with it. 72 00:04:54,930 --> 00:04:57,210 Next is the rez object. 73 00:04:57,380 --> 00:05:03,360 Rez is short for response and it represents the response or the data that is about to be sent back to 74 00:05:03,360 --> 00:05:06,050 whoever made the incoming request. 75 00:05:06,180 --> 00:05:09,640 Finally is the body of the arrow function we put in there. 76 00:05:09,660 --> 00:05:15,960 Reza not send and then we provided a plain javascript object that tells express that we want to immediately 77 00:05:15,960 --> 00:05:20,510 close the request and send back a response containing the Jaison data. 78 00:05:20,610 --> 00:05:22,400 Hi Colin there. 79 00:05:22,410 --> 00:05:25,230 Which is why we saw in our browser Hi Colin there. 80 00:05:25,290 --> 00:05:28,530 So this is a little bit of juice on data right here. 81 00:05:28,560 --> 00:05:33,420 Now one thing you'll notice with the actual request handler having broken all this code down is the 82 00:05:33,420 --> 00:05:39,530 second argument was an aero function the Aero function is called automatically by express. 83 00:05:39,650 --> 00:05:45,140 Any time some request comes into this route right here a forward slash. 84 00:05:45,450 --> 00:05:51,510 And so over time this function right here might be getting called many hundreds or thousands or tens 85 00:05:51,510 --> 00:05:57,300 of thousands of times in a single day or maybe hundreds of times in a single minute or maybe even dozens 86 00:05:57,300 --> 00:05:59,060 of times in a single second. 87 00:05:59,070 --> 00:06:05,040 So this function right here we executed every single time a single request comes and attempting to make 88 00:06:05,100 --> 00:06:09,170 a get request to the route of forward slash. 89 00:06:09,180 --> 00:06:14,380 Now the final thing I want to point out is the last line here of ductless and 5000. 90 00:06:14,640 --> 00:06:22,530 This line instructs express to tell node that it wants to listen for incoming traffic on port 5000. 91 00:06:22,890 --> 00:06:28,740 So even though it's express that it looks like is actually listening to the port behind the scenes Express 92 00:06:28,800 --> 00:06:35,340 is still telling node to listen to port five thousand seven over this diagram we had said that there 93 00:06:35,340 --> 00:06:40,590 is some port or some little door through which traffic is flowing on your machine notice waiting for 94 00:06:40,590 --> 00:06:45,200 traffic to flow in there and then that traffic is routed onto Express. 95 00:06:45,210 --> 00:06:49,830 So again even though it looks like this is express listening to the port Express is really just kind 96 00:06:49,830 --> 00:06:55,910 of turn around and telling no the run time hey watch for any traffic coming in on port five thousand. 97 00:06:56,510 --> 00:06:56,880 OK. 98 00:06:56,910 --> 00:07:00,010 So that's the basics of this little segment of code right here. 99 00:07:00,030 --> 00:07:04,260 Now again if you're already familiar with express this might seem like a little bit of review and hey 100 00:07:04,260 --> 00:07:05,300 that's totally fine. 101 00:07:05,520 --> 00:07:08,810 If this is completely new to you and you've never worked with Express before. 102 00:07:08,930 --> 00:07:10,290 I've got great news for you. 103 00:07:10,510 --> 00:07:15,660 Everything else that we do with Express is going to look nearly identical to this little segment of 104 00:07:15,660 --> 00:07:20,910 code almost everything else we do is going to be small variations on a theme with this segment right 105 00:07:20,910 --> 00:07:22,060 here. 106 00:07:22,080 --> 00:07:22,390 OK. 107 00:07:22,410 --> 00:07:25,560 So that's basically the you know basics of Express. 108 00:07:25,650 --> 00:07:29,760 Let's continue with the next section and start talking about the first task that we are going to attempt 109 00:07:29,760 --> 00:07:31,490 to accomplish with Express.