Remix — The New Create React App

Rate this content
Bookmark

Create React App (CRA) was a game changer in garnering React adoption. Prior to the release of CRA, the experience of setting up a React app was more about configuring webpack than it was actually writing React code.

Now that the React docs no longer list CRA as a suggestion on the “Start a New React Project” page, and additionally recommend you pick a React-powered framework, the getting started experience is once again fragmented.

CRA was never meant to be how you built a full-featured React app anyway. It was a starting point, and a really good one. Inevitably many developers (such as myself) used CRA to build websites, and lots of them. However, a lot more goes into building a website than just using a “library for web and native user interfaces” — you need to handle routing, data fetching and mutations, styling, and a whole lot more.

I believe Remix is the best framework available for taking up this mantle. Built on top of React Router, the most widely used routing solution in the React ecosystem, powered by Vite, and now with an option to build pure SPAs (like CRA), Remix is well poised as the best starting point to start React apps of all varieties.

In this talk I plan to show the story of how Remix has evolved into the CRA replacement, how you can easily migrate from a CRA or React Router project, and how Remix will bring you into the future of React.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

FAQ

Create React App 2.0, also referred to as the new Create React App, is an updated version of the original Create React App by the Facebook team. It aims to provide a zero-configuration setup, a single dependency (React scripts), and an exit strategy for more complex configurations.

Remix is a framework built on top of React Router that offers solutions for code splitting, routing, data fetching, and generating HTML. It aims to be the new Create React App by providing an easy way to get started with React while offering advanced features and a good community buy-in.

Yes, Remix is being merged into React Router to create a unified framework that incorporates the best features of both. React Router 7 will include everything that Remix offers, making it easier for developers to migrate and upgrade their projects.

The new Create React App should make it easy to get started with React, offer solutions for code splitting, routing, data fetching, and generating HTML, stay up-to-date with the latest React features, and have good community buy-in and a defined future.

Migrating from Remix SPA mode to Server-Side Rendering (SSR) is straightforward and requires just a one-line change in configuration. However, you will need to ensure your application is compatible with SSR by checking dependencies on browser-specific APIs like 'window'.

Create React App was deprecated because it was not actively worked on and didn't keep up with modern development requirements. The React team's documentation no longer recommends using it as a starting point for new React applications.

Vite is a build tool that originated from the Vue ecosystem but has gained widespread adoption in the React community. It offers a simpler configuration, faster build times, and a more flexible plugin system compared to Create React App.

The Remix branding is not disappearing. While Remix features are being merged into React Router, the Remix brand will continue to exist and will be used for a new RSC-first (React Server Components) framework in the future.

Dan Abramov and Chris Bruchardo, core members of the React team, created Create React App with the vision of making it the blessed getting started experience for building single-page applications (SPAs) in React.

Vite has largely replaced Create React App as the preferred tool for setting up new React projects. It offers a simple configuration, a single dependency, and a plugin system that allows for more flexibility without the need for an explicit 'eject' strategy.

Brooks Lybrand
Brooks Lybrand
30 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the transition from Create React App to Vite as a more sustainable and popular alternative. Vite is praised for its simplicity, minimal dependencies, and exit strategy. The speaker emphasizes the importance of frameworks like Remix and React Router in providing solutions for common development challenges. The focus is on merging Remix into React Router to create a unified framework, with an emphasis on code splitting, routing, data fetching, and generating HTML. The future direction includes completing React Router 7 and reserving Remix for a different framework build.
Available in Español: Remix - La Nueva Create React App

1. Introduction to Create React app

Short description:

I want to talk about the new Create React app. My name is Brooks Libran, and I work on the Remix team. Have you ever found yourself in this situation where you want to try out the hot new UI library, React?

I today want to talk about the new Create React app. I should have called it Create React app 2.0. I like that. That's a good title, too. I'm going to stick with this one, the new Create React app. And I do need to focus keynotes, so I can actually move through it.

My name is Brooks Libran. You can find me on Twitter and Discord and GitHub at Brooks Libran. That's pretty much it for about everything. I work on the Remix team as the developer relations manager for React router, which is by the Remix team, which is from Shopify. Just to make it really, really clear. In fact, I took a crack at updating our logo. Please don't tell Ryan Florence I did this, because he will get really mad at me. I've messed up our logo so many times, and he's very particular about how it looks. And this is definitely wrong for a couple of reasons.

So here's my question. Has this ever happened to you? Have you ever found yourself in this situation where you want to try out the hot new UI library, React? You've been hearing a lot about it. It's been getting some attraction. But you don't want to spend forever configuring web pack and Babel and all these ridiculous things. You just want to build something.

2. Benefits of create React app

Short description:

You want to build your application with a good set of defaults. You want the ability to eject if needed. Introducing create React app, the default way to build a React app in 2016. It provides a better starting experience and makes it easy to get started with React.

You just want to build your application. And you want a good set of defaults so you can just get started. You don't want to be thinking about all the different stuff you have to set up. You just want it to be set up so you can get started building your application.

And you don't want to be locked in. You do want an option to eject from this nice, pure world if you need to add some more complicated stuff. Maybe eventually you do finally learn how web pack actually works, and you can decipher the documentation that you want the ability to eject. Also pretend that it's 2016, and this statement probably makes a lot more sense. So if this is true of you in 2016, well, I have great news.

Introducing create React app from the Facebook team. This is the default way to build a React app in 2016 at this time. The way that you would start a React app, for the most part, especially a new, fresh one, a pure spa, where everything is client-side and it's beautiful and jamstack is coming and it's going to save all the problems, the way that you would do this is you would typically copy and paste from someone else's starter kit or maybe cobble together a web pack and double yourself. And it was a very, very bad starting experience.

So the meta team at Facebook decided to build create React app as the de facto starting point. And it was very successful. So Dan Abramov and Chris Bruchardo, two of the kind of core members of the React team, kind of created this, and they set out with this vision, this goal, that this would be the blessed getting started experience for building spas in React that you can actually ship. You can actually ship these spas. It's not just like a demo thing. We want create React app to be a starting point where you can actually just go ahead and build and put this up on any sort of static server. And so the goal, like I said, was to make it very easy to get started with React.

QnA