Introduction

In this tutorial we are going to start with a basic React/Redux/Immutable application template and build the canonical TodoMVC application, test-first.

The goal of this tutorial is to give you a deep introduction to the React ecosystem by dissecting a very well known application and walking you through it, one story at a time, one unit test at a time. You will also see what it's like to build an application on the react-app-template boilerplate and practice your test-first development.

As a general approach, we're going to start with working code, TDD some changes, and commit those changes before moving ahead, never straying far from working code.

You should type your code in your favorite editor instead of copying & pasting from the tutorial, if you want to build the 'muscle memory' needed to become productive in this stack.

Prerequisites

You should have node.js installed on your machine and a great attitude :-) Familiarity with shell, git, and an editor of your choice will also help.

While familiarity with JavaScript (ES6) will definitely make this tutorial more immediately understandable, it's not necessary. The tutorial is designed to allow you to build working code simply by following the instructions. You will definitely become more familiar as you go through the tutorial.

Resources

• React

• Redux

• Immutable

• Babel

• Thinking in React

• Fullstack Redux Tutorial

Credits

Lots of code inspiration, including the actual Counter application code, came from Redux Devtools. The TodoMVC code is an example from Redux, with minor modification for style and to work with the react-app-template. Other inspiration came from Getting Started with Redux, by Jérôme Chapron.