React.js Development with Vite.js is Fast. Wanna try?

React.js is the most popular javascript library to build user interface. The popularity was huge among another frontend library. The community is is expanding over the time. But, React.js need build tools to produce high quality production codes and to get better development experience.

Vite.js is modern build tools which has fast speed in Hot Module Replacement (HMR). So, when the developer developing some features or fixing a bug, he/she usually face some loading, especially when save a file in a project after doing some changes.

Big project needs more loading time. Vite.js has better speed when you save changes in your project file. It will be a good solution for us as a developer to save our time.

Let’s try online Vite.js demo in StackBlitz.

If you wants to try a project based demo, make sure your computer has Node.js v14.18 or higher.

Okay, let’s try to scaffold React.js project using Vite.js official package.

With NPM:

npm create vite@latest

With Yarn :

yarn create vite

With PNPM:

pnpm create vite

Scaffold react.js project using vite and npm

Now, we can move into our project, in my case, I named mine react-vite , so I type in my terminal :

cd react-vite

Then, install all packages we need using :

npm install

Install packages using npm install

After we success install all packages we need, node_modules will present in root directory of the project.

Project directory

And if you want to know the details of the project, you can check it in package.json, you will notice that vite.js in “devDependencies” section.

Screenshot of package.json

Project is ready to run, to run this, for NPM user like me, just type a command:

npm run dev

and for Yarn user, just type a command:

yarn dev

Project is running in localhost:5173

So, let’s open the browser and type

http://127.0.0.1:5173

or

localhost:5173

then enter.

App running in browser

Vite.js is fast, it feels when we do changes in file inside our project, the loading fast so fast. For an example, we can change the header of the content inside the main page.

Open App.jsx inside src folder, go to line 18.

Screenshot of App.jsx

Change “Vite + React” to “My React Vite App” , and save it. Check the browser immediately, the changes was seamless.

You can try to make changes in another files, install another packages, fetch some APIs, etc.

I personally have experince with another build tools, and until this article written, Vite.js is the fatest build tools.

See detailed about Vite.js here.