Creating a weather app with Reactjs - Part 3

#react #hooks #webdev #fetch

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:

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.

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

CurrentData.js, inside the /components dir

CurrentData.module.css, inside the /styles dir

App.module.css, inside the /styles dir

Our webpage in its current state!

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!