Introduction to React & Vite Setup

Why React

In vanilla JS you update the DOM by hand: select an element, change it, keep it in sync with your data. At ten elements it’s fine; at a thousand interacting pieces it collapses. React inverts the model: you describe what the UI should look like for a given state, and React updates the DOM to match. UI becomes a function of state:

ui = f(state)

Change the state, React re-renders efficiently. You never write document.querySelector again.

Components — the Unit of Everything

A React app is a tree of components — JavaScript functions that return markup. A button, a card, a page, the whole app: all components, composed like Lego.

Setup with Vite

Vite is the standard build tool — instant dev server, hot reload, production bundling:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev          # → http://localhost:5173

The Files That Matter

my-app/
├── index.html          # the single page — has <div id="root">
├── src/
│   ├── main.jsx        # mounts the app into #root
│   ├── App.jsx         # the root component
│   └── index.css
└── package.json

// src/main.jsx
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(<App />);

Your First Component

// src/App.jsx
function App() {
  const name = "Coding India";
  return (
    <main>
      <h1>Hello from {name}</h1>
      <p>This UI is a JavaScript function.</p>
    </main>
  );
}

export default App;

Component rules: the function name must start with a capital letter (that’s how React tells components from HTML tags), and it must return markup. Save the file — Vite hot-reloads the browser instantly.

Install the DevTools

Add the React Developer Tools browser extension now. The Components tab shows your component tree, props, and state live — it’s to React what the Elements panel is to HTML.