1 00:00:02,000 --> 00:00:05,000 So we wanna send our meetup data to a server. 2 00:00:05,000 --> 00:00:07,000 This course is about React. 3 00:00:07,000 --> 00:00:09,000 About the front end. 4 00:00:09,000 --> 00:00:13,000 And therefore here we will not write any server side code 5 00:00:13,000 --> 00:00:15,000 or create our own backend. 6 00:00:15,000 --> 00:00:18,000 I do have separate tutorials on that. 7 00:00:18,000 --> 00:00:20,000 Got my node JS course, 8 00:00:20,000 --> 00:00:23,000 where you learn all about that backend technology, 9 00:00:23,000 --> 00:00:26,000 including how to connect to databases, 10 00:00:26,000 --> 00:00:29,000 how to create REST APIs and much more. 11 00:00:29,000 --> 00:00:31,000 And they got a free tutorial as well 12 00:00:31,000 --> 00:00:35,000 where we also built a REST API in detail 13 00:00:35,000 --> 00:00:37,000 with no CHAZ step-by-step. 14 00:00:37,000 --> 00:00:39,000 Because with the React 15 00:00:39,000 --> 00:00:43,000 or with single page applications in general, 16 00:00:43,000 --> 00:00:46,000 you typically need a backend API 17 00:00:46,000 --> 00:00:48,000 to which you can send your requests. 18 00:00:48,000 --> 00:00:52,000 So a backend, which does not send back HTML 19 00:00:52,000 --> 00:00:55,000 but which instead expects data in a certain format, 20 00:00:55,000 --> 00:00:58,000 typically JSON format, 21 00:00:58,000 --> 00:01:01,000 and which then returns data in that JSON format. 22 00:01:01,000 --> 00:01:04,000 And which simply exposes a couple of URLs 23 00:01:04,000 --> 00:01:06,000 to which you can send requests. 24 00:01:06,000 --> 00:01:10,000 And depending on which URL you're sending a request to, 25 00:01:10,000 --> 00:01:12,000 different things will happen. 26 00:01:12,000 --> 00:01:14,000 That's the kind of backend 27 00:01:14,000 --> 00:01:18,000 you typically connect to with React. 28 00:01:18,000 --> 00:01:21,000 Now you don't connect a front-end application 29 00:01:21,000 --> 00:01:25,000 like React or Angular to a database itself. 30 00:01:25,000 --> 00:01:27,000 I got a full tutorial on that 31 00:01:27,000 --> 00:01:29,000 where I explained why we don't want to do that. 32 00:01:29,000 --> 00:01:32,000 You also find a link to that attached. 33 00:01:32,000 --> 00:01:35,000 You don't connect directly to a database 34 00:01:35,000 --> 00:01:39,000 with React and so on because of security. 35 00:01:39,000 --> 00:01:43,000 All the code you write here in your React application 36 00:01:43,000 --> 00:01:47,000 in the end is exposed to the visitors of your page. 37 00:01:47,000 --> 00:01:49,000 Through to dev tools, If I look at sources, 38 00:01:49,000 --> 00:01:52,000 if I dig into that I can read 39 00:01:52,000 --> 00:01:55,000 the JavaScript code that makes up your application. 40 00:01:55,000 --> 00:01:59,000 It might look a bit different than when we wrote it 41 00:01:59,000 --> 00:02:01,000 but all the code is in there. 42 00:02:01,000 --> 00:02:05,000 And database credentials would be in there as well. 43 00:02:05,000 --> 00:02:07,000 That's why instead we need a backend API, 44 00:02:07,000 --> 00:02:10,000 a backend server to which we can send requests 45 00:02:10,000 --> 00:02:12,000 and then its that server, 46 00:02:12,000 --> 00:02:14,000 which on this server 47 00:02:14,000 --> 00:02:17,000 connects to a database and stores data in a database. 48 00:02:17,000 --> 00:02:20,000 And hence, that's what we're going to do here. 49 00:02:20,000 --> 00:02:21,000 Now, as I mentioned though 50 00:02:21,000 --> 00:02:23,000 we're not going to write our own API. 51 00:02:23,000 --> 00:02:27,000 Instead, we're going to use Firebase as a dummy backend here 52 00:02:27,000 --> 00:02:30,000 Firebase is a service offered by Google. 53 00:02:30,000 --> 00:02:33,000 It is actually made up of a bunch of different services 54 00:02:33,000 --> 00:02:37,000 but it is a service which you can get started with for free. 55 00:02:37,000 --> 00:02:39,000 You just need a Google account. 56 00:02:39,000 --> 00:02:42,000 And it is a service which contains a database 57 00:02:42,000 --> 00:02:46,000 and an API to which we can send requests 58 00:02:46,000 --> 00:02:50,000 which will then ensure that data is saved in that database. 59 00:02:51,000 --> 00:02:54,000 And for this I'll therefore log in here 60 00:02:54,000 --> 00:02:56,000 with my Google account. 61 00:02:56,000 --> 00:03:01,000 And then once logged in, we can create a new project here. 62 00:03:02,000 --> 00:03:04,000 You can enter any project name you want here. 63 00:03:04,000 --> 00:03:08,000 I'll just name it React. Getting dash started. 64 00:03:09,000 --> 00:03:11,000 Click continue. 65 00:03:11,000 --> 00:03:12,000 You can disable Google Analytics. 66 00:03:12,000 --> 00:03:16,000 We don't need that and create that project. 67 00:03:16,000 --> 00:03:17,000 Now, as I said, 68 00:03:17,000 --> 00:03:19,000 Firebase is a service which has a bunch 69 00:03:19,000 --> 00:03:21,000 of built in capabilities. 70 00:03:21,000 --> 00:03:24,000 Here, we'll just use it in a very basic way 71 00:03:24,000 --> 00:03:27,000 to have this dummy backend to talk to. 72 00:03:27,000 --> 00:03:30,000 And I'm using this backend, this service, 73 00:03:30,000 --> 00:03:31,000 because that allows me 74 00:03:31,000 --> 00:03:35,000 to show you how you send requests to a backend. 75 00:03:35,000 --> 00:03:37,000 And you would then do that in the same way 76 00:03:37,000 --> 00:03:39,000 no matter which backend you use in the end. 77 00:03:39,000 --> 00:03:42,000 That's why that's a good service to use. 78 00:03:42,000 --> 00:03:45,000 Now here, we wanna use the real time database 79 00:03:45,000 --> 00:03:48,000 which is one of the features Firebase offers. 80 00:03:48,000 --> 00:03:51,000 And then there click on create database. 81 00:03:51,000 --> 00:03:53,000 Now you can leave to default region 82 00:03:53,000 --> 00:03:55,000 and make sure that you start in test mode 83 00:03:55,000 --> 00:03:57,000 not in locked mode. 84 00:03:57,000 --> 00:04:00,000 Otherwise you'll not be able to send requests. 85 00:04:01,000 --> 00:04:04,000 Now, this sets up a database end, very important, 86 00:04:04,000 --> 00:04:09,000 also immediately an API to which we can send requests. 87 00:04:09,000 --> 00:04:13,000 We can use this URL here to send requests to 88 00:04:13,000 --> 00:04:16,000 and behind the scenes on Firebase servers 89 00:04:16,000 --> 00:04:19,000 those requests will then be parsed. 90 00:04:19,000 --> 00:04:22,000 And depending on which kind of request we send 91 00:04:22,000 --> 00:04:26,000 data attached to the request will be extracted 92 00:04:26,000 --> 00:04:29,000 and stored in the database automatically. 93 00:04:29,000 --> 00:04:31,000 And therefore it can look like 94 00:04:31,000 --> 00:04:34,000 if we're directly sending requests to a database 95 00:04:34,000 --> 00:04:38,000 but we're actually sending requests to that Firebase API 96 00:04:38,000 --> 00:04:42,000 which then behind the scenes stores them in a database. 97 00:04:42,000 --> 00:04:45,000 And therefore that's the URL 98 00:04:45,000 --> 00:04:47,000 to which we now want to send the request 99 00:04:47,000 --> 00:04:49,000 when we submit that form. 100 00:04:51,000 --> 00:04:54,000 Now it's up to us where we wanna send that request. 101 00:04:54,000 --> 00:04:57,000 If that's in the Meetup form component, 102 00:04:57,000 --> 00:05:00,000 or maybe in the we'll Meetup page component. 103 00:05:00,000 --> 00:05:02,000 And since the new Meetup form component 104 00:05:02,000 --> 00:05:06,000 is already quite a big file, 105 00:05:06,000 --> 00:05:09,000 I will actually not add the HTTP code here 106 00:05:09,000 --> 00:05:12,000 but instead in the new Meetup component code. 107 00:05:13,000 --> 00:05:14,000 So in the new Meetup form component, 108 00:05:14,000 --> 00:05:17,000 I just wanna forward that Meetup data 109 00:05:17,000 --> 00:05:19,000 to the parent component. 110 00:05:19,000 --> 00:05:22,000 To the component where we use this component. 111 00:05:22,000 --> 00:05:25,000 And we learned that we can do that with props. 112 00:05:25,000 --> 00:05:29,000 We can accept props here in the new Meetup form. 113 00:05:29,000 --> 00:05:31,000 And then instead of console logging the Meetup data 114 00:05:31,000 --> 00:05:34,000 we can expect that on props, 115 00:05:34,000 --> 00:05:39,000 we have some prop which actually gets function as a value. 116 00:05:39,000 --> 00:05:42,000 A function, which we can then call from inside here. 117 00:05:42,000 --> 00:05:47,000 Let's say the onAddMeetup prop. 118 00:05:47,000 --> 00:05:51,000 The name is up to you because that's our component. 119 00:05:51,000 --> 00:05:54,000 I expect that the value on this prop is a function 120 00:05:54,000 --> 00:05:56,000 so we can execute it here. 121 00:05:56,000 --> 00:06:00,000 And I'll pass Meetup data as a argument. 122 00:06:00,000 --> 00:06:01,000 Now, of course, for this to work 123 00:06:01,000 --> 00:06:05,000 we now need to make sure that in the new Meetup component 124 00:06:05,000 --> 00:06:08,000 we now add this onAddMeetup prop. 125 00:06:10,000 --> 00:06:14,000 And that the value we pass in here is a function. 126 00:06:14,000 --> 00:06:16,000 So here I'll add a new function, 127 00:06:16,000 --> 00:06:20,000 the addMeetupHandler function, 128 00:06:20,000 --> 00:06:24,000 which expects to get some Meetup data 129 00:06:24,000 --> 00:06:26,000 because I'm passing that argument here 130 00:06:26,000 --> 00:06:28,000 when I call the function 131 00:06:28,000 --> 00:06:31,000 from inside the new Meetup form component. 132 00:06:31,000 --> 00:06:33,000 So I expect that data here. 133 00:06:33,000 --> 00:06:37,000 And I then pass this addMeetupHandler function 134 00:06:37,000 --> 00:06:40,000 as a value to onAddMeetup like this. 135 00:06:40,000 --> 00:06:43,000 without parentheses just pointing at it. 136 00:06:45,000 --> 00:06:46,000 Now in this function, 137 00:06:46,000 --> 00:06:49,000 that's where I wanna send a HTTP request.