API Call in ReactJS

When building a web application with ReactJS, you often need to make API calls to fetch data from a server. This can be done using the fetch function or by using libraries like axios.

Here’s an example of making an API call in ReactJS using the fetch function:

    
      {/* Make API call using fetch */}
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          // Do something with the data
        })
        .catch(error => {
          // Handle any errors
        });
    
  

Alternatively, you can use a library like axios to make the API call in ReactJS:

    
      {/* Make API call using axios */}
      axios.get('https://api.example.com/data')
        .then(response => {
          // Handle the response
        })
        .catch(error => {
          // Handle any errors
        });
    
  

Once you have fetched the data from the API, you can then use it to update the state of your React components or display it in your application.

Here’s an example of updating the state with the fetched data:

    
      // Define initial state
      const [data, setData] = useState(null);

      // Make API call and update state
      useEffect(() => {
        fetch('https://api.example.com/data')
          .then(response => response.json())
          .then(data => {
            setData(data);
          })
          .catch(error => {
            // Handle any errors
          });
      }, []);
    
  

That’s it! You’ve now learned how to make API calls in ReactJS. Remember to handle errors and update the state of your components appropriately based on the fetched data.