So we wanna send our meetup data to a server.
This course is about React.
About the front end.
And therefore here we will not write any server side code
or create our own backend.
I do have separate tutorials on that.
Got my node JS course,
where you learn all about that backend technology,
including how to connect to databases,
how to create REST APIs and much more.
And they got a free tutorial as well
where we also built a REST API in detail
with no CHAZ step-by-step.
Because with the React
or with single page applications in general,
you typically need a backend API
to which you can send your requests.
So a backend, which does not send back HTML
but which instead expects data in a certain format,
typically JSON format,
and which then returns data in that JSON format.
And which simply exposes a couple of URLs
to which you can send requests.
And depending on which URL you're sending a request to,
different things will happen.
That's the kind of backend
you typically connect to with React.
Now you don't connect a front-end application
like React or Angular to a database itself.
I got a full tutorial on that
where I explained why we don't want to do that.
You also find a link to that attached.
You don't connect directly to a database
with React and so on because of security.
All the code you write here in your React application
in the end is exposed to the visitors of your page.
Through to dev tools, If I look at sources,
if I dig into that I can read
the JavaScript code that makes up your application.
It might look a bit different than when we wrote it
but all the code is in there.
And database credentials would be in there as well.
That's why instead we need a backend API,
a backend server to which we can send requests
and then its that server,
which on this server
connects to a database and stores data in a database.
And hence, that's what we're going to do here.
Now, as I mentioned though
we're not going to write our own API.
Instead, we're going to use Firebase as a dummy backend here
Firebase is a service offered by Google.
It is actually made up of a bunch of different services
but it is a service which you can get started with for free.
You just need a Google account.
And it is a service which contains a database
and an API to which we can send requests
which will then ensure that data is saved in that database.
And for this I'll therefore log in here
with my Google account.
And then once logged in, we can create a new project here.
You can enter any project name you want here.
I'll just name it React. Getting dash started.
Click continue.
You can disable Google Analytics.
We don't need that and create that project.
Now, as I said,
Firebase is a service which has a bunch
of built in capabilities.
Here, we'll just use it in a very basic way
to have this dummy backend to talk to.
And I'm using this backend, this service,
because that allows me
to show you how you send requests to a backend.
And you would then do that in the same way
no matter which backend you use in the end.
That's why that's a good service to use.
Now here, we wanna use the real time database
which is one of the features Firebase offers.
And then there click on create database.
Now you can leave to default region
and make sure that you start in test mode
not in locked mode.
Otherwise you'll not be able to send requests.
Now, this sets up a database end, very important,
also immediately an API to which we can send requests.
We can use this URL here to send requests to
and behind the scenes on Firebase servers
those requests will then be parsed.
And depending on which kind of request we send
data attached to the request will be extracted
and stored in the database automatically.
And therefore it can look like
if we're directly sending requests to a database
but we're actually sending requests to that Firebase API
which then behind the scenes stores them in a database.
And therefore that's the URL
to which we now want to send the request
when we submit that form.
Now it's up to us where we wanna send that request.
If that's in the Meetup form component,
or maybe in the we'll Meetup page component.
And since the new Meetup form component
is already quite a big file,
I will actually not add the HTTP code here
but instead in the new Meetup component code.
So in the new Meetup form component,
I just wanna forward that Meetup data
to the parent component.
To the component where we use this component.
And we learned that we can do that with props.
We can accept props here in the new Meetup form.
And then instead of console logging the Meetup data
we can expect that on props,
we have some prop which actually gets function as a value.
A function, which we can then call from inside here.
Let's say the onAddMeetup prop.
The name is up to you because that's our component.
I expect that the value on this prop is a function
so we can execute it here.
And I'll pass Meetup data as a argument.
Now, of course, for this to work
we now need to make sure that in the new Meetup component
we now add this onAddMeetup prop.
And that the value we pass in here is a function.
So here I'll add a new function,
the addMeetupHandler function,
which expects to get some Meetup data
because I'm passing that argument here
when I call the function
from inside the new Meetup form component.
So I expect that data here.
And I then pass this addMeetupHandler function
as a value to onAddMeetup like this.
without parentheses just pointing at it.
Now in this function,
that's where I wanna send a HTTP request.