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

**URL:** <https://forum.freecodecamp.org/t/resources-for-a-basic-front-end-to-comunicate-with-api-rest/321070>\
**Category:** General\
**Created:** [October 11, 2019, 2:32pm UTC](https://forum.freecodecamp.org/t/resources-for-a-basic-front-end-to-comunicate-with-api-rest/321070 "2019-10-11T14:32:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Onpointiscake](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/onpointiscake/32/112084_2.png) [@Onpointiscake](https://forum.freecodecamp.org/u/Onpointiscake)\
**Post date:** [October 11, 2019, 2:32pm UTC](https://forum.freecodecamp.org/t/resources-for-a-basic-front-end-to-comunicate-with-api-rest/321070/1 "2019-10-11T14:32:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leonardogiroto](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/leonardogiroto/32/125703_2.png) [@leonardogiroto](https://forum.freecodecamp.org/u/leonardogiroto)\
**Post date:** [October 11, 2019, 3:46pm UTC](https://forum.freecodecamp.org/t/resources-for-a-basic-front-end-to-comunicate-with-api-rest/321070/2 "2019-10-11T15:46:26Z")

</div>

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/](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/](https://alligator.io/react/axios-react/)

Hope it helps! 😉

---

<div class="post-metadata">

**Author:** ![Onpointiscake](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/onpointiscake/32/112084_2.png) [@Onpointiscake](https://forum.freecodecamp.org/u/Onpointiscake)\
**Post date:** [October 11, 2019, 3:50pm UTC](https://forum.freecodecamp.org/t/resources-for-a-basic-front-end-to-comunicate-with-api-rest/321070/3 "2019-10-11T15:50:33Z")

</div>

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’!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:03pm UTC](https://forum.freecodecamp.org/t/resources-for-a-basic-front-end-to-comunicate-with-api-rest/321070/4 "2021-01-16T17:03:11Z")

</div>

Closed on January 16, 2021, 5:03pm UTC


