# 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](https://github.com/thehackerati/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](https://nodejs.org/en/download/package-manager/) 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](https://facebook.github.io/react/index.html)
* [Redux](http://redux.js.org/index.html)
* [Immutable](https://facebook.github.io/immutable-js/)
* [Babel](https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/user-handbook.md)
* [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html)
* [Fullstack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)

## Credits

Lots of code inspiration, including the actual Counter application code, came from [Redux Devtools](https://github.com/gaearon/redux-devtools).\
The TodoMVC code is an example from [Redux](https://github.com/reactjs/redux/tree/master/examples/todomvc), with minor modification for style and to work with the [react-app-template](https://github.com/thehackerati/react-app-template).\
Other inspiration came from [Getting Started with Redux](http://www.jchapron.com/2015/08/14/getting-started-with-redux/), by Jérôme Chapron.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hackerati.gitbook.io/react-tutorial/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.