Why React: components and JSX

Why React?

In the DOM module you changed the page by hand: find an element, change its text, add a class, append a new item. That is fine for a small page. In a big app, such as a food delivery app with a menu, filters, offers and a cart, keeping every part of the screen in step with the data by hand becomes slow to write and easy to get wrong.

React turns the idea around. You describe what the screen should look like for the current data, and React works out which DOM changes are needed. People say the UI (user interface) is a function of the data: same data in, same screen out.

Components

A component is a JavaScript function whose name starts with a capital letter and which returns JSX (HTML-like markup). You use it like an HTML tag: <ProductCard />. Components can use other components, so a whole page becomes a tree of components.

function ProductCard() {
  return (
    <div className="card">
      <h2>Rice 5 kg</h2>
      <p>Rs 320</p>
    </div>
  );
}

export default function App() {
  return (
    <main>
      <h1>Sharma Kirana</h1>
      <ProductCard />
      <ProductCard />
    </main>
  );
}

App
|-- Header
|-- ProductList
|     |-- ProductCard  (one for each product)
|-- Cart
      |-- CartLine     (one for each item)

JSX rules

JSX looks like HTML inside JavaScript. A build tool (such as Vite) turns it into normal JavaScript function calls before the browser runs it. A few rules are different from HTML:

function OrderSummary() {
  const name = 'Asha';
  const items = 3;
  const total = 480;
  return (
    <>
      <h2>Hello, {name}</h2>
      <p className="muted">{items} items, total Rs {total}</p>
      <label htmlFor="note">Note for the delivery partner</label>
      <input id="note" />
    </>
  );
}

Starting a React project

The official site, react.dev, recommends starting a full app with a framework such as Next.js or React Router, because they add pages (routing) and data loading. To learn React, or for a simple single-page app, Vite is a fast and popular build tool. Create React App (create-react-app) is deprecated: do not use it for new projects, even though many old tutorials do.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Vite makes a few files for you. index.html has an empty <div id="root">. src/main.jsx tells React to take over that div. src/App.jsx is your first component. When you save a file, the browser updates at once.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

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

Modern React (React 19) uses function components and hooks. Older code and tutorials use class components (class Cart extends React.Component). You may see them at work, but write new code with functions.