Modern React Setup with Vite: Step-by-Step Guide for Beginners

Build and run your first React project using Vite with fast dev server and clean project structure.

Ali Aslam · 2025-08-07 19:32 · 1 claps · 3.8 min read

#reactjs #react-setup #react-with-vite #react-vite #vites

Modern React Setup with Vite: Step-by-Step Guide for Beginners

The article is part of series: Learn React Differently: A Beginner’s Guide That Teaches the Why, Not Just the How

Create lightning-fast React apps with Vite — a modern build tool that blows CRA out of the water.

When you’re beginning your journey with React, your first instinct might be to jump into building components. But there’s an important foundational step that can shape your entire development experience: how you set up your environment.

You can switch to video version if you prefer to watch rather than read. There is also 1 hour React Crash Course available on the channel.

[embed]Create Your First React 19 Project with Vite — React Tutorial

In 2025, the right choice is no longer Create React App. It’s Vite. But understanding why we use Vite — and how we set it up properly — is about more than commands in the terminal.

This guide is for developers who want to understand React environments from first principles. We’ll explore not just the “what,” but the “why” behind every step.

Why Environment Setup Matters in React

React isn’t a complete framework. It’s a UI library. That means it doesn’t come with batteries included — no routing, no state management, and crucially: no build tooling.

You need a tool to:

Start a local dev server
Compile JSX into real JavaScript
Bundle your assets for production
Enable fast refresh when you save files

In the early days, this role was filled by Create React App (CRA). But as web development has evolved, CRA has fallen behind. It’s slow, inflexible, and over-abstracted.

Today, the modern standard is Vite.

What Is Vite, Conceptually?

Vite (pronounced “veet”) is more than a dev server. It represents a new mental model for frontend tooling:

Instant startup: No waiting for the whole app to compile. Vite serves unbundled code using native ES modules.
On-demand transformation: Only the files you actually use are compiled.
Lightning-fast HMR (Hot Module Replacement): Edits appear in the browser instantly, without a full refresh.

In short, Vite aligns with React’s philosophy: reactive, fast, and minimal.

Let’s break down how to use it, step-by-step.

Step 1: Creating a New React App with Vite

In your terminal, run:

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

Why this works:

npm create vite@latest fetches the latest Vite scaffolding tool
my-react-app is the name of your new folder
--template react applies the official Vite + React starter

This gives you a minimal project. No excess files. No guesswork.

Step 2: Installing Dependencies

Navigate into your project and install packages:

cd my-react-app
npm install

This downloads:

react and react-dom (the core libraries)
vite (the build tool)
@vitejs/plugin-react (handles JSX and fast refresh)

Every tool is explicit. No magic.

Step 3: Starting the Development Server

Run:

npm run dev

Vite launches your app on [http://localhost:5173/](http://localhost:5173/)

Unlike older tools, Vite doesn’t bundle the entire app upfront. It transforms only what the browser requests. That’s why it’s so fast.

Step 4: Understanding the File Structure

When you open the project, you’ll see:

my-react-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    └── App.jsx

Let’s walk through each piece.

`index.html`

This is not like traditional HTML. Vite uses it as an entry template.

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

React mounts into #root. The type="module" script kicks off the app.

`src/main.jsx`

This is the true JavaScript entry point.

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>
);

Line-by-line explanation:

import React from 'react': React must be in scope to use JSX.
import ReactDOM from 'react-dom/client': The modern API for mounting React apps.
App is your top-level component.
index.css adds global styles.
ReactDOM.createRoot(...) mounts the app into the real DOM.
<React.StrictMode> is a development-only wrapper that highlights side effects.

`App.jsx`

This is your first component. By default:

function App() {
  return <h1>Hello Vite + React!</h1>;
}
export default App;

A component is just a function that returns JSX. We’ll explore JSX in the next article, but for now: this syntax is how we describe UI in React.

Step 5: Creating Your First Custom Component

Let’s build a simple button.

In src/components/ClickButton.jsx:

function ClickButton() {
  return (
    <button onClick={() => alert('Hello from Vite!')}>
      Click Me
    </button>
  );
}
export default ClickButton;

Explanation:

ClickButton is a functional component.
The onClick attribute triggers an alert.
The component returns JSX to render a button.

Now use it in App.jsx:

import ClickButton from './components/ClickButton';
function App() {
  return (
    <div>
      <h1>Hello Vite + React</h1>
      <ClickButton />
    </div>
  );
}

export default App;

When you save, the browser updates instantly. That’s hot module replacement (HMR) in action.

Optional: Adding Global Styles

You can edit src/index.css to apply base styles:

body {
  font-family: system-ui, sans-serif;
  padding: 2rem;
  background: #f4f4f4;
}

Vite automatically includes this CSS thanks to the import in main.jsx.

What You Now Understand

At this point, you haven’t just created a project — you’ve understood the why behind every file, command, and behavior:

React relies on a build step to transform JSX
Vite provides that build step, dev server, and fast refresh
Each file plays a role: HTML entry point, JavaScript entry, component tree

You didn’t touch a single class or global variable. That’s intentional. React isn’t about imperative DOM updates. It’s about declarative components powered by state — which we’ll explore in coming articles.

Coming Up Next

In the next article, we’ll break down what JSX actually is, how it works under the hood, and how it changes the way we think about UI.

Setting up a React app with Vite isn’t just fast. It’s the foundation for a modern React mental model.

Let’s build on it, one concept at a time.

💬 Help others discover this React series! Clap if you learned something new, share with your dev circle, and subscribe on YouTube so you don’t miss the next videos.

Next article: JSX in React: Syntax Differences, Babel, and Writing Your First Component

메타데이터

post_id: abc55eb94a33
slug: modern-react-setup-with-vite-step-by-step-guide-for-beginners-abc55eb94a33
url: https://medium.com/@a1guy/modern-react-setup-with-vite-step-by-step-guide-for-beginners-abc55eb94a33
canonical_url: https://medium.com/@a1guy/modern-react-setup-with-vite-step-by-step-guide-for-beginners-abc55eb94a33
author_url: https://medium.com/@a1guy
status: ok
fetched_at: 2026-08-06 03:46:33

Modern React Setup with Vite: Step-by-Step Guide for Beginners

Why Environment Setup Matters in React

What Is Vite, Conceptually?

Step 1: Creating a New React App with Vite

Step 2: Installing Dependencies

Step 3: Starting the Development Server

Step 4: Understanding the File Structure

index.html

src/main.jsx

App.jsx

Step 5: Creating Your First Custom Component

Optional: Adding Global Styles

What You Now Understand

Coming Up Next

More from Ali Aslam

ChatGPT Features — Memory, Retention andCustom Instructions

Learn React Differently: A Beginner’s Guide That Teaches the Why, Not Just the H…

Prompt Engineering via Prompt Patterns — Reflection Pattern

More on 🌐 · Web Development

The State of Axion DAO

Axion DAO: Locked & Loaded

How To Properly Use An Epi Pen For Allergic Reactions

Vibe Coding is OVER.

A História Intimista de Abramovic e Ulay

`index.html`

`src/main.jsx`

`App.jsx`