Learn React.js, Redux & Immutable.js while building a weather app/

...

/

Weather app in React

Weather app in React

Starting to write our first React.js application, we learn how to structure our app and how to fetch data from an API!

We'll cover the following...

Let’s use our knowledge to write an actual app! What we’ll build is a weather application that’ll display the current conditions and a 7 day forecast. Again, here is a live preview of what we’re going to build:

import React from 'react';

class Plot extends React.Component {
  shouldComponentUpdate(nextProps) {
		const xDataChanged = !this.props.xData.equals(nextProps.xData);
		const yDataChanged = !this.props.yData.equals(nextProps.yData);

		return xDataChanged || yDataChanged;
	}
  
  drawPlot = () => {
    Plotly.newPlot('plot', [{
      x: this.props.xData.toJS(),
      y: this.props.yData.toJS(),
      type: this.props.type
    }], {
      margin: {
        t: 0, r: 0, l: 30
      },
      xaxis: {
        gridcolor: 'transparent'
      }
    }, {
      displayModeBar: false
    });
    
    document.getElementById('plot').on(
      'plotly_click', this.props.onPlotClick);
  }
  
  componentDidMount() {
    this.drawPlot();
  }

  componentDidUpdate() {
    this.drawPlot();
  }

  render() {
    console.log('RENDER PLOT');
    return (
      <div id="plot"></div>
    );
  }
}


export default Plot;

Let’s use the knowledge that we gained in the first part of this course and create a barebones Hello World Weather app that displays a heading saying “Weather”!

As we are now going to write a larger App, we are also going to split our code into multiple files. Now index.js will be the entry point and include the logic for rendering the App component. We will start writing our own code in App.js

import React from 'react';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <h1>Weather</h1>
    );
  }
}

export default App;

We’ll need a bit of styling to make sure our app looks good. We’ve prepared ...