For many years create-react-app was a go-to method for starting a React project. It was the easiest way for beginners to start a React project locally.
On March 16, 2023, React published new docs and dropped support for the old docs. In the new docs, they no longer recommend CRA as a solution for creating React applications. Let’s start with talking about what went wrong with CRA.
What are the problems with create-react-app
Performance:
CRA comes by default with 205 MBs on dependencies in node_modules. As opposed to its alternative Vite which has only 34 MBs.
Dependency size hurts not only us developers but also our users. This is what we deal with:
- Slower updates during development.
- The local server takes longer to start.
- Slower builds(this results in higher CI costs).
- Slower user experience for users.
The last part is the most detrimental. Remember that every time a user goes to your website. It waits for a server to send a full JS bundler. The bigger the bundler the longer the request will take.
This can drastically lower your conversions and be bad for SEO metrics like FCP or LCP[https://web.dev/lcp/].
Poly filling core node.js modules:
What is a polyfill? Polyfill is used to compile your code that won’t run in the browser and turn that into something that does. It’s used for old browsers that might not have support for new JS methods like Array.filter etc.
Node.js was created to be server-side javascript. Its internal modules like crypto and fs were never meant to be used in the browser.
This is an extremely bad pattern. These packages were never meant to run in a browser.
Luckily create-react-app v5 removed those polyfills. Although we can still find those bad patterns in older react repositories.
Custom configuration:
create-react-app comes with a lot of limitations. An example is using a library called Tailwind, because you can’t override the PostCSS configuration. You would have to do something called an eject.
What is an eject? Trust me you don’t want to know, but I will tell you anyway.
Eject means create-react-app drops all of the configuration files: Babel, Webpack and node_modules that it uses natively inside your code base.
After ejecting you will basically maintain a fork of CRA. This is a nightmare. That’s why tools like Craco came to help.
Craco stands for: Create react app configuration override. As it the name suggests it basically overrides the create-react-app configuration adding another layer of complexity on top.
You can imagine how horrible maintaining a project like this is. Every time something in CRA changes Craco has to change accordingly.
Alternatives:
Let’s give CRA a break and let’s talk about alternatives. New react docs recommend four technologies: NextJS, Remix, Gatsby, and Expo.
We will not talk about Expo as it’s mobile technology. I will also add one additional that in my opinion resembles CRA the most.
Next.js
NextJS is a full-stack React framework. Besides building user interfaces you can also create an API.
It’s maintained by a company Vercel which offers deployment services. They make it super easy to deploy the NextJS app onto their platform.
Remix
Remix is also a full-stack React framework. One of the more interesting features that it offers is nested routes.
One way nested routes can be very useful is parallel fetching. Multiple data sources are fetched in the same way, which gives a much better user experience.
Gatsby
Gatsby focuses on making it easy to integrate your app with a CMS. What’s nice about Gatsby is its GraphQL data layer. It helps you integrate content, APIs, and various services onto your application.
Vite
Vite isn’t recommended by React docs, but it’s the most similar to CRA, because it supports client-side rendering.
They make it super easy to start developing React projects locally. It offers all of the advanced features that you want from a development tool like HMR, super quick server starts, native TS support, etc.
Summary:
If you already know React. That’s great, but you need to know how to use this skill most effectively. create-react-app just doesn’t cut it anymore. The project was super important for the React ecosystem. We have to acknowledge how much it contributed.
I won’t tell you what to use instead, but I can tell you how I make choices currently.
If I need a frontend with an API. I go with NextJS.
If I need only frontend. I go with Vite with React.
You are free to use other tools highlighted here like Gatsby or Remix.