REACT: Do a simple HTTP GET

Return to site

REACT: Do a simple HTTP GET

=> How to call 📞 a backend to read data via REST API in React

· react

So it was time for me to learn how to interact 🔃 with backend with a react App.

And I used Axios to do so.

Axios is a simple promise-based HTTP client for the browser and node.js.

Axios provides a simple-to-use 😄 library in a small package with a very extensible interface.

So I coded 👨‍💻 a simple react app which:

->fetches 🐶 with axios a data object in the JSON format

function fetchActivityHandler() {
 fetch('https://www.boredapi.com/api/activity').then(response =>
  response.json()).then(data => {
  console.log(data);
  setActivity(data);
  });
 }

 ->displays 📺 its fields in the middle of the screen

return (
 <div className="App">
  <header className="App-header">
  <p><h3><b>Activity</b>: {activity.activity}</h3><br /></p>
  <p><b>🏷️ Type</b>: {activity.type}<br /></p>
  <p><b>👯 Participants</b>: {activity.participants}<br /></p>
  <p><b>💰 Price</b>: {activity.price}<br /></p>
  <p><b>🌐 Link</b>: {activity.link}<br /></p>
  <p><b>🔑 Key</b>: {activity.key}<br /></p>
  <p><b>♿ Accessibility</b>: {activity.accessibility}<br /></p>
  </header>
 </div>
 );

 Here is the code 👇 if you wanna play with it, just download it⬇️, and run it from its directory with 'npm start'🚀

Github code sharing link

 #react #axios #callBackend #get