// Ванильный JS: обновляем DOM вручную
let count = 0;
const btn = document.getElementById('btn');
const display = document.getElementById('count');

btn.addEventListener('click', () => {
  count++;
  display.textContent = count; // ручное обновление DOM
});

// Ты пишешь JSX:
const element = (
  <h1 className="title">
    Привет, {name}!
  </h1>
);

// Babel превращает это в:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Привет, ', name, '!'
);

function Greeting({ name, isAdmin }) {
  return (
    <div>
      {/* Выражение в {} */}
      <h1>Привет, {name.toUpperCase()}!</h1>

      {/* Условный рендер через && */}
      {isAdmin && <span>Администратор</span>}

      {/* Тернарный оператор */}
      <p>{isAdmin ? 'Полный доступ' : 'Ограниченный доступ'}</p>

      {/* Стили как объект */}
      <div style={{ color: 'teal', fontSize: '16px' }}>
        Цветной текст
      </div>
    </div>
  );
}

// Объявление компонента — функция с заглавной буквы
function UserCard({ name, role, avatar }) {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

// Использование — как HTML-тег с атрибутами
function App() {
  return (
    <div>
      <UserCard
        name="Алексей"
        role="Product Analyst"
        avatar="/avatar.jpg"
      />
      <UserCard name="Мария" role="Designer" avatar="/m.jpg" />
    </div>
  );
}

// Деструктуризация props + значения по умолчанию
function Button({
  children,
  variant = 'primary',
  onClick,
  disabled = false
}) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

// children — специальный prop, содержимое тега
<Button onClick={handleClick}>Нажми меня</Button>
<Button variant="ghost" disabled>Недоступно</Button>

import { useState } from 'react';

function Counter() {
  // [текущее значение, функция обновления] = useState(начальное значение)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счёт: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={() => setCount(0)}>
        Сброс
      </button>
    </div>
  );
}

function UserProfile() {
  // Несколько независимых состояний
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [isActive, setIsActive] = useState(false);

  // Функциональное обновление (безопасный способ)
  const increment = () => {
    setAge(prev => prev + 1); // prev — гарантированно актуальное значение
  };

  // Состояние-объект: нужно копировать через spread
  const [form, setForm] = useState({ email: '', password: '' });

  const handleEmail = (e) => {
    setForm({ ...form, email: e.target.value }); // spread!
  };
}

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // Эффект: запускается после рендера
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // Cleanup: вызывается перед следующим эффектом или unmount
    return () => clearInterval(interval);

  }, []); // [] — пустой массив зависимостей: запустить один раз

  return <p>Прошло: {seconds}с</p>;
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false; // защита от race condition

    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      });

    return () => { cancelled = true; };
  }, [userId]); // перезапрашиваем при смене userId

  if (loading) return <p>Загрузка...</p>;
  return <h1>{user.name}</h1>;
}

const tasks = [
  { id: 1, text: 'Изучить React', done: false },
  { id: 2, text: 'Написать компонент', done: true },
  { id: 3, text: 'Задеплоить проект', done: false },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        {/* key — обязателен! Используй id, не индекс */}
        <TaskItem
          key={task.id}
          text={task.text}
          done={task.done}
        />
      ))}
    </ul>
  );
}

function TaskItem({ text, done }) {
  return (
    <li style={{ textDecoration: done ? 'line-through' : 'none' }}>
      {text}
    </li>
  );
}

function SearchForm() {
  const [query, setQuery] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // предотвращаем перезагрузку страницы
    console.log('Поиск:', query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={query}         {/* React контролирует значение */}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Поиск..."
      />
      <button type="submit">Найти</button>
    </form>
  );
}

function RegisterForm() {
  const [form, setForm] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  // Универсальный обработчик — name атрибут инпута = ключ в state
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  const validate = () => {
    const errs = {};
    if (!form.name) errs.name = 'Имя обязательно';
    if (!form.email.includes('@')) errs.email = 'Некорректный email';
    return errs;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    console.log('Отправлено:', form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} />
      {errors.name && <span>{errors.name}</span>}
      <input name="email" value={form.email} onChange={handleChange} />
      {errors.email && <span>{errors.email}</span>}
      <button>Зарегистрироваться</button>
    </form>
  );
}

import { useState, useEffect } from 'react';

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Изучить React', done: false },
  ]);
  const [filter, setFilter] = useState('all');

  // useEffect: обновляем title при изменении задач
  useEffect(() => {
    const pending = tasks.filter(t => !t.done).length;
    document.title = pending > 0
      ? `(${pending}) Todo App`
      : 'Todo App';
  }, [tasks]);

  const addTask = (text) => {
    setTasks([...tasks, { id: Date.now(), text, done: false }]);
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  const visible = tasks.filter(t =>
    filter === 'active' ? !t.done :
    filter === 'done'   ? t.done  : true
  );

  return (
    <div>
      <AddTaskForm onAdd={addTask} />
      <FilterBar filter={filter} onFilter={setFilter} />
      <TaskList
        tasks={visible}
        onToggle={toggleTask}
        onDelete={deleteTask}
      />
    </div>
  );
}