Vite React Example – Create React App With Vite Tutorial

In this post Vite React Example – Create React App With Vite Tutorial we have explained what’s Vite, features, its use with React and and also created a vite app for React. Let’s start on it quickly.

React is one of the highly used JavaScript libraries used these days for high end single page web apps by the devs. It divides the user interface into small pieces to manage the apps in a better way without running into errors. 

Normally we use the npx create-react-app app-name command to create React js  apps. We have discussed different ways for creating React apps with Vite:

We will focus on:

• What is Vite JS
• Benefits of Using Vite Vs Mix
• Features of Vite
• How to create a React app with Vite

Requirements to Create Vite+React App 

If you are using React to create app you need to understand these things:

• The developers should learn React.js 
• The developers should learn Hot Module Replacement

The first thing we need to do is to install Node.js on the system. It will provide us with NPM that we will use to install required Reactjs dependencies. 

What is Vite JS?

Vite is an asset bundling tool that provides devs faster web development experience. Evan You created it

Vite supports the following:

1. Hot Module Replacement – We can use the Hot Module Replacement server for better web apps development with its HMR Swift Module Replacement as it has advanced features. 

You can read more about ES native modules from here.

2. Rollup – The developers use Vite’s build command to bundle code using Rollup. It’s a JavaScrip module bundler to be used to build code pieces into high end apps. 

Benefits of Using Vite Vs Mix 

A developer’s productivity is influenced by many factors including performance and speed.

The developer’s productivity gets deeply affected due to JavaScript where Vite uses Esbuild to resolve JavaScript slowness issues. EsBuild is used for dependency pre-bundling that helps pre-bundle dependencies faster than most of the frameworks. This fastens the server and also Hot Module Replacement too. While webpack’s Mix has less features compared to Vit’s advanced ones to create apps like never before. 

After the release of Laravel 9.1 Vite replaced Mix as the better alternative to speed up web app development. Since then it has been highly used to create best apps.

Advanced features of Vite vs Mix 

• Vite provides Instant server start which is not the case in Mix if you use both for quite some time only then you will realize it. Vite may seem new and difficult at this point compared to Mix but for the better app building experience Vite is fit for modern needs. 
• Fast Hot Module Replacement makes Vite more suitable against Mix. 
• Vite increases building process much faster and smoothly versus Mix. 

Let’s now create a React application using Vite and get done with it quickly. 

Creating a React Application Using Vite

Now go to your system to create a new directory folder where you will store all dev files. Now launch a command window and go to app directory as shown here: 

Now use NPM to install the dependencies if you want to use yarn you should install it. 

Use this command in CLI

npm init vite

Next you should create a new Vite project and use the package name. We have shown the example here: 

Now choose React as the variant and framework:

We are done creating a project, time to install and run:

Let’s go back to the terminal and install our project using node package manager now. 

npm install

We need to understand that package.json file allows us to access dependencies we install through above command. We also created node_modules folder which is clearly seen as an external modules’ cache. If we want to see our package.json file, they should look like this:

Type this command to run our development server which is ready

npm run dev

Now test the project in the browser typing http://localhost:3000/

You’d notice we ran npm run serve to build and render our ‘react vite app’ and wee how it’s coming in the production
while npm run dev initiates our react vite project. We will see main.jsx file in our project file code editor among others you can see below. We tested our project at localhost:3000 which is in the App.jsx and rendered through main.jsx it was executed.

We are creating an even a simple app to understand and learn Vite, add this code snippet into app.jsx file

import React from 'react'
import './App.css'

function App() {
  return (
    <div className="App">
        <h1>React app with Vite</h1>
        <p>This is our first React Vite app.
          The dev server starter was the quickest experience we have ever seen while using this tool compared to the normal npx create-react-app (app-name) way.
          Next we will test HMR typing **"npm run serve"** command Vite provides lightning speed for it.
        </p>

        <h3>keep coding</h3>
   </div>
  )
}

export default App

Let’s test it. Type again npm run dev and check it on localhost:3000 to see our simple React+Vite application which appears like this:

Note that in Vite, you need not to put index.html file in public folder as you do in React. It contains a HTML file script <script type=”module” src=’..’></script> module used as a React app entry point.

You will see that in React %PUBLIC_URL% option is also missing as the placeholder may map any static files in the React’s public folder and in the Vite %PUBLIC_URL% is unnecessary as the URLs get rebased automatically in index.html so we don’t need it. 

That was all regarding Vite React Example – Create React App With Vite Tutorial today’s post. You’d understand how we can use vite for creating amazing react apps. Once you have streamlined your workflow in Vite instead of Mix your production value increases like 100 times more.