Fetch and display data from API in React js

Fetching and displaying data from an API in a React.js application involves several steps. Here’s a general outline of how you can achieve this:

Thank you for reading this post, don't forget to subscribe!

1. **Create a React Project:**
If you don’t have a React project set up already, you can create one using tools like `create-react-app`:

“`
npx create-react-app api-demo
cd api-demo
“`

2. **Fetch Data from API:**
In your React component, you’ll use the `fetch` or `axios` library to make an API request and retrieve the data. Here’s an example using the `fetch` API:

“`
import React, { useState, useEffect } from ‘react’;

function App() {
const [data, setData] = useState([]);

useEffect(() => {
fetch(‘https://api.example.com/data’) // Replace with your API endpoint
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error(‘Error fetching data:’, error));
}, []);

return (
<div>
<h1>API Data</h1>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}

export default App;
“`

3. **Display Data:**
In the example above, we’re fetching data from an API and storing it in the `data` state using the `useState` hook. We’re also using the `useEffect` hook to perform the API request when the component mounts.

The fetched data is then displayed by mapping over the `data` array and rendering each item in a list.

4. **Styling and UI:**
You can apply CSS styles to your components to make them visually appealing. You can also use component libraries like Material-UI or Bootstrap for ready-made UI components.

5. **Error Handling:**
It’s important to handle errors gracefully. In the example above, we’re catching errors that might occur during the API request and logging them to the console.

Remember to replace `’https://api.example.com/data’` with the actual URL of the API endpoint you want to fetch data from.

For more details:
https://www.meraheaven.com/how-to-set-automatically-call-npm-start-in-nodejs/