1 00:00:02,000 --> 00:00:04,000 Now for sending an HTTP request 2 00:00:04,000 --> 00:00:06,000 we can use the fetch function. 3 00:00:06,000 --> 00:00:10,000 That's a default JavaScript function built into JavaScript. 4 00:00:10,000 --> 00:00:12,000 It has nothing to do with react. 5 00:00:12,000 --> 00:00:15,000 It's a standard JavaScript function supported 6 00:00:15,000 --> 00:00:16,000 in modern browsers, 7 00:00:16,000 --> 00:00:21,000 and it is a function that allows us to send HTTP requests. 8 00:00:21,000 --> 00:00:26,000 We could also use third-party packages like axios 9 00:00:26,000 --> 00:00:30,000 which has all the popular library for sending HTTP requests. 10 00:00:30,000 --> 00:00:33,000 But I don't want to install an extra library here. 11 00:00:33,000 --> 00:00:35,000 So I'll stick to fetch. 12 00:00:35,000 --> 00:00:38,000 Now fetch wants an argument 13 00:00:38,000 --> 00:00:40,000 and the first argument should be a string. 14 00:00:40,000 --> 00:00:44,000 It should be the URL to which we wanna to send a request. 15 00:00:44,000 --> 00:00:47,000 And here that states URL which we get 16 00:00:47,000 --> 00:00:51,000 from the Firebase real-time database console. 17 00:00:52,000 --> 00:00:56,000 Now this Firebase real-time database service works such 18 00:00:56,000 --> 00:01:00,000 that this URL can be manipulated. 19 00:01:00,000 --> 00:01:04,000 We can add segments after this domain. 20 00:01:04,000 --> 00:01:08,000 And then these segments will be translated into folders. 21 00:01:08,000 --> 00:01:11,000 You could say in your database into tables, 22 00:01:11,000 --> 00:01:14,000 you could say, so we could send the request 23 00:01:14,000 --> 00:01:18,000 to this URL/meetups. 24 00:01:18,000 --> 00:01:23,000 And that would add a meetups table, a meetups collection 25 00:01:23,000 --> 00:01:25,000 to that database here. 26 00:01:26,000 --> 00:01:28,000 And hence, I'll do that here. 27 00:01:29,000 --> 00:01:32,000 Now, one special thing about this Firebase API is 28 00:01:32,000 --> 00:01:36,000 that you need to add dot json at the end here. 29 00:01:36,000 --> 00:01:37,000 That's not react specific. 30 00:01:37,000 --> 00:01:40,000 That's just something Firebase requires. 31 00:01:41,000 --> 00:01:42,000 And with that, 32 00:01:42,000 --> 00:01:46,000 that is the URL to which we're sending our request. 33 00:01:47,000 --> 00:01:51,000 But here I actually wanna store data 34 00:01:51,000 --> 00:01:54,000 on Firebase servers and to signal to Firebase 35 00:01:54,000 --> 00:01:58,000 and to this API that we want to store data, 36 00:01:58,000 --> 00:02:02,000 we actually must send a post request 37 00:02:02,000 --> 00:02:06,000 and by default fetch sends a get request. 38 00:02:06,000 --> 00:02:10,000 And that will always depend on the API you're working with. 39 00:02:10,000 --> 00:02:12,000 But most APIs are built such 40 00:02:12,000 --> 00:02:16,000 that storing data requires post requests. 41 00:02:17,000 --> 00:02:20,000 Now to send a post instead of a get request 42 00:02:20,000 --> 00:02:23,000 we add a second argument to fetch here. 43 00:02:23,000 --> 00:02:27,000 And that second argument is an object which allows us to 44 00:02:27,000 --> 00:02:29,000 configure this fetch function call 45 00:02:29,000 --> 00:02:32,000 and this HTTP request, therefore, 46 00:02:32,000 --> 00:02:35,000 and here in this object we can, for example, 47 00:02:35,000 --> 00:02:38,000 set a method property to define the age 48 00:02:38,000 --> 00:02:41,000 to DB method that will be used. 49 00:02:41,000 --> 00:02:44,000 And here we can set this to post instead of get 50 00:02:44,000 --> 00:02:47,000 which would be the default. 51 00:02:47,000 --> 00:02:49,000 So here we use post instead. 52 00:02:50,000 --> 00:02:52,000 Now, when we send a post request 53 00:02:52,000 --> 00:02:55,000 we should also add the data to the request 54 00:02:55,000 --> 00:02:57,000 the data which we wanna store. 55 00:02:57,000 --> 00:03:00,000 And we do that through the body field, which we add 56 00:03:00,000 --> 00:03:04,000 to the second argument to this configuration object. 57 00:03:05,000 --> 00:03:08,000 Now body wants the data we wanna append 58 00:03:08,000 --> 00:03:12,000 and that data should typically be in json format 59 00:03:12,000 --> 00:03:15,000 which is a very popular, the most popular. 60 00:03:15,000 --> 00:03:20,000 I would argue data format for transmitting data 61 00:03:20,000 --> 00:03:23,000 with HTTP requests and in Java script 62 00:03:23,000 --> 00:03:25,000 we can easily create json 63 00:03:25,000 --> 00:03:27,000 by using the built in json object 64 00:03:27,000 --> 00:03:30,000 and calling the stringify method, 65 00:03:30,000 --> 00:03:31,000 and choose stringify 66 00:03:31,000 --> 00:03:35,000 we can pass default JavaScript objects or a raise 67 00:03:35,000 --> 00:03:40,000 or values in general, and they will be converted to json. 68 00:03:40,000 --> 00:03:43,000 So here we could pass our meetup data object 69 00:03:43,000 --> 00:03:45,000 which we're getting as a parameter 70 00:03:45,000 --> 00:03:48,000 as argument to the stringIfy method. 71 00:03:49,000 --> 00:03:50,000 Now, last but not least 72 00:03:50,000 --> 00:03:53,000 we can add some extra headers if we want to. 73 00:03:53,000 --> 00:03:58,000 And for example, adds to content type header and set it 74 00:03:58,000 --> 00:04:02,000 to application/json, to add this extra metadata 75 00:04:02,000 --> 00:04:05,000 to the outgoing request and make it crystal clear 76 00:04:05,000 --> 00:04:09,000 that this request carries json data, some APIs 77 00:04:09,000 --> 00:04:12,000 also required this, and with that 78 00:04:12,000 --> 00:04:15,000 we're sending such a post request. 79 00:04:15,000 --> 00:04:17,000 We can do more with fetch. 80 00:04:17,000 --> 00:04:20,000 We can listen to the success and error cases 81 00:04:20,000 --> 00:04:25,000 and we do that in the full react course, which I offer. 82 00:04:25,000 --> 00:04:28,000 But for the moment here, this is actually enough 83 00:04:28,000 --> 00:04:31,000 because this will already sent a post request 84 00:04:31,000 --> 00:04:35,000 with our data to Firebase. 85 00:04:35,000 --> 00:04:38,000 And hence, now here, if we saved this 86 00:04:38,000 --> 00:04:43,000 and I click on add meetup now with data entered, 87 00:04:44,000 --> 00:04:46,000 we don't see any feedback here. 88 00:04:46,000 --> 00:04:47,000 We'll work on that in a second. 89 00:04:47,000 --> 00:04:49,000 But if we go to Firebase 90 00:04:49,000 --> 00:04:52,000 we see that there is a new meet-ups node. 91 00:04:52,000 --> 00:04:55,000 And in that note, we got this cryptic ID here, 92 00:04:55,000 --> 00:04:58,000 which is actually auto-generated by Firebase. 93 00:04:58,000 --> 00:05:03,000 And if we expand this, we see our submitted data. 94 00:05:04,000 --> 00:05:08,000 So storing that data on Firebase servers works. 95 00:05:10,000 --> 00:05:11,000 Now let's work 96 00:05:11,000 --> 00:05:14,000 on the feedback which we provide to the user here. 97 00:05:14,000 --> 00:05:16,000 When we add a meetup.