React: A User Interface Builder for the Modern Web

React has shaped how developers build interactive UIs for over a decade. Whether this is your first look or you’re weighing it up for your stack, this guide covers the ground, from the basics through to native apps and server-side rendering, grounded in where the library actually is today.

What React is, and why it still matters in 2026

React is a JavaScript library for building user interfaces. It was born at Facebook in 2013 and is now maintained by Meta alongside a large open-source community. Its job is narrow on purpose: build UIs and manage component state. Routing, data fetching, styling, and build tooling come from separate libraries, React deliberately doesn’t prescribe a full architecture.

You’ll find it in products from Meta (Facebook, Instagram), Netflix, Airbnb, and WhatsApp Web, and it’s a staple of job postings, especially paired with TypeScript or Next.js. A few terms you’ll meet along the way:

• Components — reusable pieces of UI logic and markup you compose to build an app.
• JSX — a syntax extension that lets you write HTML-like markup directly inside JavaScript.
• Virtual DOM — React computes the minimal set of updates needed, rather than re-rendering everything.
• Hooks — functions like useState and useEffect that add state and behavior to function components.
• Learn once, write anywhere — the same model powers web, mobile, and server rendering.

function HelloWorld({ name }) {
  return <div>Hello, {name}!</div>;
}

// <HelloWorld name="Taylor" /> renders "Hello, Taylor!"

That tiny greeting component is a first taste of JSX, props, and the function-component form.

Core ideas: declarative, component-based, learn once write anywhere

React lets you build UIs declaratively: you describe what each state should look like, and React works out the minimal DOM operations when the data changes. That’s far easier to reason about than telling the browser how to mutate the DOM step by step.

It’s also component-based. You build small, encapsulated components and compose them into complex UIs, a world away from jQuery or vanilla JS, where DOM manipulation gets tangled as an app grows.

And the same model runs beyond the web. With React Native, the same patterns, components, hooks, unidirectional data flow, apply across platforms:

// Web
function ToggleButton({ isOn, onToggle }) {
  return <button onClick={onToggle}>{isOn ? "ON" : "OFF"}</button>;
}

// React Native (same logic, different UI primitives)
function ToggleButton({ isOn, onToggle }) {
  return (
    <Pressable onPress={onToggle}>
      <Text>{isOn ? "ON" : "OFF"}</Text>
    </Pressable>
  );
}

The component logic is identical; only the UI primitives differ.

Components: from functions to large UI trees

React components are just JavaScript functions that return JSX describing part of the UI. Today, function components are the norm. Class components used lifecycle methods for state; hooks have replaced most of those patterns since function components gained them in React 16.8.

function ProfileCard({ user }) {
  return (
    <div className="profile-card">
      <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />
      <h2>{user.name}</h2>
      <p>Joined {new Date(user.joinDate).toLocaleDateString()}</p>
    </div>
  );
}

Components compose. A video page might combine a Thumbnail, VideoPlayer, CommentsList, and LikeButton, each fed data through props. You build them with ordinary functions, loops, and conditionals, no separate template language, and they manage their own state. Keeping data inside components instead of scattering it across the DOM makes a UI far more predictable to build and debug.

JSX and the role of JavaScript

JSX is an optional syntax extension that lets you write markup close to HTML inside JavaScript. It compiles to plain JS, Babel, TypeScript, or the React compiler handle it at build time:

// JSX version
function NavBar({ items }) {
  return (
    <nav>
      <ul>
        {items.map((item) => (
          <li key={item.href}>
            <a href={item.href}>{item.label}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

// ...compiles to React.createElement calls
React.createElement(
  'nav',
  null,
  React.createElement(
    'ul',
    null,
    items.map((item) =>
      React.createElement(
        'li',
        { key: item.href },
        React.createElement('a', { href: item.href }, item.label),
      ),
    ),
  ),
);

Inside JSX you can drop in almost any JavaScript expression, map over arrays, branch with a ternary, or call a helper. Bundlers like Vite and Next.js process JSX for you. A good habit: keep JSX in small chunks and split larger blocks into their own components so the codebase stays readable.

State, props, and hooks

Props are the read-only inputs a parent passes to a child, <Button label="Save" /> passes "Save" into the label prop. Don’t mutate props; treat them as data handed down. When a child needs to talk back, it does so through event handlers passed in as props.

State is data that changes over time: whether a dropdown is open, what’s in a cart, what a user typed. When state changes, React efficiently updates just the components that depend on it, via the virtual DOM. The hooks you’ll reach for most:

• useState — declares a state variable and a setter.
• useEffect — runs side effects after render (API calls, subscriptions, event listeners).
• useContext — reads shared state without prop-drilling.
• useReducer — manages more complex state transitions, Redux-reducer style.
• useRef — references DOM nodes or holds mutable values across renders.

function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked((prev) => !prev)}>
      {liked ? "❤️ Liked" : "🤍 Like"}
    </button>
  );
}

A few lines of state, an event handler, and declarative markup, and you have a genuinely interactive UI.

Building real apps: data down, actions up

A todo app is just components working together. Data flows one direction, from parent down to child. The root component usually holds the state and passes handlers down: props flow down, actions flow up. That’s the pattern that makes React predictable.

function App() {
  const [todos, setTodos] = useState([]);
  const addTodo = (text) =>
    setTodos([...todos, { id: Date.now(), text }]);

  return (
    <div>
      <TodoInput onAdd={addTodo} />   {/* handler via props */}
      <TodoList todos={todos} />      {/* data via props */}
    </div>
  );
}

React handles event delegation for you, so you don’t worry about whether a click bubbles to the right component; you write handlers as normal, because it’s just JavaScript. This unidirectional flow (the same idea Flux formalized, actions through a dispatcher to a store) is what makes features, debugging, and isolated testing easier than in frameworks with two-way parent/child chatter. It’s also how React powers single-page apps that update without full reloads.

React beyond the browser: native, SSR, and Server Components

React Native renders to real native UI components on Android and iOS. Around since February 2015, it maps a <Text /> or <Button /> to the actual platform widget, so you get a native feel rather than a WebView wrapper, while writing JavaScript and integrating any native library or SDK.

On the server, React supports server-side rendering for a faster first paint and better SEO. Next.js and Remix render components on the server into HTML the client hydrates. And since React 19, Server Components let certain components run only on the server, cutting the JavaScript shipped to the browser.

React isn’t limited to HTML either: the same patterns and hooks power canvas rendering (React Three Fiber), terminal UIs (Ink), and AR/VR.

Learning React in 2026, the right way

Before diving in, get comfortable with a couple of fundamentals:

• Modern JavaScript (ES6+): let/const, arrow functions, destructuring, modules, promises, and async/await.
• A working grasp of HTML and CSS for layout and styling.

Then a practical path:

1. Start with the official React Quick Start guide to get running with the basics.
2. Build something small, a counter, a search box that fetches GitHub users, an expense tracker.
3. Experiment in a sandbox (CodeSandbox, StackBlitz) or set up a local project with npm create vite@latest.
4. As it grows, add routing, forms, API calls, and persistent storage.

Master hooks early, especially useState and useEffect, and skip old class-component tutorials. Don’t reach for Redux or MobX on day one; core React patterns carry you a long way. Build things you actually care about (a reading list, a recipe app) and you’ll stick with it.

Adding React to an existing project

You don’t have to start from scratch. React drops into a legacy server-rendered app (Rails, Django, Laravel) cleanly: mount a React root onto specific DOM nodes and render interactive widgets without rewriting existing code.

import { createRoot } from 'react-dom/client';

function Counter({ initial }) {
  const [count, setCount] = useState(initial);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

const node = document.getElementById('widget');
const data = JSON.parse(node.getAttribute('data-initial'));
createRoot(node).render(<Counter initial={data.count} />);

Your server renders a placeholder with initial data, and React takes over the interactivity, an easy way to add dynamic pieces without touching the rest. React also plays well with the wider ecosystem, React Router, Redux, form and data-fetching libraries, and tools like D3 for visualization while React manages component structure. Most modern starters default to TypeScript for better type safety.

Where React is heading, and how to keep up

The team keeps shipping: concurrent rendering, Suspense, Server Components, tested on Meta’s own large apps before wider release. To stay current, follow the official React blog, GitHub release notes, and the docs for Next.js, Remix, and Expo, plus meetups and community forums.

The best part: the core principles, components written in JavaScript, declarative views, unidirectional data flow, stay stable even as the library evolves. Learn those well, build something real, and you’ll be fine.