How to [ Call API ] in React js

 Calling an API in React.js is a common task, and you can achieve this using various methods. Here's a basic example using the `fetch` function, which is built into modern browsers:

Let's assume you want to fetch data from a simple JSON API. Here's a step-by-step guide:

1. Create a new React component:

  ExampleComponent.js

   import React, { useState, useEffect } from 'react';

   const ExampleComponent = () => {

     const [data, setData] = useState(null);

     useEffect(() => {

       // Function to fetch data from the API

       const fetchData = async () => {

         try {

           const response = await fetch('https://api.example.com/data');

           const jsonData = await response.json();

           setData(jsonData);

         } catch (error) {

           console.error('Error fetching data:', error);

         }

       };

       // Call the fetch function

       fetchData();

     }, []); // Empty dependency array ensures the effect runs once after the initial render

     return (

       <div>

         <h1>Data from API:</h1>

         {data ? (

           <pre>{JSON.stringify(data, null, 2)}</pre>

         ) : (

           <p>Loading data...</p>

         )}

       </div>

     );

   };

   export default ExampleComponent;

2. Use the component in your main application file:

   // App.js

   import React from 'react';

   import ExampleComponent from './ExampleComponent';

   const App = () => {

     return (

       <div>

         <h1>My React App</h1>

         <ExampleComponent />

       </div>

     );

   };

   export default App;

  

3. Run your React app:

   Make sure you have the necessary dependencies installed and then run your React app.

   npm install

   npm start

   This assumes you have set up a React project using a tool like Create React App (" npx create-react-app my-react-app").

4. Access-Control-Allow-Origin Issue:

   If you encounter issues related to the Same-Origin Policy, you might need to handle CORS (Cross-Origin Resource Sharing) on the server.

Reference : 

 For development purposes, you can use a browser extension like [CORS Everywhere](https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/) to disable CORS restrictions.

 Replace the API URL in the example with the actual URL of the API you want to call. Additionally, you may want to handle loading and error states more gracefully in a real-world application.

More React JS:- 

How to Create Login Page  in React js  

What is Virtual DOM in React js 

How to create a Table in React js 

How to Upload Image in React js

How to Implement Search Functionality in React js

How to Connect React js with Node js Backend 

How Many Days to Learn React js

How to Use JQuery in React js 

What is Context API in React js 

How to Use Chatgpt API with Python 

How to Call API in React JS