You are new to web development and want to learn react.js but most of the tutorials and even chatGPT tell you to use an official tool called create-react-app. But it's a trap, if you use it you already failed your react developer admission test. The problem with it is that it is slow in development and it is painful to integrate popular tools like TailwindCSS and TypeScript.
There are tons of better options to get started with react and the modern ecosystem. Let's have a look at the 5 better ways you can create a react app without CREATE-REACT-APP.
1. Instant Development Environment
Absolute easiest way to experiment and start learning to react or any frontend framework is with an instant development environment like StackBlitz and CodeSandbox. These are web-based tools which allow you to run react in a browser without needing to manually install many of the dependencies on the system and deal with the things like module bundlers.
These are powered by web containers so you can even run backend code like node.js, next.js and the entire development environment spins up in milliseconds
You can continue your work even when you lose the Internet connection midway and your apps never go to sleep and have no bandwidth limits - share the URL with as many friends, colleagues, and communities as you’d like!
2. Vite
Vite is a build tool that aims to faster and leaner development experience for modern projects. Vite aims to address performance issues like unreasonably long wait(sometimes up to minutes) to spin up a dev server and hot module replacements(HMR), file edits which takes a couple of seconds to reflect in the browser. The slow feedback loop can greatly affect developers' productivity and happiness.
Vite supports importing .ts files out of the box. It uses esbuild to transpile TypeScript into JavaScript which is about 20~30x faster than vanilla tsc. The HMR updates can reflect in the browser in under 50ms.
Vite has low-level API for server rendering which is a great option for SPAs
3. Nx
Nx can build standalone react apps along with extra features that you won't find in vite.
You have the option to choose your own bundlers like webpack and RS while setting up your project. It is set up with TypeScript by default and you can also choose your preferred CSS preprocessors like SASS, LESS, styled-components etc.
Its main features are all about scaling complexity like it does task caching and can even distribute that cache on the cloud which means another team member or continuous integration server on the other side of the world can use the computation in the cache instead of doing the same work over and over again.
4. NEXT.JS
If you want more that just the single page application then the react rendering framework Next.js comes in. Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.
Building an app with Next.js provides you with special directories like Pages or app that can structure routing for a multi-page app. Pages can be rendered on the server to improve the SEO and performance.
Other main features include image optimization and middleware that you likely want on a serious production project.
5. Remix
Next.js and Remix are competing for last couple of years which is awesome for react developers because now you have two excellent rendering frameworks to choose from. Biggest difference is related to data fetching, Next.js use react server component while remix does not.
Both frameworks solve many of the same problems but there are many subtle differences in the developer experience. For example features like nested layouts and streaming are in beta in Next.js while they are fully stable in Remix so it is one step ahead of the game here when it comes to innovation.
Top comments (1)
Absolutely agree and everyone should use vite, or a framework like nextjs. However I do want to mention that there IS infact a typescript template for CRA: create-react-app.dev/docs/adding-t...