1 00:00:02,000 --> 00:00:04,000 So how can we send requests 2 00:00:04,000 --> 00:00:08,000 from inside our React application to a backend? 3 00:00:08,000 --> 00:00:12,000 Well, let's start with creating new posts. 4 00:00:12,000 --> 00:00:15,000 For that we got this new post component and there 5 00:00:15,000 --> 00:00:19,000 at the moment I have this submit handler where I 6 00:00:19,000 --> 00:00:22,000 have the end call on add post and pass the collected 7 00:00:22,000 --> 00:00:27,000 post data to the parent component of new post. 8 00:00:27,000 --> 00:00:30,000 In this case, that's the post list component. 9 00:00:30,000 --> 00:00:32,000 There, I'm using the new post component 10 00:00:32,000 --> 00:00:36,000 and on add post we're executing this add post handler 11 00:00:36,000 --> 00:00:40,000 where at the moment we're updating this local post state. 12 00:00:40,000 --> 00:00:44,000 Well, we definitely still want that local post state 13 00:00:44,000 --> 00:00:46,000 because we still want to render some posts 14 00:00:46,000 --> 00:00:51,000 but we also wanna send that data to the backend. 15 00:00:51,000 --> 00:00:53,000 And in that backend code, just as a side note, 16 00:00:53,000 --> 00:00:55,000 this API route should be hit, 17 00:00:55,000 --> 00:00:59,000 a post request should be sent to this path on the backend, 18 00:00:59,000 --> 00:01:01,000 and there this post will be stored 19 00:01:01,000 --> 00:01:03,000 in a file in this post JSON file 20 00:01:03,000 --> 00:01:06,000 enriched with an extra pseudo unique ID. 21 00:01:06,000 --> 00:01:08,000 But that's just a side note. 22 00:01:08,000 --> 00:01:11,000 So that's the path to which a request should be sent. 23 00:01:11,000 --> 00:01:15,000 And to do that, we can use the fetch API. 24 00:01:15,000 --> 00:01:18,000 The fetch function is available in browsers out of the box. 25 00:01:18,000 --> 00:01:20,000 It's not a React feature. 26 00:01:20,000 --> 00:01:24,000 And fetch can be used to send HTTP requests. 27 00:01:24,000 --> 00:01:27,000 And unlike the name suggests you cannot just use it 28 00:01:27,000 --> 00:01:30,000 to fetch data, but also to send data. 29 00:01:30,000 --> 00:01:32,000 It's a bit confusing but that's what you 30 00:01:32,000 --> 00:01:34,000 can do with that fetch function. 31 00:01:35,000 --> 00:01:38,000 Now fetch takes the url to which you wanna send the request 32 00:01:38,000 --> 00:01:41,000 and in my case that's local host 8080, local host 33 00:01:41,000 --> 00:01:44,000 because this backend runs locally on our machine 34 00:01:44,000 --> 00:01:47,000 and 8080 as mentioned is the port 35 00:01:47,000 --> 00:01:49,000 on which we listed on this backend server. 36 00:01:50,000 --> 00:01:54,000 So we send a request to this URL or to this domain. 37 00:01:54,000 --> 00:01:57,000 And then there specifically, we wanna target the slash 38 00:01:57,000 --> 00:02:00,000 posts path here because as I just mentioned 39 00:02:00,000 --> 00:02:05,000 it's this slash posts path here where we expect a post 40 00:02:05,000 --> 00:02:08,000 request if we wanna store a new post in this file. 41 00:02:09,000 --> 00:02:13,000 Therefore, we also have to configure this request because 42 00:02:13,000 --> 00:02:16,000 by default fetch sends a get request and we can now 43 00:02:16,000 --> 00:02:18,000 pass an object as a second argument to fetch 44 00:02:18,000 --> 00:02:22,000 to set the method to post, to turn this into a 45 00:02:22,000 --> 00:02:25,000 post request and to then also add a body, so 46 00:02:25,000 --> 00:02:28,000 the data that should be attached to this outgoing request. 47 00:02:29,000 --> 00:02:32,000 And here the data I do wanna send is my post data 48 00:02:32,000 --> 00:02:34,000 of course, the data we're getting here, 49 00:02:34,000 --> 00:02:37,000 but we have to convert this to JSON. 50 00:02:37,000 --> 00:02:39,000 So to the JSON format, which we can do with the 51 00:02:39,000 --> 00:02:43,000 built in JSON object and the stringify method. 52 00:02:44,000 --> 00:02:47,000 With that, we turn that data into JSON, as we must do. 53 00:02:47,000 --> 00:02:48,000 And then last, but not least we should add 54 00:02:48,000 --> 00:02:51,000 some headers to this outgoing request by setting 55 00:02:51,000 --> 00:02:53,000 an object on this header's property. 56 00:02:53,000 --> 00:02:55,000 And here I want to add the content type header 57 00:02:55,000 --> 00:02:58,000 and set this to application JSON. 58 00:02:58,000 --> 00:03:00,000 And that's how we could send such a post request 59 00:03:00,000 --> 00:03:05,000 with our post data to the right path on this dummy backend. 60 00:03:06,000 --> 00:03:08,000 Now fetch will then send this request, 61 00:03:08,000 --> 00:03:12,000 hit this API route here, this API resource 62 00:03:12,000 --> 00:03:16,000 and then ultimately it will return a response. 63 00:03:16,000 --> 00:03:18,000 Now for the moment, I'm not really interested 64 00:03:18,000 --> 00:03:22,000 in the response here, and therefore we can just save this. 65 00:03:22,000 --> 00:03:27,000 And if we do so and I add a new post test max 66 00:03:27,000 --> 00:03:29,000 it still appears locally because 67 00:03:29,000 --> 00:03:31,000 I still update my posts as I did before. 68 00:03:31,000 --> 00:03:34,000 But if we switch to the backend here 69 00:03:34,000 --> 00:03:36,000 we should see that in posts JSON 70 00:03:36,000 --> 00:03:38,000 we also got the post here. 71 00:03:39,000 --> 00:03:43,000 So it was indeed received on the backend and stored there. 72 00:03:44,000 --> 00:03:46,000 And that's generally how we can send the request 73 00:03:46,000 --> 00:03:49,000 from our front end to the backend. 74 00:03:49,000 --> 00:03:52,000 Nothing special about that here. 75 00:03:52,000 --> 00:03:54,000 It's the standard fetch function 76 00:03:54,000 --> 00:03:56,000 and it does what we would expect. 77 00:03:56,000 --> 00:03:59,000 But of course we now also wanna fetch data. 78 00:03:59,000 --> 00:04:02,000 We wanna make sure that if we reload this page 79 00:04:02,000 --> 00:04:05,000 or if we visit it for the first time 80 00:04:05,000 --> 00:04:07,000 we fetch the available posts from the back end. 81 00:04:07,000 --> 00:04:10,000 And here things become a bit more tricky.