Basic React Application With Axios For Fetching Api Data
👤 By edwin | 📆
This tutorial will help you run a very basic React application with Axios to fetch API data from dummyjson.com - just follow these steps:
- Clone my plain basic React App
$ git clone https://github.com/edwinaquino/Simple-Plain-React-App-With-Unnecessary-Files.git
- cd into the new directory
$ cd Simple-Plain-React-App-With-Unnecessary-Files
- Install packages:
$ npm install
- Add the following code to src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [products, setProducts] = useState([])
const API_URL = "https://dummyjson.com/products"
useEffect(() => {
axios.get(API_URL)
.then(response => {
setProducts(response.data.products);
})
.catch((error) => {
console.log('error=', error);
})
}, [])
return (
<div className="App">
<p>API Data from: <b>{API_URL}</b></p>
<ul>
{products.map((product, index) => {
return <li key={index}>{product.title} (${product.price})</li>
})}
</ul>
</div>
);
}
export default App;
Found in: F:\apachefriends\xampp\htdocs\MONGO_DB\TUTORIAL\examples\Complete Axios in React JS\api-axios