Gain insights into building a weather app with React, Redux, Immutable.js, and Jest. Learn about their problems and solutions, enhancing your app's performance and testing capabilities.

py.tar.gz

js_server

I'm Max Stoiber (@mxstbr) - the creator of react-boilerplate, one of the most popular react starter kits (10K+ stars on github).

I'll teach you how to build a real-world application using React, Redux and Immutable.js. We will use interactive playgrounds to create our app from scratch (no setup required).

The course can be divided into 4 logical parts: 

1. React: Understand what is React and what problem it solves. We'll build our first weather app using just React.
2. Redux: Identify potential issues in our React app and learn how Redux & Redux-Thunk can solve those issues. 
3. Immutable.js: Learn Immutable.js and how it can help in making our Redux apps performant. 
4. Jest: Lastly, we will learn how to test our React/Redux app using Jest.

If you are going to build a production app, chances are that you are going to use all of the above technologies so let's get started. 

* Understanding of Javascript is required. 
** Understanding of ES6 (let/const, arrow functions etc.) would be beneficial.

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

Often, in real world applications, there's some third party library that needs to be used, or maybe some legacy code that needs to be bridged. To showcase how one would go about doing that, we'll be using <a href="http://plot.ly" target="_blank">Plotly</a> to draw a beautiful temperature forecast graph!

# Plotly
We'll explore the Plotly.js API and draw a scatter chart.

To use `plotly.js`, we need to add it to our application. Copy and paste the following line into your HTML:

```HTML
<script src="https://cdn.plot.ly/plotly-1.8.0.min.js"></script>
```

Including this script gives us access to the `Plotly` variable in our code. Using `Plotly.newPlot`, we can easily create graphs to showcase the weather data:

```JS
Plotly.newPlot();
```

Let's look at the `newPlot` function in a little bit more detail:

1. The first argument is the `id` of the DOM element we want to render our plot into.
2. The second argument is an array of objects with a few properties for our plot, with `x`, `y` and `type` being the most relevant for us.

Plotly.js makes it easy to create a wide variety of plots, the one we care about the most at the moment is a `scatter` plot. See the documentation <a href="https://plot.ly/javascript/line-and-scatter/" target="_blank">here</a> for some examples.

This is what our `Plotly.newPlot` call will look like:

```JS
Plotly.newPlot('someDOMElementId', [{
  x: ourXAxisData,
  y: ourYAxisData,
  type: 'scatter'
}], {
  margin: {
    t: 0, r: 0, l: 30
  },
  xaxis: {
    gridcolor: 'transparent'
  }
}, {
  displayModeBar: false
});
```

As you can see, we also pass in some styling information as the third argument (we specify a few margins and hide the xaxis grid lines), and some options as the fourth argument. (we hide the mode bar).

_Plotly.js has tons of options, I encourage you to check out the <a target="_blank" href="https://plot.ly/javascript/">excellent documentation</a> and play around with a few of them!_

For getting our feet wet, we'll draw a chart of 9 numbers [-4, 4], their squares and their cubes. Here's the data that we will use for our chart:


`x-axis`: [-4, -3, -2, -1, 0, 1, 2, 3, 4] 

`y-axis-1`: [16, 9, 4, 1, 0, 1, 4, 9, 16];

`y-axis-2`: [-64, -27, -8, -1, 0, 1, 8,27, 64];


In this lesson, we'll learn the basics of drawing charts with Plotly.js

1. React basics

2. Your first React app

3. Creating a forecast graph

4. State Management

5. ImmutableJS

6. Testing

Appendix

Getting started with Plotly.js