React Boilerplates in 2021 - The complete guide

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • react-boilerplate

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

  • Another tool worth adding to the list when it comes to setting up a react project is react-boilerplate. On its landing page, react-boilerplate provides this description:

  • ecmascript-asyncawait

    Discontinued Async/await for ECMAScript [Moved to: https://github.com/tc39/proposal-async-await]

  • Support for modern JavaScript features like async/await, rest/spread, dynamic imports right out of the box which make the developer's life easier.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • proposal-object-rest-spread

    Discontinued Rest/Spread Properties for ECMAScript

  • Support for modern JavaScript features like async/await, rest/spread, dynamic imports right out of the box which make the developer's life easier.

  • proposal-dynamic-import

    Discontinued import() proposal for JavaScript

  • Support for modern JavaScript features like async/await, rest/spread, dynamic imports right out of the box which make the developer's life easier.

  • nvm

    Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

  • The latest version of npm can be installed and the several versions installed on your system can be managed by using nvm.

  • react-router

    Declarative routing for React

  • The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

  • reselect

    Discontinued Selector library for Redux [Moved to: https://github.com/reduxjs/reselect] (by reactjs)

  • The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • immer

    Discontinued Create the next immutable state by mutating the current one [Moved to: https://github.com/immerjs/immer] (by mweststrate)

  • The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  • The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

  • react-starter-kit

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

  • git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git MyApp

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  • Even though vite supports an exhaustive set of feature list, the main problem that Vite set out to solve was the issue that most bundling tools (think webpack, parcel) face at scale: Whenever the code base grows to a decent size, the bundler takes up several minutes to spin up a local instance of a dev server. Also, with respect to updating code and getting a live preview, even with the optimizations like Hot module replacement (HMR) in place, it still takes several seconds for a code change to reflect onto the UI in case a critical file is modified. Vite solves these problems by:

  • vite

    Next generation frontend tooling. It's fast!

  • Vite is a relatively new candidate in the frontend framework tooling space that is created/maintained by Evan You of Vue.JS fame. Vite is a universal solution that can be used to bootstrap projects from several tech stacks using templates, which at the present, support Vue, React, Preact, etc.:

  • Rollup

    Next-generation ES module bundler

  • While the development server does not bundle code, the production scripts still build a bundle using Rollup which is highly optimized.

  • redux

    A JS library for predictable global state management

  • The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

  • parcel

    The zero configuration build tool for the web. 📦🚀

  • Even though vite supports an exhaustive set of feature list, the main problem that Vite set out to solve was the issue that most bundling tools (think webpack, parcel) face at scale: Whenever the code base grows to a decent size, the bundler takes up several minutes to spin up a local instance of a dev server. Also, with respect to updating code and getting a live preview, even with the optimizations like Hot module replacement (HMR) in place, it still takes several seconds for a code change to reflect onto the UI in case a critical file is modified. Vite solves these problems by:

  • Next.js

    The React Framework

  • Create react app is a decent way to bootstrap a generic SPA with client-side rendering, but if the requirement is a little fancier like server-side rendering, or static-site generation, then the best way to get started is using create-next-app. It is a simple CLI tool to get started with Next.js projects.

  • artwork

    Discontinued GraphQL Foundation artwork (by graphql)

  • Support for GraphQL through Apollo

  • esbuild

    An extremely fast bundler for the web

  • Classifying the entire code base into library code and source code and by pre-building the library code using esbuild

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts