Weather Application using React Hooks and open weather map API

Samuel Airehrour — Mon, 20 Jan 2020 13:48:36 +0000

In an attempt to understand how to use external API's as well as react hooks for state management, I built a simple weather application using react hooks and the open weather map API (https://openweathermap.org/api), it was a really educative experience.
Here's how i built the application:
Due to the simplicity of the application we would not bother ourselves with the styling of the application only the functionality.
First we declare the hooks we want to use for the state:

After which we create a getWeather function which set's the state of the parameters I wanted to get from the API. Here's the code which is embedded in the App.js:
.
After setting the state we now attempt to pass them down as props to our Weather and Form component:
.
Going inside the Weather component, we have our passed down props to the Weather Component which we use to dictate what/how the data would be displayed on the web page, this component looks like this:
.
With these we're almost done with our application, remaining our Form component and what it looks like on the web.
The very simple Form component looks something of the nature:
.
And finally we get to see what our app looks like after we've completed the project.
.
The styling of this project can be done in any form or style as the reader wishes. My CSS is not the best, so i just did a simple styling for the application.
This is what the folder structure looks like for anyone interested.
.
Here's a link to the project on github: https://github.com/sammieeblaq/weather-app
This is my first ever blog post, so please like and leave a comment for feedback. Thank you

DEV Community: Samuel Airehrour

Weather Application using React Hooks and open weather map API