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 { useRef } 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 {feedbackInputRef}.
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.