Create Weather Apps using ReactJS and Weather API

Well, after having played around with React JS for a while, I decided to write this post. I’m not going to go into details of how to install react because I’m sure that I’m not the first one to cover it but I’ve just put out some commands I used to make the app/component.

Using terminal I made a directory for the app and created a new React app with the following command.

arun@computer:smallAps$ create-react-app small-apps

creating a react-js application

And now the terminal says that I have indeed a ReactJS application that works.

list of commands that just makes life fantastic

I use VS Code as my editor because I’m comfortable using it. Specific to React JS, I use an extension called ‘ES7 react/redux/react-native snippets’ by dsznajder

ES7 React JS Snippet by dsznajder

Ok now that’s done let’s cd into the small-apps directory and get started. Using code I opened the directory into it and went straight to the src folder and into the App.jsx file

First look when you open up your app.js file

Now I was going to be working with JSX, so, I made up a new directory in the src folder called ‘components’ and then made a file called ‘Weather.jsx’ in it along with ‘Weather.css’ for all the basic CSS styling I wanted to do for the app.

directory tree or structure for the app

If you are following this post to make your own weather app then just use this structure and ensure all further components you add go into the components folder and import them to App.jsx for using them.

I then imported the app into App.js and made the following changes on both files just to see if things are working as planned.

In Weather.jsx, I used a shortcut to easily get a class structure in without having to memorize all the basic code. Simply type in rcc and the ES7 extension does all the magic of filling in the code. I then used the default <div></div> in the render method and put an id called ‘app’ to it and a <p>tag just to display some text like.

<p> Hello World! this is the weather app</p>

The image has import ‘./Weather.css’ missing, Sorry about that.

Also, I want to import the CSS file where I just made simple changes to the div that made it to look yellow and all text to look brown.

Simple app design that I’m sure would look crazy :D

Now going to the App.js file, I imported an instance of the Weather.jsx class called Weather import Weather from ‘./components/Weather.jsx' which I’ll directly use as a tag in the render method of App.js like so <Weather /> ,also I cleared out everything in the render method leaving behind only an opening and closing <div></div> behind between which I called the <Weather />class.

basic changes made in App.js to see if everything renders out as expected.

Now that I made all the basic changes that I needed to see if all the files are running, I went over to the terminal and used the command npm start to open the file in my favorite browser (Chrome obviously! even if it uses all the RAM I have)

First call of the start command compiles with no error

Well, I managed to compile and ran the app without any errors, which I always love. Almost immediately, chrome popped up displaying the app. It’s not the most breathtakingly beautiful and the most sophisticated weather app in the world but it just shows that all the components are indeed working properly.

First light

After this, I worked on the CSS and other HTML features that would eventually make this look somewhat like a component that one would want to use somewhere so, I started with all the things that I want to display first, which included, Temperature in Celsius, an Icon displaying current conditions, humidity, City and Country .

Heading over to Gravit Designer and I came up with a mock-image of what I had in mind, This makes it easier for me to work on HTLM. However, the challenge for me was to get the custom weather icons that corresponded to the weather conditions that I will get from the API, luckily Gravit Designer has all the images that I needed the way I wanted it. But I might use that for a future component and post.

Mock design of the app

Split of the design

Now that I had the design in mind, I went over to the Weather.jsx file to make this design meaningful in HTML. So I made a div with dimensions of 180px X 180px, then I gave it a background color of #E8EDF0. Then, I split the div as 3 rows, one for the image, one for the temperature label and the last div was split into two columns, one holding the humidity labels and the other holding both the City and the Country labels.

First off, I installed couple of dependencies to make this process smoother so (if you’re not using VS Code, open the terminal at your project folder) I opened the terminal in the editor and then used the following commands.

$ npm install --save react react-dom
$ npm install --save react-bootstrap

Then when I saw that the dependencies update in the package.json file automatically, I was satisfied that it had been properly installed and ready to use in the project.

dependencies final list

with that installed, now I’m heading back to the Weather.jsx file to give proper bootstrap class names to all those divs so that it looks all aligned and pretty. So, first things first, I imported Grid and Row from react-bootstrap like this

import {Grid, Row} from 'react-bootstrap';

with a little bit of bootstrap and CSS I was finally able to get to the point where it looked somewhat like the mock image I made earlier. As you can see I kind of made the last row into two individual rows one on top of the other, which, I thought looks better. So here is what it looks like, for now.

First look at what the app might look like

I put all the HTML code in the render method, as it’s supposed to be in a simple component like this one.

Weather.jsx file with the initial bootstrap import and simple code

I put dummy values into the label fields and a simple image I imported earlier into the <img/> tag for just seeing how it looked overall. I put all the CSS in another file called Weather.css. Leaving further design tweaks for later, I went over to the functionality bit.

I used the weather.com API to fetch all the data I required. For that to happen, I registered myself in the site, which gave me an API Key (which is a unique set of alphabets and numbers used to identify the developer using it, head over to https://www.wunderground.com/ for all the fun).

Now before I shot off the request, I stored my API Key in a constant (value hidden for obvious reasons)and then created a constructor in the class with a state that stored all the data that I needed to fetch from the server.

The idea behind the move was that, when I did eventually get all the data from the server, I would update parts of the received data as state values in the class, so that, I can reuse it elsewhere, like in a render method etc.

However, I had to get the location of the user first, before I could serve him with the weather, so I used HTML5's basic geo-location feature to fetch the data, while this Component is assured to mount. So, in react’s life-cycle method called componentWillMount() I made a call to a new function called getLocation().

componentWillMount and getLocation methods

I saved the URL to call the API in a constant and then made another method called setWeather() that requested the server and fetched all the required data using the location that I just got. Then, I updated the state of the class with the values.

getting the location and state update

Now, using fetch, I retrieved the data, this was then converted to JSON and then the parsed data was used to set the state of the class.

fetch data and update state

To update the actual page, now that I had updated the state, I removed all the dummy values I had put in the render method, earlier, as placeholders and replaced them with the state values.

replacing dummy values with state values

Finally, I managed to get the result that I was waiting for, a decent looking weather app or a small component, that I might want to reuse someday for a larger app.

component running in chrome

Another look, and I guess it just got a little colder.

final result

There can be several improvements made to this, for example, using custom images for weather icons instead of stock images from the API, adding more features etc but for the moment, I decided to complete this post with the present result and then improve upon it for a future post.

I headed over to the terminal of VS Code again and updated my github repository for this component/ app, you can head over there to see all the details and even the CSS file that I did not show yet (because it was quite long for a post like this).

Hope that this post was worth the time you spent reading. This was my first ever post on Medium and I intend to post the rest here on Blogger, hope to post more soon.