Top 7 Ways to Create React App — without using create-react-app

What is the best tool for starting a new React project in 2023?

You are new to web development and want to learn ReactJS. Most 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've already failed your react developer admissions test, and as a punishment, you need to learn ember.js. Bloggers and YouTubers have been warning people against create-react-app for quite a while. But the discussion heated up with a pull request(Link) from Theo Browne suggesting the removal of this tool from the official React documentation altogether. Dan Abramov from the React team responded with five different potential options to salvage the shrinking ship.

But what's with all the hostility in the first place? The problem with it is that it’s slow in development and is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just a ton of better options to get started with React and the modern ecosystem. In this post, we will examine seven ways to create a React app without create-react-app and examine the trade-offs so you can choose the optimal tool for the type of app you are building.

1. StackBlitz Or CodeSandbox — Instant Development Environment

The absolute easiest way to experiment and start learning React or any front-end framework is with an instant development environment like StackBlitz or CodeSandbox. These are web-based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things like module bundlers. You just clicked a button, and now you are building a React app. It also has the added benefit of being easily shareable, so you can access it from any computer. This technology has come a long way in the last couple of years, and you can even run backend code like node.js and nextJs thanks to web containers. Overall, this is a great choice for learning and prototyping. But if you’re building a serious app, you’ll need a dedicated build tool to manage it, and this is where decision-making gets tricky.

• StackBlitz | Instant Dev Environments | Click. Code. Done. - StackBlitz
• CodeSandbox: Code, Review and Deploy in Record Time

2. Vite — Next Generation Frontend Tooling

The next tool we’ll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or two if you’re already familiar with create-react-app. Vite is the closest thing to a one-to-one replacement for it; however, it’s way faster in development because it builds your application on demand with tools like native ES modules and Esbuild that just scale way better for big projects, and as of a few weeks ago you can use SWC instead of Babel, which is a much faster rust-based compiler it uses to roll up for module bundling as opposed to Webpack and CRA. It also has a typescript template out of the box and should support any modern libraries that you want to use. What’s important to understand, though, is that it provides a starting point for building a single-page application; unlike react rendering frameworks like Next.js, it doesn’t deal with server-side rendering or routing, at least out of the box. Vite does have a low-level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who know what the hell they’re doing and don’t want to use a React rendering framework for whatever reason. The bottom line is that Vite is a great option when building a single-page application with React, but there’s another awesome tool as well.

Vite

3. NX — Smart, Fast, Extensible Build System

The next tool we’ll look at is called NX, which can build standalone React apps along with some extra features that you won’t find in Vite. NX is a tool known for building Monorepos, but its CLI can also build plain React apps that have nothing to do with Monorepos. What’s cool about it is that when you set up a new project, you have the option to choose your own bundlers, like Vite or Webpack, or bundlers of the future, like RS Pack, which is a rust-based replacement for Webpack; it’s set up with typescript by default, and you can also choose a CSS preprocessor. Its killer features, though, are all about scaling complexity, like task caching, and it can even distribute that cache on the cloud, which means when another team member or continuous integration server on the other side of the world builds the app, it’ll use the computation in the cache to do the same work over and over again. That can be a game changer for large teams, but even if you’re an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate for components and libraries. From there, you can visualize how all your code is related to the NX graph command, and finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI (continuous integration) workflow. You just choose a provider, and it writes all the boring and error-prone configurations for you. That’s pretty cool, and NX can be used in other React frameworks as well.

Nx: Smart, Fast and Extensible Build System

4. Next.js by Vercel — The React Framework

If you want more than just a single-page application, that’s where react rendering frameworks, also known as meta frameworks, come in, with the most popular option being Next.js. The main difference when building a Next.js app is that you have a special direct resource like Pages or an app that can structure routing for a multi-page application, and Pages can be rendered on the server to improve search engine optimization and performance. It also does server-side data fetching with React server components to build full-stack applications with minimal external dependencies. Here, we’re using async await in a component that can run universally both on the client and server, and it provides tons of other features like image optimization and middleware that you likely want on a serious production project, but Next is not the only game in town.

Next.js by Vercel - The React Framework

5. Remix — Build Better Websites

Remix is a similar framework that was recently acquired by Shopify and provides many of the same features, like file system-based routing. Next.js and Remix have been competing over the last couple of years, which is awesome for React developers because now we have two excellent rendering frameworks to choose from. The biggest difference is related to data fetching; Next.js uses React server components, while Remix does not. Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience. At this time, features like nested layouts and streaming are in beta in Next.js, while they’re fully stable in Remix.

Remix - Build Better Websites

6. Gatsby: The Fastest Frontend for the Headless Web

Another React rendering framework to think about is Gatsby. It's not as hyped up as it used to be, but it was just acquired a couple of days ago by Netlify. Originally, it was popular for building content-heavy, statically generated sites, but it also supports server-side rendering, just like Next.js and Remix. The most striking difference is its focus on GraphQL to provide a data layer for your application. This thing called the Valhalla Content Hub creates a single GraphQL API for all your data sources that can be accessed with zero configuration from a Gatsby front-end. If you’re looking to migrate a content-driven app to React, Gatsby has many more tools to make that process happen faster.

The Fastest Frontend for the Headless Web | Gatsby

7. Astro — Build the web you want

Although another great option for a content-heavy site is Astro, unlike all the other frameworks we’ve looked at, Astro is not exclusive to React; it can also be used with spelt view and solid or all these frameworks simultaneously. React is most useful for building highly interactive user interfaces. But in most frameworks, React takes over the entire DOM. On the other hand, Astro has its own templating language for handling most of your static content. Thanks to its island's architecture, you can sprinkle in interactivity as needed. Not only does this simplify your code, but it also results in huge performance gains because, in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster. It also just released version 2.1 has a new feature called content collections, where actual markdown content adheres to a schema, allowing content-heavy websites to scale up safely.

Astro

In conclusion, now you have seven different ways to create a React app without using create-react-app. The most important thing is choosing the best way for you. Thank you.

Top 7 Ways to Create React App — without using create-react-app was originally published in Enlear Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.