JavaScript frameworks

React

A library for building user interfaces from components. You describe what the UI should look like for any given state, and React keeps the DOM in sync.

Demo 01

State & re-render — a counter

React's core idea: store data in useState, and the component re-renders automatically when it changes. These buttons below are a real, live React component.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count - 1)}>–</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Demo 02

Reusable components mapped over data

Define a <Card> once, then render an array of data with .map(). Each item becomes a component — the React way to build lists.

function Card({ emoji, title, desc }) {
  return (
    <div className="r-card">
      <div className="emoji">{emoji}</div>
      <h3>{title}</h3><p>{desc}</p>
    </div>
  );
}

{data.map(d => <Card key={d.title} {...d} />)}

Demo 03

Controlled input

In React the input's value comes from state, and every keystroke updates that state through onChange. The component is the single source of truth.

const [text, setText] = useState("");
<input value={text} onChange={e => setText(e.target.value)} />
<p>You typed: <b>{text}</b> ({text.length} chars)</p>

Demo 04

A to-do app with useState

Putting it together: add tasks, toggle them complete, delete them. All state lives in one array, and React redraws the list whenever it changes.

const [todos, setTodos] = useState([]);

const add = (text) =>
  setTodos([...todos, { id: Date.now(), text, done: false }]);

const toggle = (id) =>
  setTodos(todos.map(t =>
    t.id === id ? { ...t, done: !t.done } : t));

Built with real React 18 loaded from CDN (react + react-dom) and Babel Standalone to compile the JSX in the browser. Every demo above is a genuine React component using useState and live re-rendering. The shared CSS shell provides page styling.

↑ All 64 tools