This repository contains a simple example of how to fetch data using React and the axios library from the "fakestoreapi". The provided code demonstrates how to retrieve product information from the API and display it in a React component. This can serve as a starting point for more complex data fetching scenarios in your React applications.
The code provided in this repository fetches data from the "fakestoreapi" using an asynchronous function called fetchData. The data fetching is triggered when the component mounts using the useEffect hook. Let's break down the key parts of the code:
-
fetchDataFunction:The
fetchDatafunction is defined as an asynchronous function. It uses theaxioslibrary to make a GET request to the "https://fakestoreapi.com/products?limit=4" endpoint, which retrieves information about up to four products from the fake store. Upon a successful response, the fetched data is set using thesetDatafunction, and the fetched data is logged to the console. If an error occurs during the request, it's caught using atry...catchblock, and the error is logged to the console. -
useEffectHook:The
useEffecthook is used to manage the data fetching process. It takes two arguments: a function to execute and an array of dependencies. In this example, the function passed touseEffectisfetchData, which is responsible for fetching data from the API. The second argument is an empty array ([]), which indicates that the effect should only run once, when the component initially mounts.
To run this example on your local machine, follow these steps:
- Clone this repository:
git clone https://github.com/your-username/react-data-fetching-example.git - Navigate to the project directory:
cd react-data-fetching-example - Install dependencies:
npm install - Start the development server:
npm start - Open your web browser and visit http://localhost:3000 to see the fetched data displayed in the React app.
Feel free to customize and extend this example to suit your specific data fetching needs in your React applications.
- React: https://reactjs.org/
- Axios: https://axios-http.com/
This example uses the "fakestoreapi" for demonstration purposes. Make sure to replace the API endpoint with your desired API when working on real projects.