How to Create a React.js App Using Vite: A Step-by-Step Guide

Creating a React.js application traditionally involves using Create React App (CRA), but recently, Vite has emerged as a powerful alternative. Vite offers faster builds, hot module replacement, and an overall more efficient development experience. This guide will walk you through setting up a React.js app using Vite.

👉 Download Javascript: from ES2015 to ES2023 - eBook

Table of Contents

1. Introduction to Vite

2. Prerequisites

3. Setting Up the Project

4. Project Structure

5. Running the Development Server

6. Building for Production

7. Conclusion

1. Introduction to Vite

Vite, developed by Evan You (the creator of Vue.js), is a build tool that aims to provide a faster and leaner development experience for modern web projects. Unlike traditional bundlers, Vite serves your code via native ES modules during development and bundles it with Rollup for production.

Key Features of Vite:

1. Instant Server Start: No more waiting for the dev server to start.

2. Fast Hot Module Replacement (HMR): See your changes instantly.

3. Optimized Build: Fast and efficient builds using Rollup.

4. Rich Plugin Ecosystem: Leverage a vast range of plugins for additional functionality.

2. Prerequisites

Before you begin, ensure you have the following installed on your machine:

1. Node.js (version 12 or higher)

2. npm or yarn (package managers for JavaScript)

3. Setting Up the Project

Setting up a React.js application with Vite is straightforward. Follow these steps:

Step 1: Create a New Vite Project

Open your terminal and run the following command:

npm create vite@latest my-react-app --template react

or with yarn:

yarn create vite my-react-app --template react

This command creates a new directory named my-react-app with a basic React setup using Vite.

Step 2: Navigate to Your Project Directory

cd my-react-app

Step 3: Install Dependencies

npm install

or

yarn

4. Project Structure

Once the installation is complete, you will see a project structure similar to this:

my-react-app
├── node_modules
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

Explanation of Key Files:

1. index.html: The main HTML file.

2. main.jsx: Entry point for the React application.

3. App.jsx: Main component file.

4. vite.config.js: Configuration file for Vite.

5. Running the Development Server

To start the development server, run:

npm run dev

or

yarn dev

You should see output indicating the server is running, and you can open your browser to http://localhost:5173 to view your React app.

6. Building for Production

When you're ready to deploy your app, you need to build it for production. Run:

npm run build

or

yarn build

This command creates an optimized build of your application in the dist directory. You can then serve this directory with a static site server of your choice.

7. Conclusion

Using Vite for your React.js projects can significantly enhance your development experience with faster builds and efficient hot module replacement. By following this guide, you’ve set up a React app with Vite, understood the project structure, and learned how to run and build your application. Happy coding!