Creating a React app without CRA (Create React App) has become necessary after React announced that it will no longer be supported. With over 450 open pull requests on its repository and no updates, React developers have had to seek alternatives to bootstrap their favorite React application folders.
The alternatives recommended by the new React documentation are other React-powered frameworks, but one popular alternative that has been widely adopted by many individuals is Vite+React. Let's just say it's supafast (get it? 😂).
In this article, we'll cover the new alternatives for creating a React app. These methods offer advanced features, a flexible and customizable development experience, and are actively maintained.
Vite+React:
Vite + React is a great alternative to CRA, it offers superior performance and faster development time. Unlike CRA, which can experience progressive speed and performance deterioration as an application grows in size and complexity, Vite is built on top of esbuild (a JavaScript bundler, like Webpack but better!).
Vite uses the browser's native ESM to parse and compile code as it is requested. It also provides extensive plugin compatibility and faster updates compared to even CRA, making it a more efficient and effective choice for building React applications.
Another benefit of using Vite + React is that it allows for faster build times, eliminating the need for a separate build step. Vite uses the browser's native ESM to parse and compile code on-demand, meaning you can see changes immediately upon starting development without waiting for a build to finish.
Additionally, Vite supports environment variables (such as .env) that can be used to configure your application based on the environment it is running in, which is useful for both development and production. Overall, Vite + React is a great alternative to Create React App because it offers faster development times, better performance, a more efficient build process, compatibility and support for environment variables, making it a powerful and flexible option for building new React applications.
Here are the command steps to create a Vite + React app:
You can directly create a react app and specify the project name via the command line options.
# Create Vite + React app using npm
npm create vite@latest react-vite-app -- --template react-ts
# Create Vite + React app using yarn
yarn create vite react-vite-app --template
# Create Vite + React app using pnpm
pnpm create vite react-vite-app --template
Check out the Vite docs and try it out yourself!
Next.js:
Next.js is another excellent approach because of its robust, well-rounded ecosystem as a React-powered framework itself.
It is a frontend framework designed to improve the performance, user experience, and SEO of web applications. It provides an out-of-the-box solution for server-side rendering (SSR) of React components, allowing simple indexable HTML to be sent to the user, which improves visibility in search engines.
Next.js also offers features like incremental static regeneration (ISR) and static site generation (SSG) that can improve the speed of a website. However, it is worth noting that Next.js is less suitable for interactive web applications that takes a lot of user input.
It is easily considered one of the most popular tools in the React ecosystem and is used by many leading companies. Next.js provides a simple, easy-to-use development environment that allows developers to focus on writing code rather than configuring build tools. It comes with a built-in development server, Hot Module Replacement (HMR), and automatic code splitting, all of which speeds up development time.
I have tried both the Next.js approach and the Vite+React approach, and I must say they both have their use cases. Vite+React is simple and fast, with a fast development server, making it ideal for interactive web applications. On the other hand, Next.js provides an out-of-the-box solution for server-side rendering of React components.
Depending on your application's requirements, either of the two approaches could be suitable. Next.js can improve site performance, the user experience, and SEO of web applications. It offers features for incremental static regeneration and static site generation, and since it's also built on top of React, it is compatible with popular React tools. It is production-ready and provides a simple development environment.
Read the Next.js docs to see how you can get started:
# Create Next.js app via npm
npx create-next-app@latest --ts
# Create Next.js app via yarn
yarn create next-app --typescript
# Create Next.js app via pnpm
pnpm create next-app --ts
Using, T3 Stack:
An alternative I have yet to extensively explore is the T3 Stack. but after long hours of research and going through it documentations.
T3 Stack is an awesome approach to bootstrap a full-stack React/Next application. It focuses on simplicity, modularity, and full-stack type safety. The core components of the stack include Next.js, a React-powered JavaScript framework for server-side rendering of React components and TypeScript. Other popular additions to the stack include Tailwind CSS, a utility-first CSS framework, and tRPC, a library for building type-safe remote procedures.
The T3 stack is designed to be modular, allowing developers to mix and match, replace different pieces as needed for their specific projects. T3 Stack emphasizes TypeScript type safety as a non-optional feature.
Learn more about T3 Stack in the T3 Stack docs:
# Create T3 Stack via npm
npm create t3-app@latest
# Create T3 Stack app via yarn
yarn create t3-app
# Create T3 Stack app via pnpm
pnpm create t3-app
Dan Abramov*, co-author of Redux and Create React App, explained the plans for CRA.* Read the full discussion here.
Conclusion:
The React CRA should necessarily not be seen as dead. However, with the availability of these alternatives and actively maintained tools, new and existing React developers can explore an equally good or even better and well-maintained development experience.
Dan in his explanation above, explained the past, future and current plans for CRA.
also, let me know if you got the little joke above 😉