Vite is the successor to Create React App. Vite is a performant front-end tool that gives us a development server to run our React application locally, and a build command that bundles our code, producing optimized static assets for production. Vite supports modern front-end libraries such as React, Vue, Preact, and Svelte, and it has TypeScript support.
The main advantage that Vite has over Create React App is its choice of bundler.
Here is a list of benefits that Vite offers.
Faster startup times are thanks to the use of esbuild with rollup instead of Webpack, used by Create React App.
Faster Hot Module Replacement (HMR)
As a result, Vite lets the browser take over part of the job of the bundler. This means that Vite transforms and serve source code on demand, as the browser requests it.
Vite is stable, has an extensive ecosystem, and is updated regularly by the community that works on it. At the time of this writing, Vite has just over 5 million downloads per week.
To create a new Vite-powered React app, run
yarn create vite in your terminal. The project creation process will ask you the following questions.
- Project name:
- Select a framework:
- Select a variant:
React as your framework and
TypeScript as your variant. Once the installation is complete, run
yarn dev. This will start a development server at
http://localhost:5173. When the development server starts, this address will be displayed in the terminal. Click on it to open it in your web browser.
If you have another application running on port
5173, consider freeing up that port by stopping the application running on it.
The reasons for this are the following:
- React frameworks provide server-side rendering (SSR) capabilities. Running code on server can be more performant than running it in the browser.
With server-side rendering, the server's response to the web browser contains all the HTML of a web page already loaded and ready to be displayed.
Depending on the type of application you are building, server-side rendering can have several advantages over client-side rendering. However, if you are just starting off with React, learning React without having to also learn a SSR framework will be easier.
Start with a Vite-powered React project to focus on learning only React. Then, once you feel more comfortable with React, learn a framework like Next.js.
If you find yourself in this situation, consult Robin's guide on migrating to Vite from Create React App.