# React Application Template

The React application template repository is meant to be used as a template for building React/Redux/Immutable applications.

## What is React?

> React is a JavaScript library for building user interfaces.
>
> Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
>
> React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native.
>
> React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
>
> \-- [React](https://facebook.github.io/react/index.html)

## What is Redux?

> Redux is a predictable state container for JavaScript applications.
>
> It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
>
> You can use Redux together with React, or with any other view library.
>
> It is tiny (2kB, including dependencies).
>
> \-- [Redux Docs](http://redux.js.org/index.html)

## What is Immutable

> Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.
>
> Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.
>
> These data structures are highly efficient on modern JavaScript VMs by using structural sharing via hash maps tries and vector tries as popularized by Clojure and Scala, minimizing the need to copy or cache data.
>
> Immutable also provides a lazy Seq, allowing efficient chaining of collection methods like map and filter without creating intermediate representations. Create some Seq with Range and Repeat.
>
> \-- [Immutable Docs](https://facebook.github.io/immutable-js/)

## Setup the Application Template

To get started, clone the repository and create a branch for your application.

```
$ git clone git@github.com:thehackerati/react-app-template.git tdd_react_app
$ cd tdd_react_app
$ git checkout -b tdd_react_app
```

The master branch includes a version of the canonical Counter application, implemented using React, Redux and Immutable. By the time you are done with the tutorial, you will have replaced the Counter application with the TodoMVC application.

> *There is a complete implementation of the TodoMVC application in the 'todomvc' branch for your reference.*
>
> ```
> $ git fetch origin todomvc:todomvc
> $ git checkout todomvc
> ```

You should have a project that looks like this:

```bash
├── src/
│   ├── containers/                  # Root container
│   │   ├── DevTools.js
│   │   ├── Root.dev.js
│   │   ├── Root.js
│   │   └── Root.prod.js
│   ├── counter/                     # Placeholder application, implements simple immutable counter
│   │   └──...
│   ├── store/                       # Single store
│   │   ├── configureStore.dev.js
│   │   ├── configureStore.js
│   │   └── configureStore.prod.js
│   ├── PropTypes.js                 # Custom PropType checker for the redux store
│   ├── index.js                     # Start the application by rendering the AppContainer
│   └── reducers.js                  # Root reducer, combines application reducers
├── tests/
│   ├── counter/                     # Tests for the placeholder application
│   │   └──...
│   └── test_helper.js               # Shared test utils
├── .babelrc                         # Babel local configuration file
├── .eslintignore                    # ESLint ignore file
├── .eslintrc                        # ESLint local configuration file
├── .gitignore                       # git ignore file
├── .travis.yml                      # Travis CI configuration file
├── index.html                       # Single page for the application
├── LICENSE                          # The MIT License
├── package.json                     # Metadata to identify the project/handle the project's dependencies
├── README.md                        # git ReadMe file
├── server.js                        # Express server
├── webpack.config.dev.js            # Webpack config for development
└── webpack.config.prod.js           # Webpack config for production
```

## Test

```bash
$ npm install                        # installs all of the required packages into node_modules directory
$ npm test                           # runs the existing tests
$ NODE_ENV='development' npm start   # starts the application with the 'development' configurations
```

With the last command run, you should have the application running. Open <http://localhost:4000> in your browser.\
You should see something like this:\
![](/files/-LPqjE7a1AvV71fz942D) Don't worry about this application because we are going to replace it pretty soon!


---

# 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/react_app_template.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.