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

To create a `ReactComponent` we write a function that returns a `ReactElement`:

```js
var Wrapper = function(props) {
  return React.createElement('div', { className: 'wrapper' });
}
```

We can then use these components like any DOM Node by passing it into a `createElement` call:

```js
React.createElement(Wrapper);
// -> <div class="wrapper"></div>
```

Our wrapper component isn't very useful so far, since it doesn't render its children:

```js
React.createElement(Wrapper, {}, 'Hello World!');
// -> <div class="wrapper"></div> (😢 no "Hello World" visible!)
```

This is because our component function gets passed the properties (`props`). In the last example we didn't use the properties we got passed from the `createElement(Wrapper)` call at all!

Let's render the children that our `Wrapper` gets passed:

```js
var Wrapper = function(props) {
  // Render the children we get passed from the createElement(Wrapper) call
  return React.createElement('div', { className: 'wrapper' }, props.children);
}
```

Now the above example works perfectly:

```js
React.createElement(Wrapper, {}, 'Hello World!');
// -> <div class="wrapper">Hello World</div>
```

Let's try rendering our heading inside our `Wrapper` component:

To create a `ReactComponent` we write a function that returns a `ReactElement`:

```js
var Wrapper = function(props) {
  return React.createElement('div', { className: 'wrapper' });
}
```

We can then use these components like any DOM Node by passing it into a `createElement` call:

```js
React.createElement(Wrapper);
// -> <div></div>
```

Our wrapper component isn't very useful so far, since it doesn't render its children:

```js
React.createElement(Wrapper, {}, 'Hello World!');
// -> <div></div> (😢 no "Hello World" visible!)
```

This is because our component function gets passed the properties (`props`). In the last example we didn't use the properties we got passed from the `createElement(Wrapper)` call at all!

Let's render the children that our `Wrapper` gets passed:

```js
var Wrapper = function(props) {
  // Render the children we get passed from the createElement(Wrapper) call
  return React.createElement('div', { className: 'wrapper' }, props.children);
}
```

Now the above example works perfectly:

```js
React.createElement(Wrapper, {}, 'Hello World!');
// -> <div>Hello World</div>
```

Let's try rendering our heading inside our `Wrapper` component:

What are components in React and how can we create them?

1. React basics

2. Your first React app

3. Creating a forecast graph

4. State Management

5. ImmutableJS

6. Testing

Appendix

React components