Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 23

Setting Up React with Vite

Recommended resources

Hello! Welcome to the first lesson of our "React Fundamentals" module.

In our last project, you built an impressive weather dashboard. You saw firsthand how much code is required to select, create, and update DOM elements manually using document.querySelector, createElement, and .appendChild(). While powerful, this approach can become complex and error-prone as applications grow.

This is where React comes in. React is a JavaScript library for building user interfaces. It allows us to describe what our UI should look like in a declarative way, and it handles the difficult task of efficiently updating the DOM for us.

To start building with React, we first need a modern development environment. This lesson is all about setting that up. We will use a tool called Vite (pronounced "veet," French for "fast") to create a new React project from scratch. By the end of this lesson, you will have a fully functional local development setup, ready for us to start building React components.

What is a Build Tool and Why Vite?

When you were building the weather app, you had a simple setup: an index.html, a styles.css, and a script.js. For modern, large-scale applications, the process is more involved. We use features like JSX (a special syntax for React that we'll cover next), multiple JavaScript files (modules), and packages from npm. Browsers don't understand all of this out of the box.

A build tool takes all our development code and transforms it into optimized files that a browser can run efficiently. For years, the standard for React was create-react-app (CRA), which uses a tool called Webpack. However, as projects get larger, Webpack can become slow because it has to re-bundle the entire application every time you save a file.

Vite is a newer, much faster build tool that solves this problem. During development, it uses the browser's native support for ES Modules to serve files on demand. This results in a nearly instant server start time and lightning-fast updates when you change your code.

To get a better grasp of why this is such a significant improvement, let's watch a short explanation.

Vite Crash Course | Faster Alternative To CRA

This video, 'Vite Crash Course' from Traversy Media, provides an excellent overview of what Vite is and how it differs from traditional bundlers like Webpack.

Watch the first 6 minutes and 38 seconds of the video (from 00:00 to 06:38). Focus on understanding: The role of a build tool in modern web development. How traditional bundlers (like Webpack in CRA) work. How Vite leverages native ES modules for a much faster development experience.

Step 1: Setting Up Your First React + Vite Project

Now for the practical part. We're going to use npm to scaffold a new React project using Vite. The process is incredibly simple.

Prerequisite: Make sure you have a recent version of Node.js installed on your machine. You can verify this by running node -v in your terminal. You should have version 18 or higher.

The video below demonstrates the entire process in just a couple of minutes. After that, I'll provide the commands in text so you can easily follow along.

How to Set Up React in 2025 | Install React with Vite in 2 minutes

This video, 'How to Set Up React in 2025' by Devtamin, provides a quick, no-fluff demonstration of creating a React app with Vite.

Watch the section from 00:40 to 02:24. This will show you exactly how to: Run the npm create vite@latest command. Name your project and select the 'React' framework and 'JavaScript' variant. Navigate into the new directory, install dependencies, and start the development server.

Ready to create your own? Open your terminal and follow these steps.

  1. Run the create command: This command will start an interactive setup process.

    npm create vite@latest

  2. Follow the prompts:

    • Project name: Enter a name for your project, for example, react-intro.
    • Select a framework: Use the arrow keys to navigate and select React.
    • Select a variant: Choose JavaScript.

  3. Navigate and install: Once the setup is done, follow the instructions printed in your terminal.

    cd react-intro
npm install

    The npm install command reads your package.json file and downloads all the necessary libraries (like React itself and Vite) into a node_modules folder.

  4. Start the development server:

    npm run dev

Your terminal will now show you a local URL, likely http://localhost:5173/. Open this URL in your browser. You should see the default Vite + React starter page!

Vite + React Default Project Output
This is the default page for a new Vite + React project. Seeing this means your setup was successful.

Step 2: Exploring the Project Structure

Let's quickly look at the files and folders Vite created for us. Understanding the basic structure is key to knowing where to write your code.

Vite vs CRA: The Ultimate Beginner's Guide to Modern React

The 'Vite vs CRA' article on Medium gives a concise overview of the project structure. We'll also use another section of the Traversy Media video for a guided tour.

In the article, find the section titled 'Vite Project Structure'. This gives you a quick visual reference of the main files and folders.

Here's a breakdown of the most important files:

  • index.html: This is the main HTML file. Unlike in our previous projects, it's very minimal. Notice the <div id="root"></div>. This is where our entire React application will be rendered. The <script type="module" src="/src/main.jsx"></script> tag tells the browser to start executing our JavaScript from main.jsx.
  • src/main.jsx: This is the entry point of our React application. It finds the div with the root ID and tells React to render our main App component inside it.
  • src/App.jsx: This is your first React component! It contains the HTML-like syntax (which is actually JSX) that you see on the starter page. This is where we will start building our application's UI.
  • package.json: This file lists your project's dependencies (like react and react-dom) and defines scripts like npm run dev and npm run build.
  • vite.config.js: This is the configuration file for Vite. For now, it's very simple and just includes the React plugin, but it can be used for more advanced customization later.

For a more detailed walkthrough, the Traversy Media video explains these files clearly.

Vite Crash Course | Faster Alternative To CRA

Let's revisit the 'Vite Crash Course' video for a guided tour of the files and folders we just created.

Watch the section from 08:02 to 10:45. The instructor does an excellent job of explaining the purpose of package.json, vite.config.js, index.html, main.jsx, and App.jsx.

Test your understanding!

One of the best features of Vite is Hot Module Replacement (HMR). This means that when you change and save a file, the browser updates instantly without a full page reload, preserving the application's state.

Let's see it in action:

  1. With your development server still running (npm run dev), open the src/App.jsx file in your code editor.
  2. Find the <h1> element that says Vite + React.
  3. Change the text to something else, like "My First React App".
  4. Save the file.

What do you observe in your browser? Did the page do a full reload, or did the content just update instantly?

Show answer

You should have seen the heading on the web page change immediately after you saved the file, without the browser tab showing a refresh/reload animation. This is HMR at work. If you had clicked the counter button a few times before saving, you would also notice that the count was not reset. This is a huge productivity boost during development.

Conclusion

Fantastic work! You have successfully set up a modern, professional React development environment using Vite. You now have a project foundation that is fast, efficient, and ready for you to build upon.

Key Takeaways:

  • Vite is a modern build tool that provides an extremely fast development experience for web projects.
  • It works by leveraging native ES modules in the browser, avoiding the need to bundle your entire app on every change.
  • You can create a new React project with a single command: npm create vite@latest.
  • The project structure separates the main HTML shell (index.html) from your React application code (in the src folder).

In our next lesson, we will dive into the core concept of React: components. You'll learn how to write your own components using JSX, the syntax that lets us write HTML-like code directly within our JavaScript.