Vitejs and React

Published in

The Startup

4 min readJan 27, 2021

Vite is a new frontend build tool that aims to improve the developer experience for development with the local machine, and for the build of optimized assets for production (go live).

Vite (or ViteJS) includes:

a development server with ES _native_ support and Hot Module Replacement;
a build command based on rollup.js to output highly optimized static assets for production.

If you are interested in Vite my suggestion is to start reading the official doc, “Getting Started” chapter: https://vitejs.dev/guide/.

Vite is developed by the creator of VueJS. But one of the most important feature of Vite is that is frontend agnostic. So you can use Vite with Vue, but also with React.

In this post I would like to show you how to use Vite with React and show how is amazing fast the building phase.

The small demo that I’m going to build is a simple Roll The Dice application.

The user can click on a button and some simple JS logic will produce a random number. The frontend part will be updated in a reactive way. Very simple but useful to understand how much is easy to setup the frontend workflow with Vite (also using React).

The Demo application built with Vite + React + Tailwind CSS

Setup your app

You can use the scaffold to setup the Vite app, with React templates. The following command will:

create the directory rollthedice-vite-react with the scaffold;
enter in the new directory;
install Npm packages;
execute the development WebServer.

npm init vite@latest rollthedice-vite-react -- --template react
cd rollthedice-vite-react
npm install
npm run dev

The local development server is started in few milliseconds

If you switch on your browser, and go to the URL: http://localhost:3000/ you will see a small web application up and running.

Now the Vite part is completed, so we can focus on the React part.

The React Component

Let’s create the React component: src/components/RollTheDice.jsx.

mkdir -p src/components
touch src/components/RollTheDice.jsx

001: using the hook setState, declare a new state variable “dice” to track the current roll, and the related function used to update the value of the state (setNumber);
002: using the hook setState, declare a new state variable (array) “rolls” to store all generated rolls. The function declared to update the rolls is setRolls;
003 : implementing useEffect hook in order to change the title of the page on every changes of value of dice;
004: implement roll function, in order to generate a random number 1 .. 6;
005: setting state for value of dice calling the setNumber function (previously declared in the useState hook);
006: setting state for array for tracking all rolls, calling setRolls function (previously declared in the useState hook);
007: implement reset function;
008: resetting state for value of dice to 0, calling the setNumber function (previously declared in the useState hook);
009: resetting state for rolls array to empty array, calling setRolls function (previously declared in the useState hook);
010: return the HTML for the component. In this simple example the component is declared as Function;
011: conditional render elements inline using the JavaScript conditional operator condition ? true : false;
012: show value of state variable “dice” (it automatically changes when it changes the value of the state variable);
013: calling roll() function on click event;
014: calling reset() function on click event;
015: conditional render elements;
016: walk through the “rolls” array. The element is refreshed every time a value is added to the array;
017: display the number of rolls (it is refreshed every time a value is added to the array).

Include the new React Component

Once the React Component is completed, you need to use it in another “parent” template or in the main App.jsx file.

If you need to include the new React component, for example in src/App.jsx file, you need to:

import the component with a name (RollTheDice);
use in the template the new element <RollTheDice>.

import React, { useState } from 'react'import RollTheDice from './components/RollTheDice'
function App() {
  return (
    <div className="App">
      <RollTheDice></RollTheDice>
    </div>
  )
}export default App

Launch the Local WebServer

If you already launched the local WebServer with “npm run dev” you will see an instant reload every time you save your files (the RollTheDice.jsx component or the App.jsx file).

If your local WebServer is not running, launch “npm run dev” from your Terminal application.

Prepare your files for the “GO LIVE”

If you want to publish your file on a public server (Netlify, Vercel, Surge) you can build your html and assets executing:

npm run build

All your generated static files are stored in dist/ directory, so you can copy them on your public server.

Feedback, share, and follow

If you think that this post is useful or you think that there is room for improvement, please drop a constructive comment and follow me in order to motivate me to write more additional infos for example:

adding tailwind in React Vite application;
adding graphs to show statistical distributions of randomly generated values;
or feel free to ask new topic.

References

Vite: https://vitejs.dev/guide/introduction.html
React hook state: https://reactjs.org/docs/hooks-state.html
React hook effect: https://reactjs.org/docs/hooks-effect.html
React conditional rendering: https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator
Source Code: https://github.com/roberto-butti/vite-react-rollthedice
My Twitter profile: https://twitter.com/RmeetsH