React Redux minimal starter kit (boilerplate)

Join the chat at Build Status dependencies devDependency Status

Redux-Minimal is a minimalist react-redux starter kit (boilerplate) which let's you build rich real world apps. It's not as light as some starter kits which only let you write a simple hello world app and then you have to struggle with installing all the other stuff yourself. And it's also not as packed as other starter kits which confuse you massively with its folder/file structure and arcane scripts.

Redux-Minimal contains the bare minimum to develop a real world complex app and it also comes with a small users app that will show you how to code certain features. A demo of the app can be seen here:

Getting started

  1. Before you start working with redux-minimal, you first need to setup your environment. Make sure you have the following installed:

  2. Once your environment is prepared, open a command prompt (terminal) and type in the following:

    cd C:\js\node\apps
    git clone hello-world
    cd hello-world
    npm install
    npm start
  3. Then open your http://localhost:8080/ to see the included small users app. Congratulations! You can now write react redux code.

  4. For more productivity you can install Chrome's React Developer Tools and Redux Dev Tools

Video tutorial

I made a video tutorial series, to help people out getting started with react and redux. It covers the basics, like what is react, redux, etc, and also setting up the environment with redux-minimal and guiding you step by step with creating the demo users app. You will also understand why code was written this way, where refactoring was needed, etc.

Let's learn React and Redux with Javascript's new ES6 syntax, from Beginner to Intermediate to Advanced

Why use this?

Redux-Minimal contains the minimum npm packages you need to have installed in order to build a react redux real-world app containing:

The code and implementation are minimal, which lets you focus on the real app, not the webpack, babel, gulp etc boilerplate files, which honestly you shouldn't even bother with.

Installed packages

Here are the npm packages that redux-minimal installs:

Feature Packages Benefits
React react A declarative, efficient, and flexible JavaScript library for building user interfaces
react-dom Serves as the entry point of the DOM-related rendering paths
react-hot-loader Tweak React components in real time when developing
Redux redux A predictable state container for JavaScript apps
react-redux React bindings for Redux
redux-freeze Redux middleware that prevents state from being mutated anywhere in the app
Router react-router Declarative routing for React. Your app has pages now
react-router-redux Simple bindings to keep react-router and redux in sync
Bootstrap react-bootstrap Bootstrap 3 components built with React
react-router-bootstrap Integration between React Router and React-Bootstrap
Forms redux-form A Higher Order Component using react-redux to keep form state in a Redux store
Asynchronous redux-saga Asynchronous API calls made easy with Saga
Unit tests mocha Simple javascript test framework
enzyme JavaScript Testing utilities for React components
react-addons-test-utils Required by enzyme. Makes it easy to test React components
ignore-styles Ignore imported style files when running in Node
Sass node-sass Mature, stable, and powerful CSS extension language
Webpack webpack A bundler for javascript, css and others
webpack-dev-server Serves the app at http://localhost:8080/
extract-text-webpack-plugin Webpack plugin that builds the css bundle file
style-loader Webpack module that loads styles
css-loader Webpack module that loads css styles
sass-loader Webpack module that loads sass styles
clean-webpack-plugin Webpack module to remove previous build files
Babel babel-core Compiler that helps node.js and the browser to understand the new js syntax
babel-runtime Helps node.js to understand the new js syntax
babel-preset-es2015 Helps node.js to use ES2015 Javascript syntax
babel-preset-react Helps node.js to use React's JSX syntax
babel-preset-stage-3 Helps node.js to use the spread operator
babel-loader Helps webpack to compile the new javascript syntax
babel-polyfill Helps the browser to understand the new js syntax
whatwg-fetch Helps the browser to use fetch

Express branch

You can use the express branch if you want to use express instead of webpack-dev-server.

Sample app

Redux-Minimal also contains a small sample app that let's you manage some users with the following features:

The sample app provides you with basically most of the things you will need when building a new real-world app.

The demo for the app can be found here:

Build your own app

  1. Open webpack.config.js and change the app_root value from src_users to src

  2. Run npm start

  3. Congratulations! You now have a blank Hello world starting app


Besides the start script, there are also other scripts

npm run <script> What it does
start Starts the app at http://localhost:8080/. The bundle js/css files are stored in memory
test Starts the unit testing using all the files found in the test folder
test-watch Starts the unit testing and watches for changes to re-run the tests
build-dev Builds the js/css bundle files in the public folder. Adds debugging code for development
build-prod Builds the js/css bundle minified files in the public folder


This project is licensed under the MIT license, Copyright (c) 2016 Catalin Luntraru.