Simple React Redux Starter Guide / Documentation

January 7, 2017    boilerplate github javascript react redux web application development web development

When I started learning React Redux and creating side projects with it, I found it very hard to find a minimal starter/boilerplate package to start with. Picking and learning new tools can be difficult, especially in the current JavaScript ecosystem. The big reason to why I had trouble finding a starter was because a lot of the starter packages had a lot of boilerplate code that I did not want. I was looking for a pure front end application with routing and an API call that I could use as reference or as an example.

Simple React Redux Starter/Boilerplate. With ES6, Webpack, Router, Dev Tools, Axios, Thunk


Table of Contents


A simple React Redux starter recipe that includes an API call to retrieve a list of countries and displays the data in a table. The starter includes a navigation bar with a home route and an about route, and an animated loading spinner for asynchronous functions.

Production View

GitHub Link to Starter:


Example project using this starter:

Why Should You Use This Starter Boilerplate?

The main purpose of this package is to create a simple, minimal recipe for a front-end application starter with modern technologies. The objective is to save time when creating new applications and to minimize tooling choices within the modern ecosystem in order to get you up and running quickly. You can take a look at the technologies being used here.

How Does This Fit Into Your Solution?

This React Redux starter can fit into your solution by being used for quickly prototyping a front end application.

This starter can also be used as a decoupled web client that can be integrated with any back-end. An example, for my marvel app that searches the Marvel database for the characters using the Marvel API and shows the power levels of popular Marvel characters, I used this starter along with a Node.js server backend and Mongo Database.

Getting Started

Clone the repository

git clone


Install Node:

Install required dependencies:

npm install yarn -g

Current versions at time of creation:

  • Node v6.9.1
  • NPM v4.0.2


  • Run development server (localhost:3000): npm run dev
  • Run production server (localhost:3000): npm run prod
  • Deploy production build (into /dist folder): npm run build
    • Creates a bundle.js and bundle.js.mapfile
    • Copy the /index.html into the root directory on the server and the bundle.js and file into /static directory on the server

Project File Structure

├── index.html
├── package.json
├── server.js
├── yarn.lock
├── src/
|   ├── actions
|   |   ├── CountriesActions.js
|   ├── components
|   |   ├── Countries.js
|   |   ├── Country.js
|   |   ├── Navbar.js
|   |   └── Spinner.js
|   ├── constants
|   |   └── ActionTypes.js
|   ├── containers
|   |   ├── About.js
|   |   ├── App.js
|   |   ├── Countries.js
|   |   └── DevTools.js
|   ├── reducers
|   |   ├── countries.js
|   |   └── index.js
|   ├── store
|   |   ├──
|   |   ├──
|   |   └── configureStore.js
|   ├── styles
|   |   └── main.scss
|   ├── index.js
|   ├── routes.js
├── .babelrc
├── .eslintignore
├── .eslintrc
└── .gitignore


Technologies Overview


React is a a JavaScript library for building user interfaces.

More information:


Redux is a predictable state container for JavaScript apps. Redux architecture evolves the ideas of Flux and revolves around a strict unidirectional data flow.

More information:

Flux data flow:

Redux data flow:

ECMAScript 2015 / ES6

ECMAScript 2015 is an ECMAScript standard that was ratified in June 2015. Babel is a compiler that transforms your ES2015 code into JavaScript so that the browser can read it.

More information:


Webpack is a module bundler which compacts your JavaScript files into separate modules allowing module loading throughout your application.

More information:


Yarn is a dependency manager built on top of npm allowing for consistent and reliable versioning using a lockfile.

More information:

React Router

React Router handles the routing, keeping your UI in sync with the URL.

More information:

This starter currently uses hashHistory to bypass configuring a server to get the application up and running. However, if you do have a server, it is recommended to use browserHistory for cleaner URLs and support for server-side rendering.

More information on React Router’s history:

Redux Dev Tools

Redux Dev Tools is a development environment tool that aids in helping with the Redux workflow. Redux dev tools allows developers to inspect every state and action, in addition to “time-traveling” by going back and cancelling actions.

Development View with Dev Tools

More information: