React Tutorial

Modern React with hooks — components, state, effects, and a small interactive counter app.

1 min read 191 words Updated Mar 8, 2026

React lets you build UIs from composable components. This tutorial uses function components and hooks — the standard since React 16.8.

A component

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return <Welcome name="world" />;
}

State with useState

import { useState } from "react";

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

Side effects with useEffect

import { useState, useEffect } from "react";

function Timer() {
  const [sec, setSec] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSec(s => s + 1), 1000);
    return () => clearInterval(id); // cleanup
  }, []);
  return <p>Seconds: {sec}</p>;
}

Always return a cleanup function from useEffect when you subscribe to something (timers, sockets, listeners).

Lists and keys

const items = ["apple", "banana", "cherry"];
return (
  <ul>
    {items.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

Fetching data

function Users() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users")
      .then(r => r.json())
      .then(setUsers);
  }, []);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Start a project with npm create vite@latest and pick the React template.