Vite makes React dev fast. Like really fast. With HMR, changes you make trigger rerenders within milliseconds which makes prototyping UIs really quick. With that in mind, we decided to rewrite our React template using Vite and we were shocked to see just how much faster it was. Here's what it looks like next to our old CRA template:
Create React App vs Vite React on @replit.— Amjad Masad ⠕ (@amasad) January 30, 2021
Vite ran before the container could even boot CRA files. pic.twitter.com/lZe87brsjv
Over the last few weeks, our new React template has helped our designers prototype complex UI components and enabled many of our engineering candidates to build out an entire web app in just a few hours during our (virtual) onsites. When you see it in action, it's easy to see why:
How it works
It then serves your source code over native ES Modules, or ESM, which allows the browser to handle the actual bundling.
Finally, Vite supports HMR, which ensures only the relevant modules are replaced when a file is edited instead of rebuilding the entire bundle, which triggers a page reload and resets state. Unlike other bundlers, Vite performs HMR over native ES Modules which means it only needs to invalidate affected modules when a file is edited. This ensures that update times are consistently fast instead of scaling linearly as your application grows.
To get started, simply fork our React template or select React.js in the languages dropdown when creating a new repl.
Vite is also framework agnostic, so if React isn't your thing, you can use our Vue and Vanilla JS templates too.
We hope this helps build out your ideas even quicker and look forward to seeing what you build!