React

The most widely used library for building user interfaces.

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.

← Back to Stack Picker All primers