React Tutorial for Beginners: Build a Real Component in One Sitting

01.Scaffold a project

Use Vite — it's faster and simpler than Create React App.

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

02.Components and JSX

A component is just a function that returns JSX. JSX is JavaScript that looks like HTML. The two rules: tags must close, and attribute names use camelCase (`className`, not `class`).

export function Greeting({ name }: { name: string }) {
  return <h1 className="text-xl font-semibold">Hello, {name}</h1>;
}

03.State with useState

`useState` returns `[value, setter]`. Calling the setter re-renders the component. State updates are batched — don't depend on the value being updated synchronously.

import { useState } from 'react';
export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Clicked {count}×</button>;
}

04.Side effects with useEffect

`useEffect` runs after render. Use it for subscriptions, timers and (sparingly) data fetching. For data fetching in real apps, reach for TanStack Query — it handles caching, retries and stale state.

05.A complete todo component

Put it together and you have a usable mini app.

import { useState } from 'react';
export function Todos() {
  const [items, setItems] = useState<string[]>([]);
  const [draft, setDraft] = useState('');
  return (
    <div>
      <input value={draft} onChange={e => setDraft(e.target.value)} />
      <button onClick={() => { if (draft) { setItems([...items, draft]); setDraft(''); } }}>Add</button>
      <ul>{items.map((t, i) => <li key={i}>{t}</li>)}</ul>
    </div>
  );
}