How to Create React App using Vite

In this step-by-step guide, we will see how to create a React app using Vite.js.

1. Install Node.js and npm (if not already installed) 

Visit the official Node.js website (https://nodejs.org) and download the appropriate installer for your operating system. Run the installer and follow the instructions to install Node.js and npm.

2. Create a new React app with Vite 

Decide on the directory where you want to create your React app. Open your terminal or command prompt. Navigate to the desired directory using the cd command. 

Run the following command to create a new React app using Vite:

npm create vite@latest my-app

Let's break down the command: 

npm: This is the command-line interface for Node Package Manager (npm). 

create-vite: It is a package provided by Vite that allows you to scaffold a new Vite project. 

@latest: This specifies that the latest version of Vite should be installed. 

my-app: This is the name you choose for your app. You can replace it with your desired app name.

Once, enter this command, you will get an option to choose a framework. Select React:

Select a framework: › - Use arrow-keys. Return to submit.

❯   Vanilla

    Vue

    React

    Preact

    Lit

    Svelte

    Others

Next, select a variant of JavaScript.

Select a variant: › - Use arrow-keys. Return to submit.

❯   TypeScript

    TypeScript + SWC

    JavaScript

    JavaScript + SWC

3. Navigate to the app directory 

In your terminal or command prompt, navigate to the directory of your newly created React app:

cd my-app

4. Install Dependencies using NPM

Run the below command to install all the required dependencies for React app:

npm install

5. Start the development server 

Run the following command to start the development server:

 npm run dev

This command will start the Vite development server and open your app in the browser.

6. Build and deploy your app (optional) 

If you want to build your app for production and deploy it, run the following command:

npm run build

This command will generate an optimized build of your React app in the dist directory.

Commands for Quick Reference

Here are the commands that we used in this guide for your reference:

npm create vite@latest my-app
cd my-app
npm install
npm run dev
npm run build

Congratulations! You have successfully created a React app using Vite.js. You can now start developing your React components and take advantage of Vite's fast development server and other modern build tooling features. Enjoy the enhanced development experience provided by Vite!

Related Tutorials

• React Hooks - useState and useEffect
• React JS ( React Hooks) + Spring Boot Tutorial
• Create a New React App Step by Step
• Understanding React App Folder Structure
• How to Add Bootstrap to React App
• ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
• ReactJS Axios Example
• ReactJS Fetch API Example
• React JS CRUD Example Tutorial
• React Router Step-By-Step Tutorial
• React Class Components
• React Functional Components
• React Props
• React State and setState in Class Components
• React useState Hook
• React Conditional Rendering
• How to Add Bootstrap in React JS Using NPM
• How to Create React App using Vite
• Handling Events in React
• How to Consume REST API in React
• React JS Form Validation Example