react-redux-starter-kit

Get started with React, Redux, and React-Router.

10,288

2,201

10,288

130

View on GitHub

Top Related Projects

create-react-app

102,511

Set up a modern web app by running one command.

redux-toolkit

10,695

The official, opinionated, batteries-included toolset for efficient Redux development

react-boilerplate

29,474

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

react-starter-kit

22,704

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React

react-slingshot

9,741

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

react-redux-universal-hot-example

11,995

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

Quick Overview

The react-redux-starter-kit is a comprehensive boilerplate for building modern web applications using React and Redux. It provides a solid foundation with pre-configured tools, best practices, and a well-organized project structure to help developers quickly start building scalable and maintainable React applications.

Pros

Includes a well-structured project setup with Redux integration
Comes with pre-configured development tools like Webpack, Babel, and ESLint
Provides a solid testing setup with Jest and Enzyme
Includes hot module replacement for faster development

Cons

May be overwhelming for beginners due to its comprehensive setup
Some included dependencies might become outdated over time
Opinionated project structure may not suit all development preferences
Requires understanding of React and Redux concepts to fully utilize

Code Examples

Redux action creator:

export const increment = () => ({
  type: 'INCREMENT'
})

This code defines a simple Redux action creator for incrementing a counter.

React component with Redux connection:

import React from 'react'
import { connect } from 'react-redux'
import { increment } from './actions'

const Counter = ({ count, increment }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
)

const mapStateToProps = state => ({
  count: state.count
})

export default connect(mapStateToProps, { increment })(Counter)

This example shows a React component connected to Redux state and actions.

Async action with Redux Thunk:

export const fetchUser = (id) => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_USER_REQUEST' })
    try {
      const response = await fetch(`/api/users/${id}`)
      const user = await response.json()
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: user })
    } catch (error) {
      dispatch({ type: 'FETCH_USER_FAILURE', error })
    }
  }
}

This code demonstrates an asynchronous action creator using Redux Thunk middleware.

Getting Started

Clone the repository:

git clone https://github.com/dvdzkwsk/react-redux-starter-kit.git
cd react-redux-starter-kit

Install dependencies:
```
npm install
```
Start the development server:
```
npm start
```
Open your browser and navigate to http://localhost:3000 to see the app running.

Competitor Comparisons

create-react-app

102,511

Set up a modern web app by running one command.

Pros of Create React App

Official React toolchain with strong community support and regular updates
Zero configuration required to start a new React project
Includes built-in optimizations for production builds

Cons of Create React App

Less flexibility for custom configurations without ejecting
Includes fewer additional libraries and tools out of the box
May require additional setup for more complex state management (e.g., Redux)

Code Comparison

React Redux Starter Kit:

import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import App from './components/App'

const store = createStore(window.__INITIAL_STATE__)

ReactDOM.render(
  <App store={store} />,
  document.getElementById('root')
)

Create React App:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

The main difference in the code examples is that React Redux Starter Kit includes Redux store creation and passing, while Create React App focuses on a simpler React setup with additional features like StrictMode and performance reporting.

redux-toolkit

10,695

The official, opinionated, batteries-included toolset for efficient Redux development

Pros of Redux Toolkit

Simplified Redux setup with built-in utilities for common tasks
Includes powerful tools like createSlice for easier reducer and action creation
Encourages best practices and reduces boilerplate code

Cons of Redux Toolkit

Steeper learning curve for developers new to Redux concepts
May introduce unnecessary complexity for smaller projects
Less flexibility in customizing Redux implementation

Code Comparison

Redux Toolkit:

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
  },
})

React Redux Starter Kit:

const INCREMENT = 'INCREMENT'

const initialState = 0

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1
    default:
      return state
  }
}

Redux Toolkit simplifies the process of creating reducers and actions, while React Redux Starter Kit follows a more traditional Redux approach with separate action types and reducer functions.

react-boilerplate

29,474

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Pros of react-boilerplate

More comprehensive and feature-rich, offering a wider range of tools and configurations out of the box
Better documentation and community support, making it easier for developers to get started and troubleshoot issues
Regular updates and maintenance, ensuring compatibility with the latest React ecosystem changes

Cons of react-boilerplate

Steeper learning curve due to its complexity and extensive feature set
Potentially overkill for smaller projects or those requiring a simpler setup
More opinionated structure, which may not align with all development preferences or project requirements

Code Comparison

react-boilerplate:

import { createSelector } from 'reselect';
import { initialState } from './reducer';

const selectHome = state => state.home || initialState;

const makeSelectUsername = () =>
  createSelector(
    selectHome,
    homeState => homeState.username
  );

react-redux-starter-kit:

import { createSelector } from 'reselect'

const homeSelector = state => state.home

export const usernameSelector = createSelector(
  homeSelector,
  home => home.username
)

Both examples demonstrate the use of reselect for creating memoized selectors, but react-boilerplate's approach includes additional boilerplate and fallback to an initial state.

react-starter-kit

22,704

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React

Pros of React Starter Kit

More comprehensive and feature-rich, including server-side rendering and GraphQL integration
Better documentation and more detailed setup instructions
Actively maintained with frequent updates and a larger community

Cons of React Starter Kit

Steeper learning curve due to its complexity and additional features
Potentially overkill for smaller projects or those not requiring server-side rendering
Heavier initial setup and configuration

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from '../../components/Layout';
import Home from './Home';

const title = 'React Starter Kit';
function action() {
  return {
    chunks: ['home'],
    title,
    component: <Layout><Home title={title} /></Layout>,
  };
}

React Redux Starter Kit:

import React from 'react'
import { Route, IndexRoute } from 'react-router'

import CoreLayout from '../layouts/CoreLayout'
import HomeView from '../views/HomeView'

export default (
  <Route path='/' component={CoreLayout}>
    <IndexRoute component={HomeView} />
  </Route>
)

The code comparison shows that React Starter Kit uses a more modular approach with separate action functions, while React Redux Starter Kit employs a more straightforward route definition. React Starter Kit's code also demonstrates its server-side rendering capabilities with the chunks property.

react-slingshot

9,741

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

Pros of React Slingshot

More comprehensive documentation and setup instructions
Includes additional features like error tracking and offline support
More active community and frequent updates

Cons of React Slingshot

Potentially more complex for beginners due to additional features
Larger initial bundle size due to included libraries

Code Comparison

React Slingshot:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

React Redux Starter Kit:

import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import AppContainer from './containers/AppContainer'

React Slingshot uses React Router for routing, while React Redux Starter Kit relies on a custom AppContainer. React Slingshot also includes Redux setup in the main entry point, whereas React Redux Starter Kit separates store creation into a separate file.

Both projects serve as solid starting points for React and Redux applications, but React Slingshot offers more features out of the box at the cost of increased complexity. React Redux Starter Kit provides a simpler, more minimalistic approach that may be preferable for developers who want more control over their project structure and dependencies.

react-redux-universal-hot-example

11,995

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

Pros of react-redux-universal-hot-example

Includes server-side rendering, providing better initial load times and SEO benefits
Offers a more comprehensive example with features like authentication and API integration
Includes more advanced Redux usage, such as async actions and middleware

Cons of react-redux-universal-hot-example

More complex setup and configuration, which may be overwhelming for beginners
Larger codebase with more dependencies, potentially leading to longer build times
Less frequently updated, which may result in outdated dependencies

Code Comparison

react-redux-universal-hot-example:

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case LOAD:
      return {
        ...state,
        loading: true
      };
    // More cases...
  }
}

react-redux-starter-kit:

const initialState = { counter: 0 }
export default function counterReducer (state = initialState, action) {
  switch (action.type) {
    case INCREMENT_COUNTER:
      return { ...state, counter: state.counter + 1 }
    // More cases...
  }
}

Both examples use Redux reducers, but react-redux-universal-hot-example demonstrates a more complex state structure and action handling, while react-redux-starter-kit shows a simpler approach suitable for beginners.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

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.

Requirements
Installation
Running the Project
Project Structure
Live Development
- Hot Reloading
- Redux DevTools
Routing
Testing
- dirty-chai
Building for Production
Deployment
Thank You

Requirements

node ^5.0.0
yarn ^0.23.0 or npm ^3.0.0

Installation

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 https://github.com/davezuko/react-redux-starter-kit.git <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.

Routing

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.

Testing

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:

dirty-chai

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

If you mistype a property name (e.g. expect(false).to.be.tru) then the expression evaluates to undefined, the magical getter on the true is never run, and so your test silently passes.
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).to.be.tru // evalutes to undefined :(
})

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

Building for Production

Deployment

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Create React App

Cons of Create React App

Code Comparison

Pros of Redux Toolkit

Cons of Redux Toolkit

Code Comparison

Pros of react-boilerplate

Cons of react-boilerplate

Code Comparison

Pros of React Starter Kit

Cons of React Starter Kit

Code Comparison

Pros of React Slingshot

Cons of React Slingshot

Code Comparison

Pros of react-redux-universal-hot-example

Cons of react-redux-universal-hot-example

Code Comparison

Convert designs to code with AI

README

Deprecation Warning

React Redux Starter Kit

Table of Contents

Requirements

Installation

Running the Project

Project Structure

Live Development

Hot Reloading

Redux DevTools

Routing

Testing

dirty-chai

Building for Production

Deployment

Static Deployments

Thank You

Top Related Projects

Convert designs to code with AI