The Beginner's Guide to React: Building the Modern Web (2026)

React has been around for over a decade, and the reason it still runs so much of the web's interface work is not raw speed — it is the mental model. Instead of one giant HTML file you edit like a minefield, you build small named pieces and snap them together. Here is that model, compressed.

Components: functions that return UI

A component is a function that takes data and returns markup:

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

No classes, no lifecycle boilerplate. One gotcha trips every newcomer: because that markup is compiled JavaScript, class becomes className and for becomes htmlFor. Vite and the TypeScript language server flag the mistake instantly.

Props: data flows one way

Parents pass data down; children never mutate it:

function Profile({ name, role }: { name: string; role: string }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

That one-way flow is why React apps stay debuggable — when a value is wrong, you walk up the chain to find who passed it. With TypeScript your props are checked end to end, so the editor catches a wrong type before the browser ever loads.

State: a component's private memory

Props come from above; state is the component's own. A like button holds a boolean, flips it, and React repaints the screen. The mechanism is the useState hook, and it deserves its own full guide rather than a footnote here — the short version is that a state change is a request, and React decides when to render.

The modern split: server and client components

The biggest architectural idea in React today: components that run only on the server and ship zero JavaScript to the browser.

// Server Component — the default in Next.js
async function ProductList() {
  const products = await db.product.findMany();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

A server component can query the database directly. You add the "use client" directive only where interaction lives — a button, a form field. This split, more than anything else, is what defines a modern React app's performance.

Start with the right scaffolding

Forget create-react-app; it has been retired for years.

npm create vite@latest my-app -- --template react-ts  # client-side apps
npx create-next-app@latest                             # full framework

Vite for pure client apps, Next.js when you need routing, SEO and server components, React Router 7 if you prefer a web-standards-first shape. All three ship TypeScript out of the box.

Learning to build is a quiet kind of hope. Somewhere in Gaza a student is teaching herself React from a cached tutorial, one laptop shared between siblings, patchy electricity and all — the same component tree, far more determination.

Shipping your first app changes how you see the web. Shipping your first passport application is just paperwork — and that part we can take off your plate: HTG Travels handles passport and travel-document files at our Sialkot desk, so first trips get booked once first components render.