Best 4 Alternatives to Create React App

Pieces 🌟 - Oct 13 '22 - - Dev Community

Someone working at a laptop.

React is a JavaScript framework that aims to simplify the building of graphical user interfaces. After being developed at Facebook, React was released to the public in 2013. React is now the engine behind several of the most well-known applications, including Instagram, Facebook and countless others. The recommended method to begin developing a new single-page application in React is with Create React App, which provides a we​​lcoming learning environment for the technology, but in this article, we’ll look at alternatives to Create React App and explore their strengths and weaknesses.

What is Create React App?

Create React App (CRA), the official script recommended by the React team, is the best option for launching React applications. The official documentation website states the following:

Create React App is an officially supported platform for creating single-page React applications. It offers a modern build setup with no configuration.

Get Started

Run the following command to create a new app using create-react-app in npm:

$ npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

This command creates a React app project inside the folder called my-app.

With the npm command below, we'll launch a server and start developing our app.

$ npm start
Enter fullscreen mode Exit fullscreen mode

A successful use of create React app.

Pros and Cons of Create React App

Pros

  • It’s the React team’s official recommendation for bootstrapping React apps.
  • It covers all fundamental functionality without additional dependencies.
  • It includes a thorough documentation website.
  • Create React App provides developer-friendly setup options.

Cons

  • It is difficult to add custom build configurations.

Best 4 Alternatives to Create React App

1) Create Next App

A wonderful alternative to create React app, Create Next App is ideal for getting started if the demand is a little more sophisticated, such as with server-side rendering or static site creation. It’s a respectable way to bootstrap a generic SPA with client-side rendering. It is a straightforward CLI tool for starting Next.js applications.

Get Started

We only need to execute the following command to produce the boilerplate:

$ npx create-next-app@latest next-app
Enter fullscreen mode Exit fullscreen mode

To start a dev server, we run:

$ cd next-app
$ npm run dev
Enter fullscreen mode Exit fullscreen mode

Successful use of create next app.

Pros and Cons of Create Next App

Pros

  • It provides support for a quick refresh and fetch right out-of-the-box.
  • It allows server-side rendering through the getServerSideProps() method.

Cons

  • There is no optimization for programs that demand continuous data retrieval.
  • There is a learning curve related to SSR features.

2) React Boilerplate

React Boilerplate is a fantastic Create React App alternative for setting up a project. On its main page, React Boilerplate touts its accessibility through its app even with no network connection and positions itself as the future of fast web apps.

Get Started

React Boilerplate’s method to set up a new code repository is slightly different, even though the fundamental idea on which the library is constructed is the same as that of others. To begin, we must clone the setup repository:

$ git clone https://github.com/react-boilerplate/react-boilerplate.git      
my-react-boilerplate
Enter fullscreen mode Exit fullscreen mode

Run this setup script when entering the cloned repository:

$ cd my-react-boilerplate
$ npm run setup
Enter fullscreen mode Exit fullscreen mode

Then comes the start script, which starts the development server:

$ npm start
Enter fullscreen mode Exit fullscreen mode

This brings up the default homepage:

Successful use of React Boilerplate, a strong alternative to Create React App.

Pros and Cons of React Boilerplate

Pros

  • Development is easier with support for contemporary JavaScript features like dynamic imports.
  • It offers support for CSS modules and files directly and SCSS using node-sass.
  • It has code splitting support with dynamic imports and React Router-based routing support.

Cons

  • It’s outdated; the repository's most recent commit was in April 2019.
  • It is strongly opinionated.
  • It has an extremely large package library.

3) Vite

Vite is a relatively new contender in the front end framework tools arena. With the addition of templates that support Vue, React and Preact, Vite is a universal solution to bootstrap applications from a variety of tech stacks and one of the strongest alternatives to Create React App.

Get Started

To generate the boilerplate, we just need to run the following command:

$ npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

After providing your “Project name,” you’ll be prompted to select a framework:

Selecting a framework in Vite.

When you choose the React option, a new React project will be created in the directory. We must enter the directory and install the vite package as a dev dependency after the repository has been configured:

$ cd react-vite
$ npm install
Enter fullscreen mode Exit fullscreen mode

Then, execute the following dev script:

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

This brings up the default UI at 127.0.0.1:5173 or localhost:3000 depending on your Node.js/Vite version.

A successful project setup with Vite.

Pros and Cons of Vite

Pros

  • Its primary emphasis is on the developer experience (DX).
  • It offers support for React and Typescript.
  • Vite enables automatic build optimization.
  • It offers support for preprocessors and CSS import with CSS modules.
  • It offers support for Wasm and web workers.

Cons

  • The building process is based on cutting-edge technologies, so it could be challenging to modify as needed.
  • Importing SVG files as React Components is impossible without plugins.
  • It is mandatory to “Import React” into every JSX file.
  • It supports only JSX files for React.

4) React Starter Kit

Let's look at React Starter Kit, which bills itself as an isomorphic web project boilerplate and one of the strongest Create React App alternatives. Additionally, the React Starter Kit is described as, “very opinionated” on its webpage; this is because it has already chosen our tech stack for us, which consists of Node.js, Express and GraphQL.

Get Started

We’ll clone the most recent repository in order to serve as the starting point for the boilerplate:

$ git clone https://github.com/kriasoft/react-firebase-starter.git example
Enter fullscreen mode Exit fullscreen mode

Install the dependencies with yarn by first moving them into the newly created folder:

$ cd example
$ yarn install
Enter fullscreen mode Exit fullscreen mode

Also, launch the development server as follows:

$ yarn start
Enter fullscreen mode Exit fullscreen mode

That gives us the simple boilerplate homepage we have here:

Successful project setup with React Starter Kit.

Pros and Cons of React Starter Kit

Pros

  • It’s an isomorphic boilerplate that considers the server (Node.js) activities that need to be carried out, such as with SSR.
  • React Starter Kit offers support for GraphQL through Apollo.
  • It provides recipes for implementing typical use cases.
  • It enables Enzyme's React testing and Flow's static type checking.

Cons

  • It has a large number of dependencies.
  • Its package size is extremely large.
  • It is very opinionated.

Conclusion: What are the best Alternatives to Create React App?

As we can see, each Create React App alternative has a unique set of advantages and disadvantages. As a result, a variety of decisions need to be made depending on the use case, the developer and the desired outcome. So, while every alternative discussed in this article will work, it’s up to you to determine the best one for your project.

Image
10 Dripping Coffee Machine Tricks All Experts Recommend
Image
Are You Responsible For An Best Accident Lawyers Budget? 10 Unfortunate Ways To Spend Your Money
Image
Why Redis? An Intro with Practical Use Cases for Developers

redis, webdev, database, learning
Image
هو منصة خدمية متخصصة تجمع بين مختلف الخ
Image
The Reasons You Shouldn't Think About The Need To Improve Your Mobility Scooters For Sale Online
Image
keuntungan akses games slots online lewat mobile-phone
Image
5 Laws That Will Help With The Mesothelioma And Asbestos Lawyers Industry
Image
Mastering Processes: The Ultimate Guide to Understanding and Managing System Operations

tutorial, computerscience, programming, softwareengineering
Image
Cara Main Judi Online Supaya Menang Selalu
Image
Blockchain Developer

hiring
Image
Python : Basics Concepts in Arithmetic, Data Types, and Conditional Logic

programming, python, beginners
Image
slots online tenar buat dimainkan di fitur mobile
Image
Jak Wyciszyć Ściany i Zyskać Spokój w Domu
Image
Recursively rendering comments for a developer content creation site ♻️

webdev, computerscience, react, django
Image
A Comprehensive Guide to Creating and Optimizing Grafana Dashboards

webdev, javascript, programming
Image
5 Asbestos Claims Payout Projects For Any Budget
Image
What Accident Lawyer Should Be Your Next Big Obsession?
Image
How To Beat Your Boss On Electric Wall Mounted Fire Place
Image
10 Best Mobile Apps For Spare Truck Key
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .