Create-React-App, or CRA, is the "de-facto" starting point for creating React applications. It is supported by Facebook and the React team itself, but it has some drawbacks.
CRA is meant for a single entrypoint, and to be deployed at a static server. It means that if you have a big website with multiple routes, you will find yourself sending your entire front-end application to the client. In Remastered, every route has its own JS chunk, which will be downloaded when the user visits it. No more overfetching and slow mobile experiences!
CRA does not support file-system routing and does not have a built-in router, which is an integral part of any website and system. This means, that in every new project, you will have to choose and implement a routing solution. It is also the reason some some modern don't store the state and routes in the URL, making sharing links harder — creating a correlation between modern apps and bad sharing experience. In Remastered, the router is deeply integrated. URLs are not an afterthought. File-system routing is applied to allow you prototype your app as fast as you can!
Since CRA is meant to be statically hosted after build-time, it does not have any notion of data-fetching nor an API endpoint. Therefore, CRA suggests that the front-end team should be separate from the back-end team and will eventually make shipping harder. Remastered can be used both ways, but when starting a fresh project, one developer can own the entire stack -- both the front-end AND the back-end, without sacrificing developer experience and user experience.
CRA is using Webpack, a widely used JS bundler. It also uses Babel to transform modern JS and TypeScript into JS code that current browsers can use. In development, CRA will bundle your app so you can work on it locally, with HMR enabled. Bundling your app in development means that Webpack will have to bundle your entire application, making the boot-time very slow and will get slower as your application gets larger. with Remastered, on the other hand, is using Vite and esbuild to serve, bundle and transform your codebase. In development, Vite acts as an ES-module server and does not bundle your app at all in development, which makes development snappy and fast no matter what size is your app.
| Remastered | Create React App | |
|---|---|---|
| Development server | ✅ Vite (& esbuild) which provides HMR that stays fast no matter on app size | ⚠️ Webpack, which can get slower as app becomes bigger in code size |
| Production build | ✅ Vite (& rollup) | ✅ Webpack 5 |
| File-system routing | ✅ | ❌ |
| Router | ✅ [React Router], the de-facto standard router for React apps | ❌ No routing solution, bring-your-own-router |
| Nested routes | ✅ Best for accessibility | ❌ |
| Co-located API endpoints | ✅ Actions are implemented to co-locate mutation endpoints | ❌ No back-end function at all, you must develop an external API |
| Hassle-free data fetching | ✅ Loaders are implemented to co-locate data fetching | ❌ CRA forces you to use useEffect and build your own data-fetching mechanism |
| Multiple entrypoints | ✅ | ❌ |
This page was generated with Remastered v0.1.34 at
Wanna talk? Feel free to tweet at @galstar.