React + Vite Setup Guide (2026): Your First Working App, Explained

"The right moment to build your first React component isn't right after binge-watching tutorials — it's once you've set up a proper environment and actually understand why each piece is there."

In the previous article, we looked at what React is, why it was created at Facebook, and how it reshaped the way developers approach building web applications.

Now we shift from concepts to hands-on work.

Before writing any component, you need a workspace that can run React, reload your changes instantly, and support you as your application grows.

By the end of this article, you'll have a working React application on your own machine, and you'll understand what each tool in the setup actually does.

Why Can't We Just Write React in an HTML File?

Beginners almost always ask this question first.

React is "just JavaScript," so shouldn't a plain HTML file be enough?

Technically, that's true in a very limited sense.

But real-world React projects rely on things like:

• JSX
• ES Modules
• Hot Module Replacement
• Package Management
• Build Optimization

None of these are natively understood by browsers.

That's why developers rely on tooling that transforms and prepares the code before it ever reaches the browser.

It's similar to cooking a meal.

Raw ingredients aren't eaten straight from the fridge — they get prepped first.

Setting up a React project follows the same logic.

The Tools We'll Install

There's a small set of tools that nearly every React developer relies on, and we'll install all of them in this guide.

Each tool solves one specific problem in the workflow.

Once everything is in place, you'll barely notice them running in the background.

Understanding Node.js

A common misconception is that React itself runs on top of Node.js.

That isn't the case.

React executes in the browser, not in Node.

Node.js is there to support you while you're building the app, not while the app is running for end users.

It allows you to:

• Install libraries
• Start development servers
• Build optimized production bundles
• Manage project dependencies

Without Node.js, getting React installed and running would be far more painful.

What Exactly Is npm?

Node.js installation automatically includes npm, short for Node Package Manager.

Picture starting a new site from zero and needing several libraries at once, such as:

• React
• React Router
• Axios
• Tailwind CSS
• Redux Toolkit

Rather than manually downloading each of these, npm handles installation through a single command.

For instance:

npm install axios

Running that is enough — npm fetches the package, wires it into your project, and tracks which version you're using.

Why Modern React Uses Vite

Older tutorials commonly show a command like this to scaffold a project:

npx create-react-app my-app

For a long stretch of time, that was the go-to method.

These days, though, the React community has largely shifted toward Vite instead.

What drove that shift?

Mainly the desire for a snappier day-to-day development experience.

Vite brings:

• Instant project startup
• Very fast Hot Module Replacement (HMR)
• Smaller production build sizes
• Simpler configuration overall
• Stronger general performance

For anyone learning React now, starting with Vite is the sensible choice.

Step 1: Install Node.js

Grab the current LTS (Long-Term Support) release of Node.js from its official site.

Once it's installed, open a terminal to confirm the install worked.

node -v

The output should resemble:

v24.x.x

Then check npm as well:

npm -v

If both commands return version numbers, your machine is set up correctly.

Step 2: Install Visual Studio Code

You can technically write React in any editor, but VS Code has become the default choice thanks to its speed, its extension ecosystem, and its strong JavaScript tooling.

VS Code Extensions Every React Developer Should Install

Installing a small set of add-ons early on makes a real difference in daily comfort. Worth adding to your setup:

• ESLint, for catching problems in your code
• Prettier, for consistent formatting
• Error Lens, for surfacing errors inline
• Auto Rename Tag, for keeping matching tags in sync
• Path Intellisense, for autocompleting file paths
• GitLens, for richer Git information inside the editor
• ES7+ React Snippets, for quick React boilerplate

Together these cover formatting, spotting mistakes early, autocompletion, and general productivity.

Step 3: Create Your First React Project

Open a terminal window and run:

npm create vite@latest

You'll be asked to answer a few setup prompts:

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

Once scaffolding finishes, navigate into the new project folder:

cd react-beginners

Then install the project's dependencies:

npm install

And finally, launch the dev server:

npm run dev

The terminal output will look something like:

Local: http://localhost:5173

Open that address in your browser.

Your first React application is now up and running.

Understanding the Project Structure

A freshly generated React project can look intimidating at a glance, but in practice there are only a handful of files you'll interact with regularly.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Nearly all the code you write day to day lives inside this folder.

App.jsx

Consider this the root component of your app.

Every feature you build going forward will start from here.

main.jsx

This is the file that wires your React app into the actual webpage.

It's what tells React exactly where in the DOM your app should render.

package.json

Here you'll find your project's metadata, along with its dependencies and the scripts used to run or build it.

node_modules

This directory holds all the packages your project relies on.

Leave it alone — there's no reason to modify anything inside it manually.

Make Your First Change

Open App.jsx and swap out the boilerplate content with:

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Save the file and watch the browser.

Did you catch it? The page updated on its own, with no manual refresh required.

That behavior is called Hot Module Replacement, or HMR.

Small conveniences like this one add up, saving considerable time across the life of a project.

Angular Developers: Here's What's Different

Coming from Angular, you'll find the overall workflow recognizable, just with less ceremony.

React leans toward flexibility, letting you assemble things your own way, while Angular ships with more structure built in from the start.

Neither approach is objectively superior — they simply solve the problem differently.

Common Mistakes Beginners Make

While getting comfortable with React, you'll probably bump into a handful of recurring issues.

• Forgetting to run npm install
• Running commands from the wrong directory, outside the project folder
• Making edits inside node_modules
• Working with an outdated Node.js version
• Shutting the terminal window while the dev server is still running

Once you recognize these patterns, they're straightforward to avoid.

What You've Learned

By working through this article, you've covered:

• The reasoning behind needing a dedicated development environment for React
• What Node.js and npm are actually responsible for
• Why Vite has become the standard tool for building React projects
• The steps to scaffold and run your first React application
• What each of the core project files is for
• How Hot Module Replacement changes the way you iterate on code

At this point, you have what you need to begin building real React applications.

Practice Challenge

Before moving on to the next part, try working through these exercises:

• Scaffold a brand-new React project with Vite.
• Modify the heading text inside App.jsx.
• Add a short introduction featuring your own name.
• Adjust the text color using CSS.
• Stop and manually restart the dev server yourself.

Getting hands-on with these steps is the quickest path to feeling confident with the toolchain.

What's Next?

With your environment ready to go, the next step is digging into one of the core ideas behind React.

Part 3 turns to JSX — the syntax that blends HTML-like markup directly into your JavaScript code.

You'll cover:

• What JSX actually is
• The reasoning behind React's use of JSX
• The rules JSX enforces
• How expressions work inside JSX
• The differences between HTML and JSX
• Typical mistakes newcomers run into
• Practices for keeping your JSX clean and readable

By the time you finish that article, you'll be ready to write your own real React components with confidence.