React documentation
Official React docs (components, hooks, rendering, patterns).
Official React docs (components, hooks, rendering, patterns).
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev
export function App() {
return <main>Hello</main>;
}
type Props = { title: string };
export function Header({ title }: Props) {
return <header><h1>{title}</h1></header>;
}
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>;
}
import { useState } from "react";
export function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN((x) => x + 1)}>{n}</button>;
}
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>
);
}
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>;
}