Build a React app with Vite

React is a JavaScript library for building user interfaces. Instead of writing HTML pages that the browser renders statically, React lets you build interactive UIs from small, reusable pieces called components.

Here are the core concepts you'll work with:

• •Components — The building blocks of any React app. Each component is a function that returns what should appear on screen.
• •JSX — A syntax that lets you write HTML-like code inside JavaScript. It looks like HTML but compiles to JavaScript.
• •State — Data that can change over time. When state changes, React automatically re-renders the component to reflect the new data.
• •Props — Data passed from a parent component to a child component. Props let you customize and reuse components.

React is the most widely used JavaScript UI library. It powers Facebook, Instagram, Airbnb, Netflix, and millions of other applications.

Vite (French for "fast") is a modern build tool for web projects. It replaces older tools like Create React App and Webpack with a much faster alternative:

• •Instant server start — Vite starts the dev server in milliseconds, not seconds
• •Lightning-fast HMR — changes appear in the browser almost instantly as you save
• •Optimized builds — production builds use Rollup for small, efficient bundles

Vite is now the recommended way to start React projects. It supports React, Vue, Svelte, and vanilla JavaScript/TypeScript out of the box.

Let's create a new React + Vite project using the terminal:

Open your terminal and run these commands:

cd %USERPROFILE%\Desktop
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Using Windows? See Pro Tip #1 to set up Git Bash as your default IDE terminal.

Start the development server:

npm run dev

Your browser should open automatically to http://localhost:5173 showing the Vite + React welcome page. If it doesn't, open that URL manually.

Let's look at the files Vite created for you:

my-react-app/
├── index.html          # Entry HTML file
├── package.json        # Dependencies & scripts
├── vite.config.js      # Vite configuration
├── public/             # Static assets (favicon, images)
└── src/
    ├── main.jsx        # App entry point
    ├── App.jsx         # Root component
    ├── App.css         # App styles
    └── index.css       # Global styles

• •index.html — The single HTML file that loads your React app. Vite injects your bundled JavaScript here.
• •src/main.jsx — The entry point that mounts your React app into the DOM. You rarely need to edit this.
• •src/App.jsx — Your root component — this is where you'll build your app's UI.
• •vite.config.js — Vite's configuration file. The React plugin is already set up for you.

Now let's replace the default Vite template with our own app. Components are functions that return JSX — the HTML-like syntax React uses.

Open src/App.jsx and replace its contents with:

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

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

  return (
    <div className="app">
      <h1>My First React App</h1>
      <p>Welcome to your React + Vite project!</p>

      <div className="card">
        <button onClick={() => setCount(count + 1)}>
          Count: {count}
        </button>
        <p>Click the button to see React state in action.</p>
      </div>

      <footer>
        <p>Built with React + Vite</p>
      </footer>
    </div>
  )
}

export default App

Now replace src/App.css with clean styles:

/* src/App.css */
.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  font-family: system-ui, sans-serif;
}

h1 {
  color: #0A1633;
  font-size: 2rem;
}

.card {
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 12px;
  background: #F6F8FC;
}

button {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  background: #2F6BFF;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #1a55e8;
}

footer {
  margin-top: 2rem;
  color: #666;
  font-size: 0.875rem;
}

Save both files and check your browser — you should see your app with a heading, welcome text, and a clickable counter button!

Real React apps are built from many components. Let's create a reusable Greeting component. Create a new file called src/Greeting.jsx:

// src/Greeting.jsx
function Greeting({ name }) {
  return (
    <div className="greeting">
      <h2>Hello, {name}! 👋</h2>
      <p>This is a reusable React component.</p>
    </div>
  )
}

export default Greeting

Now import and use it in App.jsx — replace the file with:

// src/App.jsx
import { useState } from 'react'
import Greeting from './Greeting'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Developer')

  return (
    <div className="app">
      <h1>My First React App</h1>

      <Greeting name={name} />

      <div className="card">
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
        />
        <button onClick={() => setCount(count + 1)}>
          Count: {count}
        </button>
      </div>

      <footer>
        <p>Built with React + Vite</p>
      </footer>
    </div>
  )
}

export default App

Check your browser — you should see a greeting that updates as you type! This demonstrates two core React concepts working together.

Let's save your project to GitHub so it's backed up and ready to deploy. Vite already created a .gitignore for you, so node_modules won't be committed.

cd my-react-app
git init
git add .
git commit -m "Initial commit: React + Vite app"
gh repo create my-react-app --public --source=. --push

If you don't have the GitHub CLI (gh) installed, you can also create the repository manually on github.com and push with git remote add origin.

Now let's deploy your React app to the internet. Vercel automatically detects Vite projects and configures everything for you.

1. Go to vercel.com/new
2. Click "Import" next to your my-react-app repository.
3. Vercel will auto-detect Vite — just click "Deploy."
4. Wait about 30 seconds. Your app is now live at https://my-react-app.vercel.app!

Every time you push to GitHub, Vercel will automatically rebuild and redeploy your app. Push a change and watch it go live in seconds.

Congratulations — you've built and deployed a React app! Here are some ways to keep going: