In the previous lesson, we built a todo list application using React. This project gave a solid overview of key concepts in React such as JSX, components, state management, props, and event handlers, provided hands-on experience with how these concepts work together to create dynamic, interactive user interfaces.
Now that we've covered the basics, let's take one step further and create a weather app. Through this project, we will explore how to create a more dynamic application by working with APIs in React. Here is a demonstration:
Open demo in new tabGetting OpenWeatherMap API
To begin with, make sure to get a free API key from OpenWeatherMap. This is a website that provides global weather data via API, including current weather data, forecasts, and historical weather data.
Create an account and navigate to https://home.openweathermap.org/api_keys. Provide a name for the API key, and click Generate. A new API key should be generated.
Remember to save the API key, as we are going to use it later.
Go through the documentation for the OpenWeatherMap API, and notice that it requires us to provide the longitude and latitude in order to retrieve the weather. However, thinking from the user's perspective, it is unlikely for them to know the coordinate of the location they are searching for.
As a result, out weather app should allow the user to provide the name of the city, and in the background, the app needs to find out the coordinate of that city, and use that coordinate to retrieve the weather.