DEV Community

Cover image for How to Create Your First React App with Vite (Step-by-Step Tutorial)
Dehemi Fabio
Dehemi Fabio

Posted on

How to Create Your First React App with Vite (Step-by-Step Tutorial)

#webdev #programming #react

Ready to build your first React application? In this hands-on tutorial, you'll set up a modern React project using Vite and have a working app running in just a few minutes!

What You'll Learn

By the end of this guide, you'll be able to:

  • Set up a React project from scratch using Vite
  • Understand what each file in your project does
  • Make your first changes and see them appear instantly
  • Build your own simple React component

Time needed: 15-20 minutes

Prerequisites

Before we start, make sure you have:

✅ Node.js installed (version 14.18+ or 16+)

  • Check by running node --version in your terminal
  • Download Node.js if you don't have it

✅ A code editor (VS Code is recommended and free)

✅ Basic familiarity with the terminal (don't worry, I'll show you every command!)

That's all you need. Let's build something!

Why Vite?

You might wonder: "What is Vite, and why do I need it?"

Vite (pronounced "veet", French for "fast") is a modern build tool that helps you develop React apps efficiently. Think of it as the engine that:

  • Sets up your project structure automatically
  • Runs a development server
  • Shows your changes instantly (no manual refresh!)
  • Prepares your app for deployment

Why Vite over Create React App?

  • ⚡ Blazingly fast - Starts in milliseconds, not seconds
  • 🔥 Instant updates - See changes immediately without page refresh
  • 📦 Smaller builds - More efficient production files
  • 🎯 Modern by default - Uses the latest JavaScript features

Now let's get started!

Step 1: Create Your React Project

Open your terminal and navigate to where you want to create your project (like your Desktop or Documents folder).

Run this command:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

What's happening? This downloads Vite's project creator and starts an interactive setup.

Answer the Setup Questions

Question 1: Project name

? Project name: › vite-project
Enter fullscreen mode Exit fullscreen mode

Type your project name (like my-first-react-app) and press Enter.
💡 Use lowercase letters and hyphens, no spaces!

Question 2: Select a framework

? Select a framework: › 
  Vanilla
  Vue
❯ React
  Preact
  Lit
  Svelte
Enter fullscreen mode Exit fullscreen mode

Use your arrow keys to select React and press Enter.

Question 3: Select a variant

? Select a variant: › 
❯ JavaScript
  TypeScript
  JavaScript + SWC
  TypeScript + SWC
Enter fullscreen mode Exit fullscreen mode

Choose JavaScript for now.

💡 What are these options?

  • JavaScript - Regular JavaScript (perfect for learning!)
  • TypeScript - JavaScript with type checking (great for larger projects, but adds complexity)
  • SWC - A faster compiler (not needed when starting out)

Perfect! Your project is now created. You'll see:

✔ Project name: … my-first-react-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /path/to/my-first-react-app...
Done. Now run:

  cd my-first-react-app
  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

Step 2: Navigate to Your Project Folder

Change into your new project directory. Replace my-first-react-app with whatever name you chose:

cd my-first-react-app
Enter fullscreen mode Exit fullscreen mode

Step 3: Install Dependencies

Your project needs to download React, Vite, and other required packages. Run:

npm install
Enter fullscreen mode Exit fullscreen mode

What's happening?

  • npm (Node Package Manager) reads the package.json file in your project
  • This file lists all the packages your app needs in the dependencies and devDependencies sections
  • npm downloads them into a new node_modules folder
  • This takes 30-60 seconds

You'll see a progress bar and eventually a success message!

Step 4: Start Your Development Server

This is the exciting part! Run:

npm run dev
Enter fullscreen mode Exit fullscreen mode

You'll see output like this:

  VITE v5.0.0  ready in 523 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Enter fullscreen mode Exit fullscreen mode

🎉 Your React app is now running!

Open your browser and go to http://localhost:5173/

You should see the Vite + React welcome page with a counter button!

![What you should see: A page with the Vite and React logos, a counter button, and some welcome text]

✨ Try clicking the counter button - it works! This is your first React component in action.

🔥 Pro tip: Keep this terminal window open while you develop. This is your dev server running.

Understanding Your Project Structure

Let's explore what Vite created for you. Open your project in VS Code (or your preferred editor).

You'll see this structure:

my-first-react-app/
├── node_modules/       # Downloaded packages (don't touch!)
├── public/             # Static files (images, icons)
├── src/                # YOUR CODE LIVES HERE! 👈
│   ├── assets/         # Images, fonts, etc.
│   ├── App.css         # Styles for App component
│   ├── App.jsx         # Main App component
│   ├── index.css       # Global styles
│   └── main.jsx        # Entry point
├── index.html          # The HTML template
├── package.json        # Project info & dependencies
└── vite.config.js      # Vite settings
Enter fullscreen mode Exit fullscreen mode

Focus on the src/ folder - this is where you'll spend most of your time!

The 3 Key Files Every Beginner Should Understand

Let's look at the three most important files and how they work together:

1. index.html - The Starting Point 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Key points:

  • See that <div id="root"></div>? This is where React will inject your entire app!
  • It's currently empty, but React will fill it with your components
  • The script tag loads your React code

2. src/main.jsx - Connecting React to the Page 

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
Enter fullscreen mode Exit fullscreen mode

What's this doing?

  1. Imports React and ReactDOM (the libraries you need)
  2. Imports your App component (we'll look at this next!)
  3. Finds the <div id="root"> in your HTML
  4. Tells React to render the <App /> component inside it

Think of it as: "Hey React, put my App component into the 'root' div!"

3. src/App.jsx - Your First Component 

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Vite + React</h1>
      <button onClick={() => setCount(count + 1)}>
        count is {count}
      </button>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Breaking it down:

  • App is just a JavaScript function that returns HTML-like code (called JSX)
  • The useState line creates a piece of "state" - data that can change
  • count holds the current value
  • setCount is a function to update that value
  • When you click the button, it runs setCount(count + 1), updating the count
  • React automatically updates what you see on screen!

The Flow:

index.html (has <div id="root">)
    ↓
main.jsx (tells React to render App inside root)
    ↓
App.jsx (the component that shows on screen)
Enter fullscreen mode Exit fullscreen mode

Make Your First Change!

Let's personalize your app. Open src/App.jsx and replace everything with:

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Hello! I'm Learning React 👋</h1>
      <p>This is my very first React app!</p>

      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>

      {count > 0 && <p>Great job! You clicked the button! 🎉</p>}
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Save the file (Ctrl+S or Cmd+S) and look at your browser.

Did you see that? The page updated automatically without refreshing! This is Hot Module Replacement (HMR) - one of Vite's superpowers. Every time you save, your changes appear instantly.

What is useState? (Quick Explanation)

You've seen useState in the code, but what is it?

State is data that can change in your component. In our example:

  • The count is state - it changes when you click the button
  • Without state, your UI would be static (unchanging) 
const [count, setCount] = useState(0)
Enter fullscreen mode Exit fullscreen mode

This line creates state:

  • count is the current value (starts at 0)
  • setCount is how you update it
  • useState(0) means "start count at 0"

Why is this useful? React automatically re-renders (updates) your UI when state changes. You don't have to manually update the DOM!

Want to learn more about React hooks like useState? Check out the official React docs on hooks.

Your First Mini Challenge 🎯

Now it's your turn! Try these small modifications to reinforce what you've learned:

Challenge 1: Add a Reset Button

Add a second button that resets the count to 0.

💡 Hint (click to reveal)

 setCount(0)}&gt;
  Reset
Enter fullscreen mode Exit fullscreen mode

Challenge 2: Change the Starting Number

Make the count start at 10 instead of 0.

💡 Hint (click to reveal)

Change useState(0) to useState(10)

Challenge 3: Add Your Own Text

Modify the heading to include your name!

Common Questions & Troubleshooting

Q: The page shows "localhost refused to connect"

  • Make sure your dev server is running (npm run dev)
  • Check if another app is using port 5173
  • Try npm run dev -- --port 3000 to use a different port

Q: Changes aren't showing up

  • Make sure you saved the file
  • Check the terminal for errors
  • Try a hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

Q: Where do I add CSS styles?

  • For component-specific styles: edit App.css
  • For site-wide styles: edit index.css
  • CSS changes also update instantly with HMR!

What You've Accomplished

Congratulations! You just:

  • ✅ Set up a modern React development environment
  • ✅ Understood how React connects to your HTML
  • ✅ Learned about components and JSX
  • ✅ Discovered state with useState
  • ✅ Made changes and saw instant updates
  • ✅ Built confidence with hands-on coding

Next Steps

Ready to keep learning? Here's what to explore next:

  1. Create a new component - Make a Greeting.jsx file in src/
  2. Learn more about props - Pass data between components
  3. Try more hooks - Explore useEffect for side effects
  4. Build a small project - Try a todo list or simple calculator
  5. Read the official docs - React Documentation and Vite Documentation

Bonus: Quick Reference

Essential Commands 

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
Enter fullscreen mode Exit fullscreen mode

Where to Write Code

  • Components: src/ folder (create new .jsx files here)
  • Styles: src/App.css or src/index.css
  • Images: src/assets/ folder

Getting Help

  • React community is super helpful!
  • Search "[your question] React" on Google
  • Check Stack Overflow for common issues
  • Official React Discord and forums

Final Thoughts

You've taken your first steps into React development! Remember:

  • Everyone starts here - even senior developers were beginners once
  • Experiment and break things - that's how you learn best
  • Build projects - nothing beats hands-on experience
  • Be patient - React has a learning curve, but it gets easier!

The most important thing? Keep coding and have fun! 🚀

Found this helpful? Share it with other aspiring React developers!

Top comments (1)

Collapse
 
olivia-john profile image
Olivia John •

Great walkthrough! Super clear and beginner-friendly - love how you explained not just how to set up a React app with Vite, but also why each step matters. Perfect guide for anyone getting started!