Resources for a basic front-end to comunicate with Api Rest?

So I started building an api rest. I have some routes working succesfully. I want to try the get and post requests that i´ve tried with the a rest dev tool (insomnia/postman), but with a basic front end.

But I´m finding quite difficult to find resources to something as simple as this.

I know some React, so I dont mind if using it would facilitate achieving this, but please I would appreciate some direction:

For example I have get route that gets all of the “tests” in the database (im builing a quiz app). I already have the button in the front-end that says “search tests”. So now how can I make that button in the html to “talk” with the api rest? Lets just not say to actually print the result, but at least that first part.

Any help would be appreciate, just need some direction here or an advice where should i look more info

Hello!

Basically, what you need to do is make that button trigger a method you will create. In that method, you will have to set an XMLHttpRequest and provide a callback function that will deal with the received data.

I have found an article which explains it very detailed and seems to be exactly what you are looking for. It’s a Javascript approach, so you can use it with plain Javascript or any framework you prefer, like React.
Link to the Article: https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/

Also, in frontend frameworks we usually use some libraries that simplifies those requests for us, for instance Axios which I believe works well with React.
I have also found an article that explain how you can use Axios in your React Application and provide some simple usage examples for you to integrate with the API you built.
Link to the Article: https://alligator.io/react/axios-react/

Hope it helps! :wink:

1 Like

Yeah, will help a lot, this is very useful thanks!

Just marked your reply as solution because Tania Rascia´s tutorial was exactly what I was looking for. Yuuuhhouuuu’!

1 Like