Skip to main content

Your First React App with Vite (Part 1) #07

📖 Introduction​

Following our comprehensive setup in Setting Up Your Development Environment (Part 2), where we configured VS Code and installed essential extensions, you are now fully equipped to embark on building your first React application. This article, Part 1 of "Your First React App with Vite," will introduce you to Vite, a modern and incredibly fast build tool, and guide you through scaffolding a new React project from scratch. We'll focus on understanding the command and the initial project setup.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • Node.js and npm/Yarn: Successfully installed as covered in Setting Up Your Development Environment (Part 1).
  • Command Line Basics: Familiarity with navigating directories and executing commands in your terminal.
  • VS Code (or preferred editor): Installed and ready for use.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Why Vite? Understanding the advantages of Vite over older build tools like Create React App.
  • ✅ Scaffolding Your First Project: Using the npm create vite command to initialize a new React application.
  • ✅ Understanding the Command: Breaking down the npm create vite@latest syntax.
  • ✅ Initial Project Structure: A high-level overview of the files and folders generated by Vite.

🧠 Section 1: Why Vite? The Modern Build Tool​

For many years, Create React App (CRA) was the go-to tool for quickly setting up new React projects. It provided a zero-configuration setup, abstracting away complex build tools like Webpack and Babel. However, as web development evolved, CRA started showing its age, particularly in development server startup times and hot module replacement (HMR) speed for larger projects.

This is where Vite (pronounced /vit/, like "veet," French for "quick") steps in. Created by Evan You (the developer of Vue.js), Vite is a next-generation front-end build tool that aims to provide a faster and leaner development experience.

1.1 - Key Advantages of Vite over Traditional Bundlers (like Webpack in CRA)​

  1. Instant Server Start:
    • Traditional: Bundlers like Webpack would first bundle your entire application before serving it. As projects grew, this could lead to long startup times (tens of seconds, or even minutes).
    • Vite: Leverages native ES Modules (ESM) in modern browsers. During development, Vite serves modules directly to the browser on demand, without needing to bundle the entire application upfront. This results in near-instant server startup times.
  2. Lightning-Fast Hot Module Replacement (HMR):
    • Traditional: HMR allows you to see changes in your code reflected in the browser without a full page reload. However, with traditional bundlers, HMR updates could still be slow, especially for large applications.
    • Vite: Vite's HMR is incredibly fast because it only invalidates and updates the specific module that changed, rather than re-bundling large parts of the application. This means your edits reflect in milliseconds.
  3. Optimized Build for Production:
    • While Vite excels in development, it uses Rollup (a highly efficient module bundler) under the hood for production builds. This ensures your final application bundle is highly optimized, minified, and ready for deployment.
  4. Minimal Configuration:
    • Vite comes with sensible defaults out of the box, requiring minimal configuration for most projects. This allows you to focus on writing code rather than wrestling with build tool configurations.
  5. Future-Proof:
    • By embracing native ES Modules, Vite aligns with modern web standards, making it a more future-proof choice for front-end development.

In summary, Vite offers a significantly improved developer experience, making it the preferred choice for starting new React projects today.

💻 Section 2: Scaffolding Your First React Project with Vite​

Now that we understand why Vite is so powerful, let's use it to create our first React application.

2.1 - The npm create vite@latest Command​

Open your terminal or command prompt. Navigate to the directory where you want to create your new React project (e.g., your Documents folder, or a projects folder).

Execute the following command:

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

Let's break down this command:

  • npm create: This is a special npm command used to scaffold projects using various "create" packages. It's a convenient way to run a package without globally installing it first.
  • vite@latest: This specifies that we want to use the create-vite package, and @latest ensures we get the most recent stable version. This package is responsible for generating the Vite project structure.
  • my-react-app: This is the name of your new project directory. Vite will create a folder with this name and place all your project files inside it. You can replace my-react-app with any name you prefer (e.g., my-first-react-app, todo-list).
  • --: This double-dash is important! It tells npm that all subsequent arguments are meant for the create-vite command itself, not for npm create.
  • --template react: This is the crucial part that tells create-vite to set up a project using the React template. Vite supports various templates (e.g., vanilla, vue, preact, svelte, solid), and this ensures we get a React-specific setup. You could also use --template react-ts for a TypeScript React project.

Using Yarn (Alternative): If you prefer Yarn, the equivalent command would be:

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

After running the command, Vite will quickly scaffold your project. You'll see output indicating that the project has been created and instructions on how to proceed.

🛠️ Section 3: Initial Project Setup and First Steps​

Once Vite has finished scaffolding your project, you'll need to navigate into the new directory and install the project's dependencies.

3.1 - Navigating and Installing Dependencies​

Follow the instructions provided by Vite in your terminal:

cd my-react-app
npm install
# or if you are using Yarn:
# yarn install
  • cd my-react-app: This command changes your current directory to the newly created project folder.
  • npm install: This command reads the package.json file (which Vite generated for you) and downloads all the necessary project dependencies (like React, ReactDOM, and Vite itself) into the node_modules folder. This might take a moment, depending on your internet connection.

Once npm install (or yarn install) completes, your project is fully set up and ready to run!

3.2 - Running Your Development Server​

To see your new React application in action, run the development server:

npm run dev
# or if you are using Yarn:
# yarn dev

This command will:

  • Start Vite's lightning-fast development server.
  • Compile your React code on the fly.
  • Typically open your default web browser to http://localhost:5173 (or a similar port).

You should now see the default Vite + React "Hello World" page in your browser! This page usually features the React logo and a counter.

🚀 Section 4: High-Level Project Structure Overview​

Let's take a quick tour of the basic file and folder structure generated by Vite for a React project. Understanding this structure will help you navigate your project and know where to place your code.

Your my-react-app directory will typically look something like this:

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── package-lock.json (or yarn.lock)
└── vite.config.js

Key Files and Folders:

  • node_modules/: (As discussed in Article 05) This directory contains all the third-party packages and libraries your project depends on. You should never modify files here directly, and it should be ignored by Git.
  • public/: Contains static assets that are served directly without being processed by Vite's build pipeline (e.g., vite.svg).
  • src/: This is where the majority of your application's source code resides.
    • assets/: Contains static assets that might be processed by Vite (e.g., react.svg).
    • App.jsx: Your main React component. This is typically where you'll start building your application's UI.
    • index.css: Global CSS styles for your application.
    • main.jsx: The entry point of your React application. This file is responsible for rendering your root React component (App.jsx) into the HTML page.
  • .eslintrc.cjs: Configuration file for ESLint, your code linter.
  • .gitignore: Specifies files and directories that Git should ignore (like node_modules/).
  • index.html: The main HTML file for your application. Unlike traditional setups, Vite treats this as a source file. Your React app will be "mounted" into an element within this HTML (usually a div with id="root").
  • package.json: (As discussed in Article 05) Defines your project's metadata, scripts, and dependencies.
  • package-lock.json (or yarn.lock): Automatically generated files that lock down the exact versions of your dependencies for consistent installations.
  • vite.config.js: The configuration file for Vite. Here you can customize Vite's behavior, add plugins, set up aliases, etc.

This clean and modular structure provides a great starting point for building scalable React applications.

✨ Section 5: Best Practices and Troubleshooting​

Best Practices:

  • Keep package.json Clean: Only install necessary dependencies. Regularly review and remove unused packages.
  • Understand index.html: In Vite, index.html is the entry point. Your React app injects itself into an element within this file.
  • Use npm run dev (or yarn dev): Always use the defined scripts in package.json to start your development server.
  • Check Node.js Version: Ensure your Node.js version meets Vite's requirements (as mentioned in Vite's documentation, typically Node.js 20.19+ or 22.12+).

Troubleshooting Tips:

  • "command not found" for npm or node: Revisit Setting Up Your Development Environment (Part 1) to ensure Node.js and npm are correctly installed and your terminal is refreshed.
  • Installation Errors (npm install):
    • Check your internet connection.
    • Try clearing npm cache: npm cache clean --force.
    • Delete node_modules and package-lock.json (or yarn.lock), then run npm install again.
  • Browser Not Opening or Blank Page:
    • Check your terminal for any error messages from npm run dev.
    • Ensure the development server is running (it should show a local URL like http://localhost:5173).
    • Try manually navigating to the displayed URL in your browser.
    • Check your browser's developer console for JavaScript errors.

💡 Conclusion & Key Takeaways​

You've successfully created your very first React application using Vite! You now understand the power of Vite as a modern build tool and have navigated the initial project setup. This is a significant milestone in your React journey, providing you with a functional starting point for all future development.

Let's summarize the key takeaways:

  • Vite is Fast: It uses native ES Modules for instant server starts and lightning-fast HMR.
  • Scaffolding Command: npm create vite@latest <project-name> -- --template react is the go-to command.
  • Initial Setup: cd into the project and run npm install (or yarn install).
  • Run Dev Server: Use npm run dev (or yarn dev) to start your application.
  • Project Structure: Familiarize yourself with src/, public/, index.html, package.json, and vite.config.js.

Challenge Yourself: Try creating another Vite React project, but this time, choose the TypeScript template (--template react-ts). Compare the initial project structure and file extensions (.jsx vs. .tsx).

➡️ Next Steps​

With your first React application successfully scaffolded and running, you're ready to explore its inner workings. In the next article, "Your First React App with Vite (Part 2)", we will take a detailed tour of the Vite project structure, focusing on the src directory, App.jsx, and main.jsx, and understand how your "Hello World" application is rendered.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Vite: A modern front-end build tool that provides a fast development experience by leveraging native ES Modules.
  • Create React App (CRA): A popular (though now less recommended for new projects) tool for setting up React projects with a pre-configured build pipeline.
  • ES Modules (ESM): The standard module system for JavaScript, allowing modules to import and export functionality. Modern browsers support ESM natively.
  • Hot Module Replacement (HMR): A feature that allows changes to be applied to your application in the browser without a full page reload, preserving application state.
  • Rollup: A module bundler for JavaScript that compiles small pieces of code into something larger and more complex, like a library or application. Vite uses Rollup for production builds.
  • Scaffolding: The process of generating the basic file and folder structure for a new project using a command-line tool.
  • npm create: An npm command used to run a package that scaffolds a new project.
  • package.json: A manifest file that contains metadata about the project and lists its dependencies and scripts.
  • node_modules: The directory where all installed project dependencies are stored.
  • Development Server: A local server that serves your application files during development, often providing features like hot-reloading and live updates.

Further Reading​