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

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

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

Setup the Application Template

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

$ git clone [e-mail]: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:

├── 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

$ 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: Don't worry about this application because we are going to replace it pretty soon!