Using API's in your React App

Recently, I've really been wanting to build something new and I wanted to play around with some new API's so I thought maybe I'd do a short tutorial on how I accomplished this. Currently, I have nothing so first I will create a new react app by running this in my terminal npx create-react-app [my-awesome-app-name] I also created a GitHub repo and connected the two. Next I am going to find the API I want to use. I want my app to be weather related so I am going to use the the Open Weather Map API.

Next I need to create a file in my react app to hold this data. I am going to create a components folder within the src directory and inside the components folder I am creating a file named Forecast.js Inside this component I am going to fetch to the Open Weather API. To get access to this API I used the Rapid API website. Note: You must subscribe to the API. The Rapid API will help you with your fetch request if needed but here is what mine looks like.

import React, { useState } from 'react';

const Forecast = () => {
    let [responseObj, setResponseObj] = useState({});

    function getForecast() {

    fetch(`https://community-open-weather-map.p.rapidapi.com/weather?q=seattle`, {
        "method": "GET",
        "headers": {
            "x-rapidapi-key": "7b02074c19mshedbbe70e8fd2ae2p163b20jsne2411a44c687",
            "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com"
        }
    })
    .then(response => response.json())
    .then(response => {
        setResponseObj(response)
    });
}

Now that we have our fetch configured we can return the data we'd like. In my fetch I included in the URL the city I want weather data for so now if I navigate to my site and click the "Get Weather" button I will see the details for Seattle.

    return (
        <div>
           <h2>Find Current Weather Conditions</h2>
           <div>
               {JSON.stringify(responseObj)}
           </div>
           <button onClick={getForecast}>Get Forecast</button>
       </div>
    )}

export default Forecast;

Now I am going to create a Conditions/js file in my components folder. This will be a functional components that accepts props, the purpose of this component will be to render data. I'm using something new in this component (well at least new to me, many of you have probably used it) in the div for this component I am using Math.round to get the temperature in the city that I want. Here is a look at the component.

import React from 'react';
const conditions = (props) => {
   return (
       <div>
           {props.responseObj.cod === 200 ?
               <div>
                   <p><strong>{props.responseObj.name}</strong></p>
                   <p>It is currently {Math.round(props.responseObj.main.temp)} degrees out with {props.responseObj.weather[0].description}.</p>
               </div>
           : null
           }
       </div>
   )
}
export default conditions;

So this is how I was able to connect my own react app to the Open Weather Map API. Next week I will continue working with this API and see how we can make our data more dynamic.

Resources

• GitHub Repo
• Rapid API
• AJAX and API's with React

Thanks for reading and stay tuned for part #2!