Recently, React has become one of the most beloved interface frameworks of all time. According to a 2023 survey, React.js is used by 40.58% of developers worldwide, making it one of the most popular web frameworks. Developed by Facebook, React.js is also relied upon by other tech giants such as PayPal, Uber, Instagram, and Airbnb for their user interfaces. Undoubtedly, its widespread adoption and strong community support have been facilitated by React's combination of productivity, component-based architecture, and declarative syntax. This means developers are building projects on React more than ever before.

The React library is non-opinionated by design, meaning that "out of the box", it doesn't include practically any additional features beyond the core functionality of defining and managing components. Therefore, it's easy to mess up without knowing best practices for prop passing, decomposing, structuring React application files, scaling the application as a whole, and other nuances. These pitfalls can be avoided by using a boilerplate that contains built-in functions and configurations, providing a comprehensive foundation with core tools and libraries, optimizing the development process, and allowing developers to focus on building their application logic rather than dealing with initial setup and configuration. In other words, it serves as a standardized starting point for initiating application development. Searching for 'react-boilerplate' on GitHub yields 44.8k repositories at the moment. The question arises regarding which template to choose for development, one that fits your application and is good for scalability and future maintenance.

Types of React boilerplates

In the past, the most commonly used way for starting React projects was create-react-app (CRA) - a popular and officially supported boilerplate by Facebook. However, the new React documentation, published on March 16, 2023, no longer recommends CRA as the best solution for creating React programs. Let's consider the alternatives, compare them, and decide on the best way to start a project.

By delving into the various aspects of React boilerplates, let's consider the criteria by which they can be divided:

Libs and Configs:

• Minimalistic Boilerplates: provide basic configurations for a React project, including basic setups (such as Webpack, Babel, and ESLint). They assume that developers will add certain libraries and features as needed. The majority of boilerplates fall into this category.

• Feature-Rich Boilerplates: come with pre-configured additional libraries and tools. These may include state management (e.g., Redux), routing (React Router), and testing, also may include basic UI components and pages, further speeding up development by providing common UI elements and layouts.

Authentication and Registration:

• Boilerplates with Auth and Registration: include components for login, signup, and user sessions.
• Boilerplates without Auth: leave authentication implementation to developers.

Full-Stack vs. Frontend-Only:

• Full-Stack Boilerplates: provide a comprehensive solution for building web applications, covering both the frontend (React) and backend.
• Frontend-Only Boilerplates: focus solely on the React interface. Developers need to integrate them with the desired server.

UI Components Libraries:

• Boilerplates with UI Components: include a full set of UI components that adhere to consistent design patterns (e.g., buttons, forms, modals).
• Boilerplates without UI Components: leave the development of components entirely to the developer using the boilerplate.

Paid vs. Free:

• Free/Open-Source Boilerplates: freely available, community-supported, and often well-maintained.
• Paid Boilerplates: some commercial templates offer additional features, premium support, or extended functionality.

Based on the above classification, it can be said that the most popular React boilerplates, such as Vite, Create React App (CRA), Create Next App, Razzle, include only the basic libraries and configurations necessary to start developing with React (Minimalistic Boilerplates).

React template selection criteria

Deciding which boilerplate to use during development can be quite challenging because it's not just about creating an application but also about scaling and maintaining it afterward. So, how do you choose the appropriate solution from the given variety of existing boilerplates, and how do you choose them in general? Here are the key points we suggest paying attention to when choosing a boilerplate to start your project:

• Support and Maintenance Options: Is the project regularly updated?
• Performance Scores
• Code Quality (structure cleanliness, scalability, code organization)
• Production Readiness: Is the project ready for production use right now?
• Availability of features such as authentication, routing, internationalization, form handling, testing, basic pages, and UI components - the list could go on, you just need to determine which ones are needed for your project implementation and look for them in the boilerplate.

The initial step in developing React applications typically involves choosing among Vite, Create React App, Create Next App, or Razzle as the foundation. They provide framework-like functionality, particularly regarding setting up the initial project structure, configuring build tools, and providing development servers.

• Vite focuses on providing an extremely fast development server and workflow speed in web development. It uses its own ES module imports during development, speeding up the startup time.

• Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development.

• Next.js is a React framework for building server-rendered and statically generated web applications. It configures Next.js projects with sensible defaults, including features like server-side rendering (SSR), file-based routing, and API routes.

• Razzle is a build tool created by Airbnb, which also simplifies server-side rendering. It abstracts away the complexity of configuring server-side rendering settings and allows developers to easily create versatile JavaScript applications. Razzle supports features like code splitting, CSS-in-JS, and hot module replacement, making it suitable for building React applications that require server-side rendering.

The above-mentioned build tools are often referred to as React boilerplates. Since they only abstract the complexities of setup away, provide basic configurations, and optimize build workflows, they are not very functional and do not contain additional features themselves. Therefore, according to the classification provided above, we classify them as Minimal Boilerplates. Essentially, they often serve as boilerplate templates, that is, they are great tools for creating more feature-rich React boilerplates.

Table of selected Boilerplates

Next, we will consider React boilerplates that do not charge a license fee and/or offer their features for money and also take into account the date of the last update (not more than six months ago). Based on this, we have taken into consideration 12 boilerplates*:

* as of April 2024

Comparison of boilerplates by features

Now let's take a closer look at the features developers can get from using boilerplates and what else needs to be taken into account:

• API Integration: Some templates may contain configurations for integrating with specific APIs or server services.

• State Management Solutions: Options like Redux, MobX, Recoil, or built-in React state management. Also, it's hard to ignore asynchronous React Query.

• Testing Configuration: Predefined testing setups or none of them at all.

• Authentication and Authorization: Whether user authentication and authorization are prescribed and how they are handled, in particular, whether there is integration with certain authentication libraries;

• Internationalization (i18n) and Localization: Providing the ability to support multiple languages using libraries like react-i18next or react-intl.

• ESLint Rules Compliance: Allows not only to detect or fix problems during code formatting but also to identify potential bugs.

• Styling Solutions: The solution for using CSS modules, styled-components, or UI libs, which will ensure easy and effective reuse of styled components.

• Type Safety in the Project: Using TypeScript to provide static typing during development, utilizing classes or modules to create more scalable and reliable applications.

• App Theme Selection: Allowing users to switch between light and dark themes based on their preferences or automatic settings.

• Ready-made Form Components: Providing components intended for reuse across forms, reducing code duplication, and promoting standardization. They may also include built-in validation and error handling, making development more reliable.

• UI Component Libraries: Offering ready-made and customizable components, such as buttons and modal windows, that developers can easily integrate into their applications, saving time and effort on designing and coding these elements from scratch.

We analyzed each boilerplate and obtained the following table:

Description of boilerplates from the table

Extensive-react-boilerplate. This React boilerplate is designed for all types of projects. It's not only fully compatible with the backend boilerplate nestjs-boilerplate but also stands as an independent solution, which is one of its main advantages. This template offers a wide range of functionalities, such as:

• User authentication and authorization, including the possibility of using Google or Facebook accounts.

• Page private or public access settings.

• ESLint setup with custom rules to enhance code efficiency and cleanliness.

• Type safety to ensure the reliability of the written code.

• Project localization using a custom useLanguage hook.

• E2E testing support.

• Light or Dark Mode at the discretion of the user.

• A library of controlled components based on MUI, integrated with react-hook-form by default. So, no longer a need to spend extra time connecting input fields to controllers.

• State management using React Query for handling asynchronous operations.

• User management functionalities (CRUD).

• Avatar selection and upload feature with dropzone capability.

• Support for Next.js framework (SSR) for improved application performance and SEO optimization.

As you can see, from the above mentioned features, this boilerplate significantly reduces the startup time for your project (approximately 193 hours), making it a worthwhile consideration. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only (and has a fully compatible backend boilerplate, thus can be used as Full-Stack Boilerplates), Free.

React-starter-kit. A template for creating web applications based on React. It comes with pre-configured setups such as CSS-in-JS, Vitest, VSCode settings, Cloudflare support, and SSR. A connection to Firestore is used as a database. It includes implementations of some UI components like a toolbar or sidebar based on Joy UI. Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only, Free.

React-redux-saga-boilerplate. A starter project for creating a React application that uses Redux for state management. It provides support for Unit and End 2 End Testing, react-helmet, and uses the Emotion library for styling, simplifying CSS styling with JavaScript. It includes custom components like a header or footer implemented using styled functionality.

Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

Next-js-Boilerplate. This boilerplate has a flexible code structure where you only need to select and save the necessary functionality. It supports integration with Tailwind CSS and authentication with Clerk and is compatible with SQLite, PostgreSQL, and MySQL databases. Unit testing is done using Jest, and the Zod library is used for describing validation schemas.

Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Frontend-Only, Free.

Landy-react-template. This boilerplate comes with multilingual support and smooth animations, and all content is stored in JSON files, allowing users to manage texts without prior knowledge of React.js. Contains a set of its own components (button, input, textarea, etc.) created based on styling HTML elements using styled-components.

Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

Core. A modern template was developed based on the fast project creation tool — Vite. It supports TypeScript for type safety and includes good configurations for ESLint, Prettier, CommitLint, Husky, and Lint-Staged.

Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

Nextjs-boilerplate. This React boilerplate uses Next.js for static page generation. It supports git message convention, component generation using Plop, and Tailwind CSS for styling organization. Has its Storybook for component documentation.

Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

React-pwa. A ready-made set to start your project from scratch. It consists of a minimalistic combination of core libraries, components, and utilities typically needed by developers when creating React applications. It contains its own HOC for error handling on the page and is developed based on Vite.

Categories: Feature-Rich Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

Vitamin. A starter project containing Tailwind CSS with a basic style reset and a Prettier plugin that automatically organizes your classes. For testing, tools such as Vitest, Testing Library, and Cypress are used, but it does not include React UI Component Libraries.

Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

Next-saas-stripe-starter. By using this boilerplate, you can extend the capabilities of your project with features like Next.js, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui, and Stripe. It includes a library of components built using Radix UI and Tailwind CSS.

Categories: Feature-Rich Boilerplates, Boilerplates with Auth and Registration, Full-Stack Boilerplates, Free.

Gatsby-starter-apple. A template for creating applications with a nice responsive design and contains animations for a mobile menu. The basis for styling the used components is styled-components. The boilerplate supports search engine optimization well and has RSS feed capabilities.

Categories: Minimalistic Boilerplates, Boilerplates without Auth, Frontend-Only, Free.

Fullstack-typescript. This boilerplate is a full-stack application for quickly launching your project. It has a library of custom components based on Material UI, and Axios is used for client-server communication. It does not support certain state management technologies like Redux, MobX, etc.

Categories: Minimalistic Boilerplates, Boilerplates without Auth, Full-Stack Boilerplates, Free.

Peculiarities of implementation of some features

In general, React templates offer various implementation features aimed at speeding up and standardizing the development process. They include UI Component Libraries and encompass a general approach to styling, state management, and basic ESLint configurations.

React UI Component Libraries

The implementation of functionalities in React boilerplates often revolves around modular development, where components are designed to be reusable and composable. Analyzing current libraries and according to this article, the following can be considered the most popular ones:

We can say for sure that Material UI is currently the most popular library, with 91.2k GitHub stars and more than 3 million weekly downloads. Thanks to its responsive web design (RWD) feature, you can be confident that your application will automatically adapt to various screens and devices.

Styling Solutions

Styling solutions such as CSS modules, styled-components, or Sass are usually included in React boilerplates. They offer different approaches to styling components, providing flexibility and scalability while maintaining component encapsulation.

Advantages of using styled-components as a styling solution:

1. The library automatically tracks components rendered on the page and applies only their styles.
2. Automatically generates a unique class name for styles, ensuring no errors in class names.
3. Styles are attached to specific components, simplifying the removal of CSS itself.
4. Effortless dynamic styling (code examples below belong to bc-boilerplates).

const AvatarInputContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  position: "relative",
  flexDirection: "column",
  alignItems: "center",
  padding: theme.spacing(2),
  marginTop: theme.spacing(2),
  border: "1px dashed",
  borderColor: theme.palette.divider,
  borderRadius: theme.shape.borderRadius,
  cursor: "pointer",

  "&:hover": {
    borderColor: theme.palette.text.primary,
  },
}));

5. Using dynamic props of a component during styling. This ensures that the style is updated based on the value of the variable.

const StyledCollapseBtn = styled("button")<ICollapse>(({ isOpen, theme }) => ({
  justifySelf: "flex-end",
  color: COLOURS.black,
  backgroundColor: "transparent",
  border: "none",
  cursor: "pointer",
  paddingLeft: theme.spacing(2.5),
  position: "absolute",
  bottom:theme.spacing(3),
  left: isOpen ? "150px" : "unset",
}));

6. This allows for the reuse of styles from one component to another or for influencing one component over another (parent-child relationship).

const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: #BF4F74;
`;

const Icon = styled.svg`
flex: none;
transition: fill 0.25s;
width: 48px;
height: 48px;
  
${Link}:hover & {
  fill: rebeccapurple;
}
`;

State Management

State management is another important aspect that simplifies application state handling, providing scalability and maintainability, especially in complex applications. Usually, Redux, MobX, and Zustand come to mind when choosing a state management tool. However, they are client-side libraries, and compared to a tool like React Query, their application for storing asynchronous data may not be as efficient.

React Query is a server-state library. It is responsible not only for managing asynchronous operations between the server and the client but also provides ready-to-use functionality for searching, caching, and updating data in React and Next.js applications. With just a few lines of code, React Query replaces the boilerplate code used to manage cached data in your client state.

ESLint Rules in Boilerplates

The efficiency of using ESLint rules during the development of your project is also manifested in writing custom rules. Since ESLint has extensive functionality and flexibility, you can create not only formatting and rules but also consider internal project decisions. For example, when working with forms, it is possible to control and warn developers about possible unnecessary renders, incorrect solutions when working with objects, or simply point out unused imports. For example, extensive-react-boilerplate addresses such issues as follows:

• warn about rules regarding incorrect usage of patterns

      {
        "selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]",
        "message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\""
      },
      {
        "selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]",
        "message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\""
      },
      {
        "selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])",
        "message": "Use theme.spacing() instead of literal."
      },
      {
        "selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))",
        "message": "Use key created via createQueryKeys function instead of your solution"
      },
      {
        "selector": "CallExpression[callee.name=refresh]",
        "message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey."
      },
      {
        "selector": "ExpressionStatement[expression.callee.object.name=JSON][expression.callee.property.name=parse][expression.arguments.0.callee.object.name=JSON][expression.arguments.0.callee.property.name=stringify]",
        "message": "Do not use JSON.parse(JSON.stringify(...)) for deep copy. Use structuredClone instead."
      }

• inform about the possibility of uncontrolled renders

      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]",
        "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]",
        "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]",
        "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]",
        "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component."
      },
      {
        "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))",
        "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main"
      }

Conclusion

The choice of an effective React template is crucial for the success of your project. Instead of reinventing the wheel, leveraging the power of a well-chosen boilerplate can significantly speed up your development process and create a solid foundation. When selecting a boilerplate, we recommend familiarizing yourself with its directory structure and configuration files to understand its underlying foundation, ease of integration, modularity, and maximum alignment with technical requirements. Consider whether the available features can provide the functions you need. This can save development time and potentially offer well-maintained and tested code and, ultimately, streamline development and ensure project success.