Bloggers and YouTubers have been for a while now advocating against
create-react- app and this discussion heated up when a pull request in the react public repo suggested the removal of CRA altogether.
Here is why CRA is met with such harsh hostility, to begin with:
Slow - Build time increases dramatically in a large project, especially during development. A small change like editing a h1 tag can take a couple of seconds to minutes which affects the overall development experience.
Limited Customization - While CRA offers an excellent out-of-the-box development experience, Projects requiring custom webpack configurations, or specific setups such as server-side rendering (SSR) or static site generation (SSG), might find CRA limiting.
Limited integrations- CRA does not provide built-in support for CSS pre-processors like Sass, third-party libraries and tools like Tailwind.
Large bundle size - CRA includes a lot of dependencies, some of which you may not need for your project. This intern increases the load time, especially in slower internet connectivity.
Better options
Alternatives to Create-React-App
Vite
Vite is a French word which means quick. And true to its word Vite is blazing fast, offering near-instantaneous hot module replacement(HMR) and build time.
It comes with built-in support for popular frameworks and tools and utilizes ES modules which also contributes to faster browser loading time.
This and its simplicity have seen its popularity rise to be among the most preferred tools in the community.
To get started:
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
Remix is usually described as;
An edge native, full stack JavaScript framework for building modern, fast, and resilient user experiences. It unifies the client and server with web standards so you can think less about code and more about your product.
Remix offers both server-side(SSR) and static site generation(SSG). This enables seamless integrations for both frontend and backend logic allowing for full-stack development in a single codebase.
It also provides out-of-the-box SEO benefits due to its server-rendered content.
One thing that makes it stand out is that users get to experience fast performance even on slow networks.
npx create-remix@latest
cd my-remix-app
npm install
npm run dev
This will generate the default Typescript app and you can also generate an empty repo while at it.
Next.js was built by the Vercel and they proudly describe it as;
The React Framework for Production.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
To add on to that, Next offers simple, flexible routing that caters to both static and dynamic page generation.
It also provides automatic image optimization with lazy loading and support for popular image formats.
API routes are easily created alongside your application to handle backend functionality and the speeds are pretty optimized.
To get started;
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
Gatsby
The name "Gatsby" comes from "The Great Gatsby" novel by F. Scott Fitzgerald. It reflects the project's focus on speed, elegance, and the promise of a better future.
While Gatsby is often associated with blogs and portfolio sites, it's suitable for building e-commerce platforms, documentation sites etc.
It also supports the creation of PWA making them more reliable and engaging to users offline.
To add to this, Gatsby has a rich plugin ecosystem for various functionalities from SEO to image optimization.
It also integrates seamlessly with GraphQL, enabling easy data sourcing and manipulation.
To get started;
npm init gatsby
cd my-gatsby-site
npm run develop
NX Cloud
NX was founded by former Google Angular team members Jeff Cross and Victor Savkin.
NX has revolutionized mono-repo development by providing a powerful combination of efficiency, scalability, powerful code generation capabilities and its famous built-in CI/CD capabilities resulting in faster more reliable delivery.
This makes it ideal for large-scale apps.
NX also supports frameworks like React, Vue, Angular and Nodejs. And you have the option to choose your own bundler, do task catching and choose your own CSS pre-processor.
They continue to push the boundaries of what's possible in the world of modern web development.
To get started;
npx create-nx-workspace@latest
cd my-nx-app
nx serve
Astro
Astro is well known a static site generator which is incredibly fast, delivering a near instantaneous hot reload experience.
It was coined by the team behind ZEIT and Next.js aiming to provide a simple, fast and scalable alternative to the traditional static site generators.
It allows developers to build websites using modern web components, making it highly flexible and reusable.
It's also considered for full-stack development as it supports hybrid rendering, enabling developers to choose the right rendering approach (server-side, client-side, or static) for each page or component.
Astro requires zero configurations. You just focus on building great websites and web applications without worrying about build tools or configuration settings.
To get started;
npm create astro@latest
cd ./capricious-corot
npm run dev
Conclusion
In conclusion, while Create React App has its limitations, there was a time when it was a staple in the React ecosystem and with good reason. It has contributed to many successful projects and Fortune 500 companies since its inception.
However, as technology evolves, it's crucial to explore and adapt to newer and more efficient tools.
These alternatives offer developers a wide range of options to choose from, each tailored to their specific project requirements. Choose what works best for you.
Thank you!