All language subtitles for 004 Preparing the Frontend Form_Downloadly.ir_en

Now to explore working with those API routes

let's go back to our standard index.js file.

So to this standard homepage route

which is not an API route, and in there

I will add a basic form, which I'll not style

in any way for the moment where I then want to add a input

of type email, let's say, and above

that a label where I say your email address

with a htmlfor tag off email

and then here an ideal email for accessibility.

And then I'll put that into a div just to kind of put

this into its own block and force a line break thereafter.

And then I'll copy that div and create a never input

with an id of message or let's name it, feedback.

The type here is text however,

and here we just say Your Feedback

and actually let's use a text area

that's more realistic I guess.

So we have a text area with an id

of feedback and let's say under a number of, five rows.

And then we add a button to submit that form send feedback.

If we adjust the homepage like

this and we reload just local host free thousand

we see this form here.

Now it is ugly.

You could add styling

but this is totally not about the styling,

this is just a dummy form, which I add

so that I can show you how we can interact with API routes.

We'll see a more beautiful example

in the next course section when we apply what we learn

in this section to our first course project.

So, here we accept the email address and some user feedback.

And of course, when that button is clicked

the idea is that this feedback is sent to some database

for example, that it's stored in some database.

Now we shouldn't talk

to a database from our front end application.

It would be kind of difficult to implement

and that would be difficult

for a reason because it's highly insecure

if we would try to add JavaScript code

to this component to talk to a database

because we would have to expose our database credentials

in this front end code for this.

And that would be highly insecure,

attached you'll find an article

and video where I talk about the dissident greater detail.

So that's not what we wanna do.

Instead that's the perfect scenario for an API route.

We fetched that user input on the front-end

and once the user then clicks that button

we send the request queue to the API route.

So to our own API, and then in that API route

we could connect to a database.

Because then there we can safely

do so because the code written

in the API route will not be exposed to the front end.

It will not be exposed to our website visitors.

So here we could securely talk to a database.

And therefore now here in index.js

I now wanna get that user input when the button

is clicked and send the request.

Now for this, I will work

with references here to get references to my inputs.

So I'll import from 'react'

to use this ref feature.

And then I'll set up two references here.

The first one is for the email input,

and then the second one

thereafter is for the feedback input.

And once we got these references created, we can assign

them to our elements with the special ref prop

and that's just standard react code has nothing

to do with API routes.

And here I'll then just point at the emailInputRef

and here I'll point at the .

Now we need a handler for the form submission.

So I'll add a function here, submit form handler,

the name is up to you.

Where we get an event object automatically

because I'll bind that to the onSubmit prop on the form.

So it will be triggered when that built

in submit event is triggered when that is fired.

And then we get access to that event object

and we need access because here I wanna

call preventDefault to prevent that browser default

where the page would basically be reloaded

because the browser sends a request automatically.

I don't want that browser behavior here.

Instead I wanna step in and send

the request myself through JavaScript.

For this year we can now extract the email text

by reaching out to the emailInputRef, and then there

since it's a Ref.current, that's always how refs work.

And then .value because in .current

a pointer at this input object is saved.

And this input object just as the text area object

in JavaScript always has a value property

which holds the current value of those inputs.

So it holds the value entered by the user.

That's the entered email.

And then we can also get the entered feedback,

of course by reaching out

to the feedbackInputRef.current.value; as well.

Now we could add validation

and check if the email or feedback is empty

we could do that here to then show an error message

to the user, but I'll not do it here

because it's not the focus of this section.

Instead now we've got these two values

and we might wanna send them

to our API route here to then, accept them,

extract them and save them in a database.

And therefore in the next step

we will work on that API route.