DEV Community

loading...
Cover image for Creating a weather app with Reactjs - Part 3

Creating a weather app with Reactjs - Part 3

rafavls profile image Rafael ・3 min read

Using our data

Alright! Now we have visible data that we can work with. If we go to our DevTools => Network tab, and we look for our fetch calls (one starts with "onecall" and the other one with "json?latlng", we can see what the response looks like. That's our data!
For Google Map's Geolocation API, we can see that they give us a lot of information. Which is good, but we don't really need all of that for this app. So, since I only really care about the city's name and the state's "short name" (i.e. California = CA), we can refactor our fetchData function's final lines like so:

fetchData function refactored to filter Google Map's Geolocation Response

Displaying our data

Great! Now our data is more managable. Now, let's create a simple section that displays current temperature, humidity, wind speed, city name and the state's short name.

JSX code for displaying the response data

Awesome! Now we can see the info on the page. We have to add a couple checks before trying to display the info, since it takes a bit for our app to get the data responses. This way, we won't get errors when we first render our app. These checks will also account for the case in which the user denies location access. So, whatever we put in that last part of the tertiary statement will display in case of any errors.

Great, we can see our data, but it's kind of ugly, isn't it? Let's fix that.

Styling using CSS modules

To use CSS modules in React, we'll create a new directory in our /src folder called /styles. Here, we'll have our stylesheets for all our React components (granted, some people prefer to have their css modules in the same directory as the component, but for this case I think this works fine). Let's also create a folder called /components, which we'll populate soon enough.

Before we start using css modules, let's convert our displayed data into it's own component, this will keep our App.js file cleaner and our files easier to handle. So, inside of /components, create a file named "CurrentData.js". Inside our /styles directory, create two css module files: one for App.js, and another for CurrentData.js. The App.module.css file will be our global stylesheet, where we'll reset the margins, define a font for the entire app, define css variables, etc. This is what those files contain.

App.js return statement
App.js return statement code

CurrentData.js, inside the /components dir
CurrentData.js code, displaying weather data

CurrentData.module.css, inside the /styles dir
The stylesheet for the CurrentData.js file

App.module.css, inside the /styles dir
App.module.css stylesheet

Our webpage in its current state!
The current look of the webpage

Now we're coding! Don't worry, it looks like a lot but it really isn't. Also, I know the app isn't the most beautifully designed out there, but it serves its teaching purposes.

So, we separated the extense code into the CurrentData component (I called it that because we'll implement daily forecast later). In this component we make use of the data that we retrieved before, and we display it to the user. The unixToDate() function lets us convert the unix timestamp that we get from the One Call API into readable human time format. And that's it! Our app works! I'll be adding a couple more components over the next posts in the series, but this is the skeleton of it. You've made a weather app that works!

Discussion (4)

pic
Editor guide
Collapse
heberbr profile image
heberbr

Thanks a lot!

Collapse
rafavls profile image
Rafael Author

No problem! I'll be continuing the series soon, I'm taking the weekend for myself rn :)

Collapse
artembilas profile image
ArtemBilas

Thanks, everything was cool, simple and useful in my opinion.)

Collapse
rafavls profile image
Rafael Author

Thank you! Appreciate the feedback.