#11 React JS Tutorial 2024 | API in React Js | Hindi

In this tutorial, we will learn about using APIs in React Js. APIs, or Application Programming Interfaces, allow our React application to communicate with external servers to fetch data or perform actions.

Step 1: Setting up the React Js project

If you haven’t already set up a React Js project, you can do so by using create-react-app. Simply run the following command in your terminal:

npx create-react-app my-app

Replace my-app with the name of your project. Once the project is set up, navigate to the project directory and start the development server using:

cd my-app
npm start

Step 2: Fetching data from an API

To fetch data from an API in React Js, we can use the built-in fetch function or third-party libraries like Axios. Here’s an example using fetch:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))

This code snippet fetches data from the API at https://api.example.com/data and logs the response to the console. You can then use this data in your React components as needed.

Step 3: Displaying API data in React components

Once you have fetched data from an API, you can display it in your React components using state and props. Here’s an example:

class MyComponent extends React.Component {
state = {
data: []
}

componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}

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

In this example, we define a class component called MyComponent that fetches data from the API in the componentDidMount lifecycle method. The fetched data is stored in the component’s state and then displayed in a list in the render method.

That’s it! You’ve successfully learned how to use APIs in React Js. Experiment with different APIs and data manipulation techniques to further enhance your React skills.