React

React documentation

docs

Official React docs (components, hooks, rendering, patterns).

Quickstart (Vite React + TS)

bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Project setup (component file)

tsx
export function App() {
  return <main>Hello</main>;
}

Component (TSX)

tsx
type Props = { title: string };

export function Header({ title }: Props) {
  return <header><h1>{title}</h1></header>;
}

useEffect pattern

tsx
import { useEffect, useState } from "react";

export function Clock() {
  const [t, setT] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setT(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  return <time>{new Date(t).toLocaleTimeString()}</time>;
}

State (useState)

tsx
import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN((x) => x + 1)}>{n}</button>;
}

Iteration (render list)

tsx
type Item = { id: string; name: string };

export function List({ items }: { items: Item[] }) {
  return (
    <ul>
      {items.map((it) => (
        <li key={it.id}>{it.name}</li>
      ))}
    </ul>
  );
}

Derived values (useMemo)

tsx
import { useMemo } from "react";

export function Total({ xs }: { xs: number[] }) {
  const sum = useMemo(() => xs.reduce((a, b) => a + b, 0), [xs]);
  return <output>{sum}</output>;
}