react assignment 2 boilerplate github

10 React Boilerplates You Should Not Miss in 2022

Are you looking for React boilerplates? You’ll find all the great ones here. In this blog, we will learn and find out all the major React boilerplates that you should not miss in 2022. But first, for those who are unfamiliar with boilerplates, let us clarify a few points before diving into the best ones.

What is a boilerplate?

A boilerplate has nothing to do with a boiler or plate. Rather, it is a chunk of code that we can reuse a lot of times to repeat the process in particular sections. According to Wikipedia, “boilerplate is a section of code that is used interchangeably to provide this or that function”. Since developers go through a lot of code writing, boilerplate code saves their time and gives comfort.

To reap the benefits of a boilerplate, clone it in Git for your project’s needs. After that, use a hot reloading function to refresh code changes.

Difference between boilerplates & Starter kits

These are not well-defined terms. These terms are frequently used interchangeably. However, in our opinion, the Starter Kit is a larger package that is used only once per project, similar to the code generated by create-react-app. Whereas boilerplate is used for smaller tasks such as the files we create for a single redux action or component.

Rect boilerplate vs React boilerplate template

Best React boilerplate?

Because developers’ preferences differ, there is no such thing as the best react boilerplate. You may have them based on their popularity but not any other way. Each boilerplate is useful for resolving various tasks. The topic is very similar to asking anyone which JS library is best for front-end development. React developers would vote for React, and Vue developers would defend Vue. Simple as that.

Evaluati on Points

• Clean code structure 
• Code splitting
• Comments presence
• Well documentation
• Responsive navigation system
• Server and client code for setup
• Scalability
• Easy testing tools
• Support & maintaining options

The most important benefits of using boilerplates are time savings and a short learning curve. Simply incorporating a code template rather than writing everything from scratch saves time. Furthermore, thanks to a specific frame scaffolding code, the designer may be able to see the code more clearly in the future.

However, every good thing has a drawback, so be aware that the downside of ready-made coding tools may be additional code maintenance and the need to navigate someone else’s code. Also, boilerplate commands may dump configuration information in the form of code. You’ll have to manually resolve bug lists, clean up a lot of code, and update the dependencies from the original repository.

When to use React b oilerplate?

The use of React boilerplate depends on the size of your project. It is best to use boilerplates for light and responsive web apps. For long-term and time-consuming sites, it’s better to put effort into deep learning, DevOps toolchain, etc.

To be honest, there are a couple of hundred React boilerplates available on GitHub. So, for choosing a particular one or a few, you need to have a clear goal. For example, you will build an app using React, TypeScript, Redux, etc.

We’ve carefully handpicked 15 React boilerplates for different purposes. Please keep reading to unveil these great React boilerplates!

10 React Boilerplates

The list is in no particular order.

1. Gatsby Static

Gatsby is a fantastic boilerplate for building static websites or apps in React.js that are optimized for speed. It’s the ideal open-source framework for creating, say, a company’s e-commerce store. It has a starter kit gallery and provides the fastest outputs pre-rendered HTML and CSS to ensure the quickest load time. Learn about Gatsby with the official guide and a gallery of starter kits .

2. React Redux Universal

React Redux Universal is a boilerplate that includes react-router, redux, saga, webpack 3, jest with coverage, and enzyme. Its functionality allows you to perform actions on both the server and client sides. Redux eliminates boilerplate code and enables hot–reloading in the first place. Redux is suitable for multiple UI layers and has a robust ecosystem of addons to choose from.

3. Electron React b oilerplate

To begin with, the Electron boilerplate has multiple entry points and a well-deserved reputation among coders, with 18.7k stars on GitHub. The three pillars of this boilerplate are hot reloading, incremental typing, and high code performance. Second, Electron allows you to switch between apps without having to refresh the page. It is compatible with electron-builder , TypeScript , eslint , webpack , and Babel .

4. React Slingshot

One more efficient tool to equip your React app is react-slingshot. It is a starter kit / boilerplate with Babel, hot reloading, testing, lining, and a working example app built-in. Its advantages are the only npm start command to get started through any modern browser. It works with a bunch of common  technologies  like SASS, ESLint, React, Redux,  React Router , and others. Make the fast and highly automated production build – by typing npm run build. Available for macOS, Linux, and Windows as well. Currently, it has 9.8k GitHub stars.

5. ny times kyt 

Every large JavaScript web app requires a common foundation: a configuration to build, run, test, and lint your code. kyt is a toolkit that encapsulates and manages web app configuration. kyt has a wide range of applications in programming and can be used as a dependency in any project. It’s a useful tool for creating dynamic web applications in Node.js.

6. React b oilerplate

With 28.2k stars on GitHub, React boilerplate is a solid and well-thought-out boilerplate in the Javascript UI Libraries. What’s on the inside? Redux, Mocha, Redux-Saga, Jest, React Router, PostCSS, reselect, some code generation scripts, and the super-rich component and font base are all included. They even allow for SEO indexing! That is more than enough to focus on app development and performance.

Razzle boilerplate is a tool that abstracts all of the complex configurations required to build single-page apps and server-side rendering apps into a single dependency. It has the same CSS setup as create-react-app and supports React , Preact , Reason-React , Vue, and Angular. While your app is running, type rs and press enter in the terminal to restart your server. Get started with Razzle right away.

8. Neutrino

Neutrino allows you to create js web apps without the need for an initial configuration file. It is frequently used as a helper in the development of various React and Node.js projects. Neutrino allows you to test, lint, and develop js projects using shared configuration presets and middleware. It is compatible with Jest and Karma for testing, ESLing for fine-tuning linting, various CLI tools, and other tools.

9. React chrome extension boilerplate

With 2k GitHub stars and over 350 forks, this boilerplate is one of the best chrome extension boilerplates for Reactjs projects. You’ll see a live example of this boilerplate from the link below. Webpack and react-transform are used in this boilerplate, as well as Redux. You can perform a hot reload by editing the Popup & Window & Inject page’s related files.

10. Webpack React boilerplate

webpack-react-boilerplate is a React 16 and Webpack 4 boilerplate that uses babel 7. It utilizes the new webpack-dev-server, the react-hot-loader, and CSS-Modules. It is using the most recent versions of React, babel, jest, and enzyme. Click to see real-time server changes and also for more information on the technologies used.

Final Thoughts

Finally, it looks like your search for some good React boilerplates has come to an end. Choosing the right React boilerplate is very important. It is essential to choose the right one especially for scaling, maintaining the app or website in the future, setting up the configurations, and so on.

We wish you the best of luck with your next React-based project. Thank you for joining us!

You Might Also Like These Articles

• Convert TypeScript Project to JavaScript
• Best Open Source React Chart Libraries
• Free Best React Date Picker Components to use
• TypeScript & JavaScript – Which One to Choose
• Best Free Tailwind CSS UI Kits and Components
• Web3 – The Decentralized Web of Future
• Why & How to Get Started with Open-Source Software?

Published in React

• benefits of boilerplates
• Best React Boilerplates
• erence between boilerplates & Starter kits
• razzle boilerplate
• React chrome extension boilerplate
• React Redux Boilerplate
• React slingshot
• Top React Boilerplates
• Webpack React boilerplate
• what is boilerplate
• When to use React boilerplate?

Comments are closed, but trackbacks and pingbacks are open.

DEV Community

Posted on Apr 29

Top 12+ Battle-Tested React Boilerplates for 2024

The matter of choosing the most popular web framework to start.

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 to 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.

React Project Scaffolding Tools

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, 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.

Landy-react-template . This boilerplate comes with multilingual support, 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.

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 uses Tailwind CSS for styling organization. Has its Storybook for component documentation.

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.

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.

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 boilerplaite supports search engine optimization well and has RSS feed capabilities.

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:

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:

• The library automatically tracks components rendered on the page and applies only their styles.
• Automatically generates a unique class name for styles, ensuring no errors in class names.
• Styles are attached to specific components, simplifying the removal of CSS itself.
• Effortless dynamic styling (code examples below belong to bc-boilerplates )
• Using dynamic props of a component during styling. This ensures that the style is updated based on the value of the variable.
• This allows for the reuse of styles from one component to another or for influencing one component over another (parent-child relationship).

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 used in some boilerplates like bc-boilerplates . 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, 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
• inform about the possibility of uncontrolled renders

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.

Since there was often a question of how to apply multiple boilerplates simultaneously due to the lack of comprehensive functionality in such templates, the bc-boilerplates team proposed a solution in the form of the extensive-react-boilerplate . In our opinion, it can carve out its niche among well-known counterparts and become a worthy competitor deserving of your attention. We invite you to try it out and look forward to your feedback in the form of a new star.

Full credits for this article to Olena Vlasenko and Liudmyla Kostenko 🇺🇦

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Jun 13, 2024

Hi, great article, very impressive work, respect.

I'm a huge fan of boilerplates and have been using them since my very first freelance gig to speed up my projects.

But lately, with the flood of boilerplates out there—some great, some not so great, some fairly priced, and others questionably expensive—it's becoming harder to tell which ones are life-changing and which are disappointing.

So, I decided to create a simple platform in my spare time that ranks boilerplates based on community preferences with an upvote system.

Its name? Best Boilerplates Ever Ever Ever

I wanted to know if you would accept to add the link to the platform in your article?

That would be super cool!

Feel free to contact me on X to discuss it (@YannisHaismann).

See you soon,

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Optimizing Performance in CodeIgniter: Tips and Best Practices

Gurpinder Singh - Sep 5

The Power of Proxy

zain ul abdin - Sep 5

Scale Nodejs Application with APM Tools

tkssharma - Sep 5

React Native Background Location Tracking

Keerthana G - Sep 5

We're a place where coders share, stay up-to-date and grow their careers.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Top React boilerplates of 2023

Editor’s note : This React boilerplate article was last updated on 13 March 2023 to define the criteria for the best boilerplates and include a section on the Razzle boilerplate. Check out this article for information on the top React Native boilerplates .

Recently, React has become one of the most loved frontend frameworks of all time. This means that more developers are building projects in React than ever before.

Non-opinionated by design, the React library benefits from the use of boilerplates, pieces of code that act as a logical starting point while beginning development with any technology. In this article, we will look at five boilerplates for React and explore their strengths and weaknesses.

Jump ahead:

Criteria for selecting a React boilerplate

• Create React App
• Create Next App
• React Starter Kit

When to use a React boilerplate

Choosing a React boilerplate requires careful consideration and, most importantly, a solid understanding of the underlying technology — React. Speed and developer experience are general concerns when picking a boilerplate. Still, you should examine each boilerplate listed to see if it satisfies any extra interests you may have — for example, TypeScript support.

Some criteria that can justify the quality of a React boilerplate includes:

• Compiler speed: This refers to how fast the tool can compile your React code. Faster compilation means faster development
• Developer experience: How easy it is to use the tool? Is it intuitive and well-documented? Does it have a low learning curve? Additionally, a tool that provides useful features like hot module reloading and error reporting can greatly enhance the developer experience
• Good documentation: Clear and concise documentation is essential when trying to learn a new tool. It also gives you reliable fallback when you run into errors
• File structure: a well-organized file structure will make it easier to navigate and maintain your codebase
• Community support: It’s essential to pick a tool with an active and helpful community where you can find support, ask questions, and receive updates

Vite is a relatively new frontend development tool for JavaScript projects that has gained traction among developers. It is well known for its lightning-fast development experience, fast build times, hot module replacement (HMR), and other developer-friendly features. Created and maintained by Evan You of Vue.js and other Vite maintainers, Vite uses esbuild — an extremely fast bundler for the web written in Go — under the hood as a faster alternative to bundlers like webpack or Parcel.

Vite is not only limited to React and can be used to bootstrap projects using several popular frontend frameworks like Vue, Svelte, Preact, and more. It also provides opt-in TypeScript support.

Let’s see how to set up a new Vite application.

Getting started with Vite

For the scope of this article, we will be creating only React projects with these tools. Run the following command from your preferred directory in your terminal:

This will begin the installation process and guide you in scaffolding your project. Name your project and select React as the framework with a variant of your choice. Here we’ll set it up with TypeScript:

When the installation is complete, you should see the instructions below:

The commands above will navigate you into the project directory. Install the project dependencies with npm install and spin up a dev server on localhost:5173 :

And as quick as that, you have a new React project to work with! Do note that in order for the dev script to run properly, we need to be on the latest build version of Node.js that supports worker_threads . Otherwise, we get this error while trying to run the dev script:

You can use nvm to install the latest version of npm and to manage previously installed versions.

Main features of Vite

Vite is different from the other boilerplate tools in this list because it was built keeping the developer experience (DX) in mind.

Vite supports an extensive set of features , however, the main problem that Vite set out to solve is the issue that most bundling tools (think Parcel ) face at scale: when the code base grows to a decent size, the bundler takes several minutes to spin up a local instance of a dev server.

Even with optimizations like hot module replacement (HMR) in place, it still takes several seconds for a code update to reflect onto the UI as a live preview in case a critical file is modified.

Vite solves these problems by:

• Capitalizing on the availability of native ES module support on most modern browsers and not bundling the code at all
• Classifying the entire code base into library code and source code and by pre-building the library code using esbuild
• Performing HMR over native ES modules considerably reduces the HMR boundary to be invalidated and improves the performance
• Using plugins to extend Vite’s functionalities and include features like server side rendering (SSR)

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

Strong points:

• Main focus on the developer experience (DX)
• TypeScript support out of the box
• Active development and maintenance by Evan You and the Vite team
• CSS import support with CSS modules as well as preprocessor support
• Wasm and web worker support

Weak points:

• The build process is built on emerging technologies, so it may be unfamiliar and difficult to tweak if necessary
• Less documentation and online support are available compared to something like webpack

Therefore, if you are looking for something that is on the bleeding edge as far as developer experience, future-proofing, and performance enhancements are concerned, Vite is the best boilerplate for you.

2. Create React App

Create React App (CRA) is an open source tool built for easily creating new React projects. It is maintained and recommended by the React team at Facebook. As per the official documentation site:

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Create React App (CRA) has many built-in features that make the development process faster and more efficient. Here are some of the benefits of using CRA:

• Easy setup: CRA takes care of the initial setup for you and comes with many built-in features that can save you time during development. You won’t have to worry about configuring webpack or other build tools
• Longevity: CRA has been around longer than any other tool on this list. It has great documentation and an active community of users who can help answer questions and provide support
• Extensible: CRA is designed to be extensible, so you can add additional tools or features to your project if you need them. For example, if you need to add support for CSS pre-processors like Sass or Less, you can easily do so by installing the appropriate packages

Let’s now see how to create a React project with CRA.

Getting started with Create React App

In order to set up a new app using create-react-app , run the following command:

The npx command used here is different from the npm commands. npx stands for node package execute, which gets automatically installed onto the system with npm version 5.2.0 or higher. The specialty of the npx command is that it can execute any package from the npm repository without the need for installing the package beforehand.

That command creates a new folder called my-app in the current directory and sets up a React project inside that folder.

Over 200k developers use LogRocket to create better digital experiences

In order to run a development server and work on the app, we use the command:

When satisfied with the code changes, we can use:

This generates an optimized build folder that can be deployed wherever we want to host our app.

Main features of Create React App

• Choice of template by appending the create command with the --template flag:npx create-react-app my-app –template [template-name]
• TypeScript support by choosing the typescript template:npx create-react-app my-app –template typescript
• Support for modern JavaScript features like dynamic imports right out of the box, which greatly improves the dev experience
• Direct support for CSS files and CSS modules
• SCSS support with the help of node-sass
• Routing support using React Router and code splitting support through dynamic imports

Ejecting from Create React App

While the simplicity that Create React App brings to the table is much appreciated, there are some scenarios in which we need additional control over our codebase and its features.

To handle such scenarios, Create React App provides us with the ability to eject dependencies. We can customize the build tool or other configurations by running the script:

This one-way operation removes the single react-scripts dependency that did all the heavy lifting behind the scenes. It also brings back all the dependencies and transitive dependencies like webpack and Babel into the package.json where the user can have full control over them.

Dependencies before ejecting:

Dependencies after ejecting:

It is usually not very common to eject from Create React App but it is good to have that option if you know what you are doing.

• Officially recommended by the React team for bootstrapping React apps
• Covers all basic features without extra dependencies
• Includes comprehensive documentation site
• Large community behind the tool
• Not much control over the finer aspects of the repository (if not ejected)
• It relies heavily on older bundlers like webpack, which is slower compared to competitors like Turbopack and Rollup
• Slow development response times especially in large codebases

However, if you are looking for a trusted way to get started with React development without the hassle of having to do things yourself, then Create React App is the tool to use.

3. Create Next App

Create Next App is a modern solution for bootstrapping simple and advanced React apps using the Next.js framework. Next.js shines in a case where your app requires advanced rendering techniques like server-side rendering, static site generation, or even incremental static regeneration. Next.js can also be used to build single page applications (SPAs) like Vite and CRA.

Getting started with Create Next App

At the time of writing, the current version of Next.js (Next 13) has had some major changes, giving developers a choice between two variants:

• Next 13 (stable) : Traditional Next app that uses file-based routing with pages directory
• Next 13 App Router (beta) : A new approach using the app directory for file-based routing while implementing React Server Components

Depending on when you read this, the App router may be stable and widely adopted for creating new Next.js apps. But for this tutorial, we’ll go ahead with the stable version.

Run the following command in your terminal:

This will start the interactive CLI — similar to what we saw with create-vite — to help you easily scaffold your new Next project:

In the end, a new Next.js project should be set up. There are also options to bootstrap an app based on any example from the official documentation page by using the -e or the --example flag.

To start the dev server, run:

This brings up the homepage of the dev server:

Create Next App creates a folder structure that looks something like this:

Any JavaScript or TypeScript file created in the pages directory creates a route in the Next.js app with the same name as that of the file. Any required assets (like images) are to be placed inside of the public folder. CSS and Less are supported by default.

Main features of Create Next App

• File-based routing
• Static site generation is supported through the getStaticProps() method
• Server-side rendering through the getServerSideProps() method

N.B., If you end up going the Next App router way, keep in mind that getStaticPaths , getStaticProps , and getServerSideProps have all been dropped and replaced with a new technique to achieve the same thing.

• Supports all external packages that you would normally use in a React app
• Amazing documentation
• Built-in support for production concerns like image optimization, font hosting, and more
• No optimization for applications that require constant data fetching and refreshing
• The learning curve associated with adopting the React Server Components model and rendering methods unique to Next.js

With that in mind, if you’re looking to build a static site, a server-rendered site, or a basic one, then Next.js is your tool. It is also well-maintained and integrates well with other modern frontend tools — like Tailwind CSS and Tanstack Query. You won’t be disappointed taking this route.

5. React Starter Kit

React Starter Kit describes itself as the web’s most popular Jamstack frontend template (boilerplate) for building web applications with React. The homepage also mentions that React Starter Kit is highly opinionated, which means that it has already selected the tech stack for us, including GraphQL, MaterialUI, Firebase Auth, TypeScript, Vite, and more .

Getting started with React Starter Kit

In order to get started with the boilerplate, we need to clone the latest repository and use that as the starting point:

Then, move into the created folder and install the dependencies:

Start the dev server as follows:

That brings up the boilerplate homepage:

Main features of React Starter Kit

The main feature of this boilerplate is that it is highly feature-packed yet highly customizable. In addition to the exhaustive file structure that we get at repo setup:

And the number of scripts that we get out of the box:

The library also provides several recipes , which are like official guides that explain solutions to common problems while working with react-bootstrap , which makes it super handy.

• Isomorphic boilerplate, which takes into consideration the operations to be performed on the server (Node.js) like SSR
• Support for GraphQL through Apollo
• Recipes for implementing common use cases
• Large number of dependencies, which might bloat up the bundle size even if not used
• Highly opinionated and less flexible

With the advanced features React Starter Kit offers, you may like to try this out for building large-scale applications. However, this tool can be overwhelming if you’re just starting to learn React.

Razzle is a tool for building server-rendered universal JavaScript applications with no configuration. It is built on top of popular frontend frameworks like React, Vue, and Preact, and allows developers to easily create server-rendered applications that can be easily deployed to various hosting environments.

Getting started with Razzle

To get started with Razzle, run the the following command in a terminal:

This command will automatically install the project’s dependencies for you. Next, move into the created folder and run the development server:

N . B ., you may run into some issues with Webpack while trying to run the dev server 'ERR_OSSL_EVP_UNSUPPORTED' . This is a hashing error as Node no longer supports md4 as a hash function. In this case, start the server this way:

Main features of Razzle

• Universal Hot Module Replacement, so both the client and server update whenever you make edits with no restarts
• Comes with the same CSS setup as create-react-app
• Works with React , Preact , Reason-React , Angular , and Vue
• Escape hatches for customization via .babelrc and razzle.config.js
• Jest test runner setup with sensible defaults via razzle test

Strong points

• No configuration: One of the most significant advantages of Razzle is its zero-configuration approach. Developers can start building server-rendered applications with React or other front-end libraries without the need for any additional configuration or setup
• Universal rendering: Razzle makes it easy to build universal applications that can run on both the server and the client side. This allows developers to create fast, SEO-friendly applications that can be easily crawled and indexed by search engines
• Build optimizations: Razzle comes with a number of build optimizations that can help improve the performance of the application. These optimizations include code splitting, tree shaking, and compression

Weak points

• Limited customization: While the zero-configuration approach of Razzle is a strong point, it also means that there are limited options for customization. Developers who require more control over the build process may find Razzle’s approach limiting
• Limited plugins: Razzle has a limited set of plugins compared to other build tools like webpack. This means that developers may need to build custom plugins to achieve specific functionality
• Limited community support: Razzle is a relatively new tool, and as such, it has a smaller community compared to more established build tools like webpack. Also it’s documentation isn’t comprehensive enough, yet

With that, we wrap up the roundup for top React boilerplates in 2023. As we can see, each one of them comes with its own set of strengths and weaknesses. This means the choice that you will make will vary greatly based on the use case at hand and the desired end result. Luckily, you are not short of choices.

Get set up with LogRocket's modern React error tracking in minutes:

• Visit https://logrocket.com/signup/ to get an app ID

Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #create react app

Would you be interested in joining LogRocket's developer community?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Stop guessing about your digital experience with LogRocket

Recent posts:.

Nitro.js: Revolutionizing server-side JavaScript

Nitro.js is a solution in the server-side JavaScript landscape that offers features like universal deployment, auto-imports, and file-based routing.

How to display notification badges on PWAs using the Badging API

Ding! You got a notification, but does it cause a little bump of dopamine or a slow drag of cortisol? […]

JWT authentication: Best practices and when to use it

A guide for using JWT authentication to prevent basic security issues while understanding the shortcomings of JWTs.

Auth.js adoption guide: Overview, examples, and alternatives

Auth.js makes adding authentication to web apps easier and more secure. Let’s discuss why you should use it in your projects.

Leave a Reply Cancel reply

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Releases: Commencement-Technology/react-native-boilerplate-2

There aren’t any releases here.

You can create a release to package software, along with release notes and links to binary files, for other people to use. Learn more about releases in our docs .