Getting Started with React

This section documents React 19.x for the web, using function components and Hooks throughout (class components appear only where React still requires them, such as error boundaries). React Native is out of scope and gets only a pointer. The React 19 additions follow the current official React documentation. This content was generated with the assistance of AI and should be verified against react.dev before being relied on in production, since React APIs continue to evolve between releases.

This section’s bibliography lists the reference material consulted while preparing these pages.

React is a declarative, component-based JavaScript library for building user interfaces, maintained by Meta and a large open-source community. You describe what the UI should look like for a given state, and React updates the DOM to match when that state changes.

What React is

  • Declarative. You write components that return markup for the current state; you do not write the DOM mutations. Compare imperative code — document.createElement, el.append, el.remove — with a React component that just returns <ul>{items.map(...)}</ul> and lets React work out the minimal DOM change.

  • Component-based. The UI is a tree of functions (components) that each take inputs (props) and return a description of a piece of UI. Components compose like plain functions.

  • The virtual DOM and reconciliation. Rendering a component produces a lightweight tree of plain objects (React elements), not real DOM nodes. On each update React builds a new tree, diffs it against the previous one (reconciliation), and applies only the changed nodes to the real DOM. This is why you can re-render freely without hand-optimizing DOM writes.

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

React Native reuses the same React core and component model to build native mobile apps, swapping the DOM renderer for native views. It is out of scope here — this section is about React on the web. See the React "Learn" guide for the full introduction.

What’s new in React 19

React 19 is the current stable major line. The headline additions, each with its reference page:

  • Actions — pass an async function to <form action> and to transitions; pending, error, and optimistic state are handled for you. See useActionState, useFormStatus, and useOptimistic.

  • use — read a promise or a context during render, inside conditions and loops. See use.

  • ref as a prop — function components receive ref directly; forwardRef is no longer needed for new code. See the React 19 release post.

  • Document metadata — render <title>, <meta>, and <link> anywhere and React hoists them into <head>. See <title>.

  • Resource preloading APIs — preload, preinit, prefetchDNS, preconnect from react-dom. See preload.

  • Stable Server Components and Server Functions — see Server Components.

  • The React Compiler — an optional build-time optimizer that auto-memoizes components. See React Compiler.

Track releases at react.dev/versions and the React blog.

Creating an app

The framework route (recommended for products). A full-stack React framework gives you routing, data fetching, code splitting, and SSR out of the box:

See Creating a React App.

Build from scratch with Vite. When you do not want a framework, Vite is the standard toolchain:

npm create vite@latest my-app -- --template react
# or react-ts for TypeScript
cd my-app && npm install && npm run dev
Create React App was deprecated in February 2025 and is no longer recommended. Existing CRA projects should migrate to Vite or a framework. See Build a React App from Scratch.

Add React to an existing project. You can mount React into one part of a non-React page. See Add React to an existing project.

A quick experiment with no build step — an ES module from a CDN such as esm.sh:

<div id="root"></div>
<script type="module">
  import { createRoot } from 'https://esm.sh/react-dom@19/client';
  import { StrictMode, createElement } from 'https://esm.sh/react@19';
  createRoot(document.getElementById('root'))
    .render(createElement(StrictMode, null, createElement('h1', null, 'Hello')));
</script>

A normal project’s entry point looks like this:

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

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

See Installation.

Setup essentials

  • Editor setup — an editor with JSX/TSX support and format-on-save. See Editor setup.

  • React Developer Tools — the browser extension adds a Components tab and a Profiler tab. See React Developer Tools.

  • StrictMode — wrap the tree so React double-invokes renders and Effects in development to surface impure code and missing cleanup. See <StrictMode>.

  • eslint-plugin-react-hooks — enforces the Rules of Hooks and checks Effect dependency arrays. Ships enabled in the Vite React template.

  • The React Compiler — an optional Babel/SWC plugin that auto-memoizes so you rarely need useMemo / useCallback / memo by hand; see Performance and React Compiler.

See Setup.