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

Harish Kumar · · 5162 Views

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!

0

Please login or create new account to add your comment.

0 comments
You may also like:

15 Must-Know TypeScript Features to Level Up Your Development Skills

TypeScript has become the go-to tool for developers building scalable, maintainable JavaScript applications. Its advanced features go far beyond basic typing, giving developers (...)
Harish Kumar

JavaScript Best Practices: Tips for Writing Clean and Maintainable Code

JavaScript is one of the most versatile and widely used programming languages today, powering everything from simple scripts to complex web applications. As the language continues (...)
Harish Kumar

Ditch jQuery: Vanilla JS Alternatives You Need to Know

jQuery revolutionized web development by simplifying DOM manipulation, event handling, and animations. However, modern JavaScript (ES6 and beyond) now provides many built-in methods (...)
Harish Kumar

Shallow Copy vs Deep Copy in JavaScript: Key Differences Explained

When working with objects and arrays in JavaScript, it's crucial to understand the difference between shallow copy and deep copy. These concepts dictate how data is duplicated (...)
Harish Kumar

A Beginner’s Guide to Efficient Memory Use in JavaScript

Managing memory efficiently in JavaScript applications is essential for smooth performance, especially for large-scale or complex applications. Poor memory handling can lead to (...)
Harish Kumar

Exploring the New Features of JavaScript ES2024: A Look into the Future of Web Development

Discovering new functionality in programming languages is a bit like a holiday β€” it’s filled with anticipation and the excitement of exploring something new. With the proposed (...)
Harish Kumar