Счетчик кликов

Часть раздела Основы путешествия по React на Coddy — урок 23 из 42.

Состоянию нужен триггер, обычно это событие. Подключите функцию к кнопке с помощью onClick и изменяйте состояние внутри неё:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

Проследите за одним кликом по циклу: клик → setCount(count + 1) → React выполняет повторный рендеринг → абзац показывает новое значение. Обратите внимание на стрелочную функцию: onClick={() => setCount(count + 1)} передаёт функцию для вызова позже. Запись onClick={setCount(count + 1)} вызовет её немедленно во время рендеринга — это классическая ошибка.

Задание

Легко

Создайте классический счётчик.

Добавьте состояние: count, начинающееся с 0 (импорт уже готов).
Отобразите текущее значение внутри span с id="count".
Сделайте так, чтобы кнопка +1 увеличивала значение на 1 при каждом клике.

Попробуйте сами

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>