Play with React.js and Vite.js

image source: https://medium.com/@softwaredevarya/react-js-development-with-vite-js-is-fast-wanna-try-1320fbbe81b9

What is Vite?

Vite (the French word for “quick”, pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Vite

What is React?

Maybe this part, I don’t need to explain again, because React is a very famous javascript library 🍭

Vite + React

Fast, lightweight, and easier to develop. When we create React app using CRA (Create React App) the build time takes around 25 seconds, but when you use Vite, the build time shrinks to approximately 5 seconds. CRA behavior is very different from Vite, CRA will bundle again and deliver to the browser, however, Vite will give the browser to do its job because Vite already gives the updated component and native Ecma-Script-Modules will update to the browser, no need to bundle again. It’s magic!

How to create React project using Vite

First, run the below command in your terminal:

yarn create vite

After that, you will be asked for the project name and choose the framework.

success Installed "create-vite@4.0.0" with binaries:
      - create-vite
      - cva
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Then, it's done, voila! Just run the following commands:

Done. Now run:

  cd vite-project
  yarn
  yarn dev

Open this http://127.0.0.1:5173 in your browser, use --host if you want to see the development in your mobile device with the same wifi.

It’s no different from React behavior, code and lifecycle when you use Vite, it’s all the same. So no need to explain how to code React, I trust all of you are mastered React!

The evidence of build time when you deal with Vite:

And then this is evidence of CRA:

22 seconds vs 4.56 seconds, so excited to explore more using Vite.

Done! you are created React project skeleton using Vite, trust me Vite is simpler than the cable on your desk.