react call backend api
reactTo call a backend API from a React app, you can use the fetch
function or a library like axios.
Here is an example of how to call a backend API using the fetch
function:
import React, {useState, useEffect} from 'react';
const App = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://my-api.com/endpoint');
const json = await response.json();
setData(json);
};
fetchData();
}, []);
return (
<div>
{data ? (
<div>
<p>{data.id}</p>
<p>{data.name}</p>
</div>
) : (
'Loading...'
)}
</div>
);
};
export default App;
In this example, we use the useEffect
hook to fetch data from the API when the component mounts. The fetch
function
returns a promise, which we can await to get the API response. We then use the json
method of the response object to
parse the response into JSON format.
Here is an example of how to call a backend API using axios:
import React, {useState, useEffect} from 'react';
import axios from 'axios';
const App = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await axios.get('https://my-api.com/endpoint');
setData(response.data);
};
fetchData();
}, []);
return (
<div>
{data ? (
<div>
<p>{data.id}</p>
<p>{data.name}</p>
</div>
) : (
'Loading...'
)}
</div>
);
};
export default App;
In this example, we use the axios.get
method to make a GET request to the API, and we use the response.data
property
to
access the response data.
It is important to note that you may need to handle errors and deal with issues like CORS (Cross-Origin Resource Sharing) when calling a backend API from a React app. You may also want to consider adding authentication and authorization to your API calls.
For more information on calling APIs in React, you can refer to the React documentation
at https://reactjs.org/docs/faq-ajax.html
.
Other Article on Tag react
- - A cross-origin error was thrown. React doesn't have access to the actual error object in
- - react add bootstrap
- - react add semantic-ui
- - react call backend api
- - react navbar code example
- - react register and login page example
- - ReactJS Animation
- - ReactJS Building and Deployment
- - ReactJS call api backend
- - ReactJS Component