All language subtitles for 025 Preparing the App for Http_en

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.