React

What is it?

React is a JavaScript library, created at Facebook in 2013, for building user interfaces out of components - small, reusable pieces of UI like a button, a search bar, or a comment thread. Instead of telling the browser step by step how to update the page, you describe what the UI should look like for any given data, and React updates the page for you whenever that data changes.

It's the most in-demand frontend skill in the job market, with the largest ecosystem of tutorials, packages, and community answers of any UI framework.

When to use it

Reach for React when your interface has lots of changing state - dashboards, social feeds, editors, shopping carts - or when you're optimizing for employability, since React appears in more job listings than any other frontend framework. Skip it for simple content sites and portfolios, where plain HTML, CSS, and JavaScript are faster to build and to load.

Core concepts

• Components - JavaScript functions that return markup. You compose big UIs by nesting small components.
• JSX - the HTML-like syntax inside JavaScript files. It looks unusual at first but quickly becomes natural.
• Props - data passed into a component from its parent, like function arguments. Props flow one way: down.
• State - data a component owns and can change. When state changes (via the useState hook), React re-renders the component automatically.
• Hooks - functions like useState and useEffect that let components hold state and run side effects such as fetching data.

A taste of the code

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Note what's missing: no code to find the button or update its text. You declare that the button shows count, and React keeps the page in sync whenever setCount runs.

Your first steps

1. Be comfortable with JavaScript fundamentals first - functions, arrays, objects, and arrow syntax. React is much harder without them.
2. Install Node.js, then scaffold a project with npm create vite@latest my-app -- --template react.
3. Run npm install and npm run dev, open the local URL, and edit src/App.jsx - the page updates instantly.
4. Build a small stateful app: a counter, then a todo list. These exercise props, state, lists, and events - 90% of daily React.
5. Learn useEffect by fetching data from a free public API and rendering the results.

Common beginner mistakes

• Calling hooks conditionally. Hooks like useState must run in the same order on every render - never inside if statements, loops or after an early return.
• Expecting state to change immediately. After setCount(count + 1), count still holds the old value until the next render. Use the updater form, setCount(c => c + 1), when the new value depends on the old.
• Fetching in useEffect without handling races. If the inputs change quickly, an older response can arrive last and overwrite newer data. Ignore stale responses in the effect's cleanup, or use a data-fetching library.
• Passing props through many layers. When five components just hand a value down, reach for context - or rethink where the state lives.
• Following Create React App tutorials. CRA is deprecated; start projects with Vite or a framework instead.

Getting it online

npm run build turns a Vite-based React app into static files that any static host can serve - Netlify, Cloudflare Pages, GitHub Pages or shared hosting. Our React deployment guide covers each one, plus the fixes for blank pages and 404s when refreshing a route.

If you move to Next.js with server rendering, you'll need a host that runs Node, such as Vercel or Render.

Go deeper