React Redux Starter Kit

Get started with React, Redux, and React-Router.
Alternatives To React Redux Starter Kit
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Zustand40,429101,7853 days ago121November 28, 20233mitTypeScript
🐻 Bear necessities for state management in React
30 Days Of Javascript40,311
14 days ago1January 19, 2022336JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too:
Reactjs Interview Questions35,412
4 days ago25JavaScript
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
React Boilerplate29,31623a year ago1May 11, 2014116mitJavaScript
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
30 Days Of React24,043
3 days ago222JavaScript
30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too:
React Redux23,163140,10819,2763 days ago135December 05, 202328mitTypeScript
Official React bindings for Redux
React Redux Links22,290
4 months ago33
Curated tutorial and resource links I've collected on React, Redux, ES6, and more
Responsively App21,506
4 days ago193agpl-3.0JavaScript
A modified web browser that helps in responsive web development. A web developer's must have dev-tool.
Normalizr20,9793,3886502 years ago43March 19, 202222mitJavaScript
Normalizes nested JSON according to a schema
Js Stack From Scratch19,3962a year ago1January 19, 201748mitJavaScript
🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Alternatives To React Redux Starter Kit
Select To Compare

Alternative Project Comparisons

Deprecation Warning

This project was started at the advent of the Redux ecosystem, and was intended to help users get up and running quickly. Since then, tooling and best practices have evolved tremendously. In order to get the most modern experience possible, I recommend checking out something like create-react-app which is supported by many core React and Redux developers.

You are welcome to use this project if it is a better fit for your needs, but if you are brand new to the ecosystem I highly recommend checking out something that has received more recent updates.

Thank you to everyone who made this project possible over the past year(s).

React Redux Starter Kit

Build Status dependencies devDependency Status js-standard-style

This starter kit is designed to get you up and running with a bunch of awesome front-end technologies.

The primary goal of this project is to provide a stable foundation upon which to build modern web appliications. Its purpose is not to dictate your project structure or to demonstrate a complete real-world application, but to provide a set of tools intended to make front-end development robust, easy, and, most importantly, fun. Check out the full feature list below!

Finally, This project wouldn't be possible without the help of our many contributors. What you see today is the product of hundreds changes made to keep up with an ever-evolving ecosystem. Thank you for all of your help.

Table of Contents

  1. Requirements
  2. Installation
  3. Running the Project
  4. Project Structure
  5. Live Development
  6. Routing
  7. Testing
  8. Building for Production
  9. Deployment
  10. Thank You


  • node ^5.0.0
  • yarn ^0.23.0 or npm ^3.0.0


After confirming that your environment meets the above requirements, you can create a new project based on react-redux-starter-kit by doing the following:

$ git clone <my-project-name>
$ cd <my-project-name>

When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.

$ yarn  # Install project dependencies (or `npm install`)

Running the Project

After completing the installation step, you're ready to start the project!

$ yarn start  # Start the development server (or `npm start`)

While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:

yarn <script> Description
start Serves your app at localhost:3000
build Builds the application to ./dist
test Runs unit tests with Karma. See testing
test:watch Runs test in watch mode to re-run tests when changed
lint Lints the project for potential errors
lint:fix Lints the project and fixes all correctable errors

Project Structure

The project structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.

├── build                    # All build-related code
├── public                   # Static public assets (not imported anywhere in source code)
├── server                   # Express application that provides webpack middleware
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── index.html           # Main HTML page container for app
│   ├── main.js              # Application bootstrap and rendering
│   ├── normalize.js         # Browser normalization and polyfills
│   ├── components           # Global Reusable Components
│   ├── containers           # Global Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   │   └── PageLayout       # Global application layout in which to render routes
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   ├── Home             # Fractal route
│   │   │   ├── index.js     # Route definitions and async split points
│   │   │   ├── assets       # Assets required to render components
│   │   │   ├── components   # Presentational React Components
│   │   │   └── routes **    # Fractal sub-routes (** optional)
│   │   └── Counter          # Fractal route
│   │       ├── index.js     # Counter route definition
│   │       ├── container    # Connect components to actions and store
│   │       ├── modules      # Collections of reducers/constants/actions
│   │       └── routes **    # Fractal sub-routes (** optional)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── styles               # Application-wide styles (generally settings)
└── tests                    # Unit tests

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

  • For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

  • For Sass, any change will update the styles in realtime, no additional configuration or reload needed.

Redux DevTools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

However, it's easy to bundle these developer tools locally should you choose to do so. First, grab the packages from npm:

yarn add --dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.


We use react-router route definitions (<route>/index.js) to define units of logic within our application. See the project structure section for more information.


To add a unit test, create a .spec.js file anywhere inside of ./tests. Karma and webpack will automatically find these files, and Mocha and Chai will be available within your test without the need to import them. Here are a few important plugins and packages available to you during testing:


Some of the assertions available from chai use magical getters. These are problematic for a few reasons:

  1. If you mistype a property name (e.g. expect(false) then the expression evaluates to undefined, the magical getter on the true is never run, and so your test silently passes.
  2. By default, linters don't understand them and therefore mark them as unused expressions, which can be annoying.

Dirty Chai fixes this by converting these getters into callable functions. This way, if mistype an assertion, our attempt to invoke it will throw due to the property being undefined.

// This silently passes because the getter on `true` is never invoked!
it('should be true', () => {
  expect(false) // evalutes to undefined :(

// Much better! Our assertion is invalid, so it throws rather than implicitly passing.
it('should be true', () => {
  expect(false) // `tru` is not defined!

Building for Production


Out of the box, this starter kit is deployable by serving the ./dist folder generated by yarn build. This project does not concern itself with the details of server-side rendering or API structure, since that demands a more opinionated structure that makes it difficult to extend the starter kit. The simplest deployment strategy is a static deployment.

Static Deployments

Serve the application with a web server such as nginx by pointing it at your ./dist folder. Make sure to direct incoming route requests to the root ./dist/index.html file so that the client application will be loaded; react-router will take care of the rest. If you are unsure of how to do this, you might find this documentation helpful. The Express server that comes with the starter kit is able to be extended to serve as an API and more, but is not required for a static deployment.

Thank You

This project wouldn't be possible without help from the community, so I'd like to highlight some of its biggest contributors. Thank you all for your hard work, you've made my life a lot easier and taught me a lot in the process.

  • Justin Greenberg - For all of your PR's, getting us to Babel 6, and constant work improving our patterns.
  • Roman Pearah - For your bug reports, help in triaging issues, and PR contributions.
  • Spencer Dixon - For your creation of redux-cli.
  • Jonas Matser - For your help in triaging issues and unending support in our Gitter channel.

And to everyone else who has contributed, even if you are not listed here your work is appreciated.

Popular Redux Projects
Popular Reactjs Projects
Popular User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Starter Kit
React Redux