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

## Why React.js?

React, to quote Facebook themselves, was built to solve one problem: "building large applications with data that changes over time". (that's why Instagram and Facebook are built with it)

With React, it's simple to express how your app should look at any given point in time. It will figure out which parts need to update when the data changes for you, and will only render those.

It also popularised building apps with encapsulated, reusable and composable components. It's a different way of thinking and of going about building webapps, but once you're used to it you can never go back!

## What we'll build

This is the app we'll be building in this tutorial series (yes, this is a live example! Click around and explore):

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #222;
}

h1 {
  text-align: center;
}

form {
  text-align: center;
}

input {
  border: none;
  border-bottom: 1px dotted black;
  margin-left: 0.5em;
  font-size: 1em;
  outline: none;
}

.wrapper {
  max-width: 680px;
  margin: 0 auto;
}

.temp-wrapper {
  text-align: center;
  position: relative;
}

.temp {
  font-size: 64px;
}

.temp-symbol {
  position: absolute;
  top: 13px;
  margin-left: 4px;
}

.temp-date {
  position: absolute;
  bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.5);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="//fb.me/react-with-addons-0.14.3.js"></script>
  <script src="//fb.me/react-dom-0.14.3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>
  <script src="https://cdn.plot.ly/plotly-1.8.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

codemirror

babel

In this first chapter of the tutorial we'll go through the React basics, before starting to build the above app in chapter two. If you feel comfortable with React and JSX feel free to [skip ahead](/collection/page/5642398931615744/5741031244955648/5767917874446336/) but **I highly recommend going through this chapter to make sure you know React**!

# Why React.js?

React, to quote Facebook themselves, was built to solve one problem: "building large applications with data that changes over time". (that's why Instagram and Facebook are built with it)

With React, it's simple to express how your app should look at any given point in time. It will figure out which parts need to update when the data changes for you, and will only render those.

It also popularised building apps with encapsulated, reusable and composable components. It's a different way of thinking and of going about building webapps, but once you're used to it you can never go back!

# What we'll build

This is the app we'll be building in this tutorial series (yes, this is a live example! Click around and explore):

Learn the basics of React, one of the most popular JavaScript frameworks out there. It's used by companies large and small including Instagram, Netflix, Airbnb and many more!

1. React basics

2. Your first React app

3. Creating a forecast graph

4. State Management

5. ImmutableJS

6. Testing

Appendix

Introduction to React.js

Why React.js?

What we’ll build