npm init

weather-app-react
  |
  |-- dist
  |-- src
  |-- package.json

npm install --save-dev webpack

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

module.exports = {
    entry: [
        "./src/entry.js"
    ],
    output: {
        path: __dirname + '/dist/',
        filename: 'bundle.js'
    }
};

module.exports = {
    entry: [
        "./src/entry.js"
    ],
    output: {
        path: __driname + '/dist/',
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['', '.js', '.jsx']
    }
};

module.exports = {
    entry: [
        "./src/entry.js"
    ],
    output: {
        path: __dirname + "/dist/",
        filename: "bundle.js"
    },
    resolve: {
        modules: ["node_modules", "src"],
        extensions: [".js", ".jsx"]
    },
    module: {
        loaders: [{
            loader: "babel-loader",
            exclude: /node_modules/,
            test: /.jsx?$/,
            query: {
                presets: ["react", "es2015"]
            }
        }]
    }
};

@import url(https://fonts.googleapis.com/css?family=Montserrat:700|Source+Sans+Pro:200|Work+Sans:100,200);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Work Sans', Helvetica, Arial, sans-serif;
    color: #fff;
    text-align: center;
}

body {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#weather-app {
    width: 100vw;
    height: 100vh;
}

.thunderstorm {
    background-image: url(img/thunderstorm.jpg);
}

.drizzle {
    background-image: url(img/drizzle.jpg);
}

.rain {
    background-image: url(img/rain.jpg);
}

.snow {
    background-image: url(img/snow.jpg);
}

.atmosphere {
    background-image: url(img/atmosphere.jpg);
}

.clear {
    background-image: url(img/clear.jpg);
}

.clouds {
    background-image: url(img/clouds.jpg);
}

.extreme {
    background-image: url(img/extreme.jpg);
}

.additional {
    background-image: url(img/other.jpg);
}

.unknown {
    background-image: url(img/other.jpg);
}

.main-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(10, 10, 10, 0.2);
}

.forecast-box {
    align-self: center;
    width: 100%;
    max-width: 400px;
    height: 90vh;
}

.city-name {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.country {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-weight: 200;
}

.temperature {
    margin-top: 15px;
    font-weight: 100;
    letter-spacing: -0.3rem;
    font-size: 5rem;
}

.super-small {
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 0;
}

element in the body, and give it an ID:

    
    Local Weather App | React

    

http://bundle.js <!– It does not exists yet! –> </body> </html>

 

As a final step before we get to the code, let’s download react and react-dom:

npm install --save react-react-dom

 

Notice how we are using save and not save-dev this time.

Building the component

We can finally get started writing some JS(X) now. Create a file inside the src directory and call it WeatherApp.jsx. This file will contain (and export) our application component using class syntax. If you’ve ever used React before, you may know that you can create a new component using this syntax:

var myComponent = React.createClass({
  render: function() {
    return (<p>Hello World!</p>);
  }
});

 

We can also use ES6 classes using the following syntax:

class MyComponent extends React.Component {
  render() {
    return (<p>Hello World</p>);
  }
}

 

We’ll be using class syntax (this is the way React is headed, so we may as well join in!). Thanks to webpack, we can easily import modules into our files. Our component will need to use the React library, this is how we bring it in:

import React from 'react';

 

We now have the React object available in this file. Webpack is smart (and we told it to look into the node_modules folder) so it knows where to look.

We can now go ahead and create our WeatherApp component:

import React from 'react';

class WeatherApp extends React.Component {
  render() {

} }

 

That’s the base for our component. Before we make it more complicated, let’s render our our app and see it working.

Create a new file in the src directory and name it entry.js. This file will simply take our component and render it to the dom. To do this, we use the render method provided by react-dom. We are going to deal with a React component, so we’ll also bring in React:

import React from 'react';
import { render } from 'react-dom';

 

You may have noticed that I’ve put a pair of curly braces around render. This is because react-dom exports several items for us to import, and render is not the default.

On the other hand, React is the default class exported by the react library. This how to export default and non-default classes:

export default class MyClass {}

export class MyOtherClass {}

 

Pretty self-explanatory, right? Let’s not get side-tracked.

We need to also bring in our WeatherApp component into the entry.js file, let’s export it as default (we aren’t going to create any other components in this file, so we’ll make it default) and then import it into entry.js:

import React from 'react';

export default class WeatherApp extends React.Component {
  render() {
    return (

); } }

import React from 'react';
import { render } from 'react-dom';
import WeatherApp from 'WeatherApp'; // We could also use './WeatherApp' or './WeatherApp.jsx' here

 

We haven’t specified a route or extension for the WeatherApp file, since we set that up in webpack.config.js, but we could always do so.

Now that we have all of the pieces, let’s finish up the puzzle and render our component to the page. Remember that empty div we created in the index.html file? Remember that we gave it an ID? Let’s use it:

import React from 'react';
import { render } from 'react-dom';
import WeatherApp from 'WeatherApp';

render(<WeatherApp />, document.getElementById('weather-app'));

 

Here, we are rendering our component into the div passed as the second argument. Now, if you open up the console in the project directory and run the following command:

webpack

A new file, named bundle.js, should appear in the dist directory. If you open up index.html in a web browser, you should see the results!

HAH! I LIED TO YOU! Your app is working, but the stylesheet is setting the text color to be white! So as long as you used the same styles as I did, you won’t see a thing!

No matter, let’s get this thing working. We are gong to start by initializing the state. If you are somewhat familiar with React, you’ve probably used the getInitialState() method to set the state. Using the class syntax, it’s a little different. Let’s set the default values for our component:

import React from 'react';

export default class WeatherApp extends React.Component {

  constructor() {
    super(); // A call to the class we are extending: React.Component
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

); } }

 

Now, let’s change the markup returned by render:

import React from 'react';

export default class WeatherApp extends React.Component {

  constructor() {
    super(); // A call to the class we are extending: React.Component
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

 

If you rebuild bundle.js (by executing the webpack command) and open up index.html, you should see something similar to this:

 

Getting geolocation data

The base is there. Now, we simply need to get this data from somewhere! We’ll need to fetch the weather data using the OpenWeatherMap API. They provide a few different interfaces, I’ll use coordinates myself.

To get these coordinates, we are going to use the browsers geolocation capabilities, and fall back to ipinfo when not available. Let’s create a new method inside our class, we’ll call getLocationCoords. We are going to make use of the ES6 promise object to return the results asynchronously, along with a third party library that will deal with AJAX requests (superagent).

Let’s start by bringing in superagent and superagent-jsonp. The latter will let us request data from a different origin (not our domain) via jsonp. Download the libraries by running:

npm install --save superagent superagent-jsonp

 

And now, import them into WeatherApp.jsx:

import React from 'react';
import superagent from 'superagent';
import jsonp from 'superagent-jsonp';

export default class WeatherApp extends React.Component {

// ....

 

We can now go ahead and create the getLocationCoords method:

import React from 'react';
import superagent from 'superagent';
import jsonp from 'superagent-jsonp';

export default class WeatherApp extends React.Component {

  constructor() {
    super();
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

 

For more details on how promises, arrow functions and the geolocation API works, take a look at the AngularJS tutorial for this app. Now that we are able to retrieve geolocation data from our browser, we need to design a fallback method for browsers without this capability. We’ll do so by using superagent and ipinfo.

import React from 'react';
import superagent from 'superagent';
import jsonp from 'superagent-jsonp';

export default class WeatherApp extends React.Component {

  constructor() {
    super();
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

 

As you can see, I’ve create a function that returns a promise. This promise will be resolved as soon as we get results back from ipinfo. We now need to create a new method that will first get the location coordinates, and then use these to get the weather data from OpenWeatherMap. Our component is starting to become a bit… cluttered. Why don’t we move the getLocationCoords method somewhere else before we proceed any further?

I’m going to create a new file in the src directory and call it api.js, in this file, we’ll define a few functions and export them, so we can use them from our component. Do not forget to import both superagent and superagent-jsonp into this file!

import superagent from 'superagent';
import jsonp from 'superagent-jsonp';

export function getLocationCoords() {
  var deferred = Promise.defer();

  if (window.navigator.geolocation) {
      window.navigator.geolocation.getCurrentPosition(
          (location) => {
              deferred.resolve({
                  lat: location.coords.latitude,
                  lon: location.coords.longitude
              });
          },
          (error) => {
              deferred.reject(error);
          }
      );
  } else {
      superagent.get('http://ipinfo.io/json')
          .use(jsonp) // We use superagent-jsonp
          .end((error, locationData) => {
              if (error) {
                  deferred.reject(error);
              } else {
                  deferred.resolve(locationData);
              }
          });
  }

  return deferred.promise;
}

 

We can now safely remove the entire getLocationCoords method from the WeatherApp component.

Let’s write up the getWeatherData method now. We’ll do so inside api.js:

import superagent from 'superagent';
import jsonp from 'superagent-jsonp';

export function getWeatherData(units, coords) {
  var deferred = Promise.defer();
  var parsedUnits = units === 'C' ? 'metric' : 'imperial';

  superagent.get('http://api.openweathermap.org/data/2.5/weather')
    .query({
      units: parsedUnits,
      lat: coords.lat,
      lon: coords.lon,
      appid: 'YOUR_API_KEY'
    })
    .use(jsonp)
    .end((error, weatherData) => {
      if (error) {
          deferred.reject(error);
      } else {
          deferred.resolve(weatherData);
      }
    });

  return deferred.promise;
}

export function getLocationCoords() {
  // .....
}

 

Now, back to WeatherData.jsx, we must remove the entire getLocationCoords method, and import it (alongside getWeatherData) into the file:

import React from 'react';
import { getLocationCoords, getWeatherData } from 'api';

export default class WeatherApp extends React.Component {

  constructor() {
    super();
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

 

Now that the logic is in place, let’s do the following when our component is initialized:

1. Get the geolocation data.
2. Fetch the weather.
3. Update the state.

We can do so by creating a new method in our component, I’ll call it fetchWeather:

import React from 'react';
import { getLocationCoords, getWeatherData } from 'api';

export default class WeatherApp extends React.Component {

  constructor() {
    super();
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

 

Now, we’ll sexy it up by changing the background image to match that of the current weather. More details on that in the AngularJS tutorial.

I’m going to create a function that returns a class based on the weather ID given. We’ll then set the body element to have that class:

import React from 'react';
import { getLocationCoords, getWeatherData } from 'api';

export default class WeatherApp extends React.Component {

  constructor() {
    super();
    this.state = {
      city: 'Loading...',
      country: 'Loading...',
      currentWeather: 'Loading...',
      currentTemperature: 0,
      currentUnit: 'C',
      availableUnit: 'F'
    }
  }

  render() {
    return (

 

Now, we just need to call this method when the component is initialized or the user wishes to change the units. For that, we’ll first need to change the render method to do this:

render() {
    return (

 

Notice how we use bind in the onClick event to set this to equal the class itself in the function call, and this.state.availableUnit as the first argument. This is important when using class syntax, we’ll also need to do it for the componentDidMount method, which will fetch us the current weather as soon as the component is initialized:

import React from 'react';
import { getLocationCoords, getWeatherData } from 'api';

export default class WeatherApp extends React.Component {
    constructor() {
        super();
        this.state = {
            city: 'Waiting for geolocation data...',
            country: 'Loading...',
            currentWeather: 'Loading...',
            currentTemperature: 0,
            currentUnit: 'C',
            availableUnit: 'F'
        };
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    componentDidMount() {
        this.fetchWeather(this.state.currentUnit);
    }

    fetchWeather(units) {
        getLocationCoords().then(
            (coords) => {
                getWeatherData(units, coords).then(
                    (weatherData) => {
                        this.setState({
                            city: weatherData.body.name,
                            country: weatherData.body.sys.country,
                            currentTemperature: weatherData.body.main.temp,
                            currentWeather: weatherData.body.weather[0].main,
                            currentUnit: units,
                            availableUnit: units === 'C' ? 'F' : 'C'
                        });

                        document.querySelector('body').className = getWeatherClass(weatherData.body.weather[0].id);
                    }, (error) => {
                        // Could not get weather data.
                        console.error(error);
                    });
            }, (error) => {
                // Could not get location data.
                console.error(error);
            }
        );

        
        function getWeatherClass(code) {
            if (code >= 200 && code < 300) {
                return 'thunderstorm';
            } else if (code >= 300 && code < 400) {
                return 'drizzle';
            } else if (code >= 500 && code < 600) {
                return 'rain';
            } else if (code >= 600 && code < 700) {
                return 'snow';
            } else if (code >= 700 && code < 800) {
                return 'atmosphere';
            } else if (code  === 800) {
                return 'clear';
            } else if (code >= 801 && code < 900) {
                return 'clouds';
            } else if (code >= 900 && code < 907) {
                return 'extreme';
            } else if (code >= 907 && code < 1000) {
                return 'additional';
            } else {
                return 'unknown';
            }
        }
    }


    render() {
        return (

 

As you can see, we first bind componentDidMount to use the current class as this and then simply call fetchWeather in it. The weather app is not complete! Run webpack in your console again and server your index.html! (Note that geolocation may not work if you don’t use a proper http server and just open up index.html in a browser)

This app could still use improvement, but you can get a broad idea of what React and webpack can achieve together, it may seem overkill for a simple app such as this one, but will prove invaluable on larger projects!