If you were looking to start writing with React today and visited the React website, the Create a new React App page would give you a few options for getting started. The React team recommends NextJS for a server side rendered app, Gatsby for a static site, and Create React App for a client side rendered SPA. But is Create React App really the option that should be recommended for CSR and new users?
What is Create React App?
Create React App (CRA) is a templated project for getting started with React. A react-scripts package will install a
set of other packages to compliment it. You can be up and running in minutes and writing code. But on the downside
you'll have a large amount of node packages installed that are not needed if you'd set it up manually.
Why should you use CRA?
CRA is a Client Side Rendering library, which means that everything renders in the browser. This can be great for a simple Single Page Application but isn't good for SEO, metadata or first load performance. If you want to share content from your side on social media, use SEO to get customers in or have standalone pages that render fast then NextJS is a better option.
What's the issue with CRA?
One of the biggest issues with CRA is that it doesn't work correctly with all other packages. This is obviously
something that can happen with other libraries, but CRA what the whole project relies upon. If you want to get around
this, then you have to eject the app and manage everything yourself. With CRA's react-scripts defining a lot of
package requirements with specific versions this means that you can't use the latest versions of libraries and if you're
going to eject the app then you're going to have to manually manage all those packages. It's a massive time drain.
What's the alternative to CRA?
As mentioned above, CRA is a Client Side Rendering (CSR) based library. If you wanted an alternative CSR then I'd recommend Vite. Vite is lean CSR which serves with native EcmaScript Modules. It does not involve bundling with tools like Webpack, so it's fast to start. It supports Hot Module Replacement so as you write your app you'll see the browser you'll see it update without a full reload, and it'll only update what has changed.
Is CRA actually dead?
The simple answer to this is no. The team behind CRA is working to catch up to all the other frameworks and libraries that have progressed at lightening speeds whilst CRA has be gathering dust on the shelf. But if others are offering a managed solution why don't Facebook leave it to others to offer a starting point? Well I think it is because they want something simple to offer starters who can then progress onwards, but in reality devs are picking up React with CRA, building full projects with it and then realising that there were better options to choose and then having to claw back time to migrate to frameworks like NextJS, Astro or Vite. So may Facebook can add a warning next to CRA whilst it's still the CRAp option?