Unveiling JavaScript: Navigating APIs and Fetch API in React

Hello! Today, we're going to uncover how web apps fetch data using APIs and the Fetch API in React. APIs retrieve data from systems, much like asking a waiter for takeout, while the Fetch API, a promise-based mechanism, initiates network requests, similar to dialing for a delivery.

In essence, APIs act as messengers. They transport your request to a system and deliver the data you have ordered, much like how ordering a pizza over the phone works.

# Requesting weather data from the WeatherAPI - it's as simple as making a call!
fetch('https://api.weatherapi.com/v1/current.json?q=Rome')

The Fetch API requests data and then processes it when it arrives, similar to awaiting your pizza delivery.

fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
  .then(response => response.json())
  .then(data => console.log(data));

This process requests data from an API and converts it into a usable format — JSON.

Now, let's see how React, which uses components to divide the UI, utilizes the Fetch API. In functional components, the useState hook manages the data, often displaying a "Loading…" message while the data is being fetched.

function WeatherComponent() {
  const [loading, setLoading] = useState(true);
  const [weatherData, setWeatherData] = useState(null);
  useEffect(() => {
    fetch('https://api.weatherapi.com/v1/current.json?q=Rome')
      .then(response => response.json())
      .then(data => {
        setWeatherData(data);
        setLoading(false);
      });
  }, [])
  if (loading) {
    return <p>Loading...</p>;
  }
  return (<div>
      <h1>Weather in {weatherData.location.name}</h1>
      <p>{weatherData.current.condition.text}</p>
    </div>
  )
}
export default WeatherComponent;

The useEffect hook performs operations, such as fetching data, which cannot be done during rendering.

Once the data has been fetched, it is stored in the weatherData state variable. A "Loading…" message is displayed until the data has been fetched; afterward, the data is shown. This check ensures that the data is displayed only once it has been fetched and is ready to be viewed.