Как создать React-проект и почему React перерисовывает интерфейс при изменении состояния?
- Как начать проект на React с TypeScript?
- Что такое декларативный интерфейс?
Проект создают сборщиком Vite: npm create vite@latest app -- --template react-ts, затем npm install и npm run dev. React декларативный: вы описываете, как интерфейс выглядит при данном состоянии, а не какие DOM-операции выполнить. Когда состояние меняется через setState, React заново вызывает компонент, сравнивает новое описание с прошлым и сам применяет минимальные изменения к DOM.
- Компонент — функция, возвращающая JSX
- Изменить обычную переменную — интерфейс не обновится: React не знает об изменении
- Create React App устарел — для новых проектов Vite или фреймворк (Next.js)
А ещё UI = f(state): одно и то же состояние всегда даёт один и тот же интерфейс
Подробно
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Клик вызывает setCount → React планирует новый рендер → Counter вызывается с count + 1 → React обновляет текст кнопки в DOM.
Что хотят услышать
- Создание проекта на Vite.
- Декларативность и UI как функция состояния.
- Перерисовка через setState, а не через изменение переменных.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗React перерисовывает интерфейс при изменении любой обычной переменной в компоненте
- ✗В React нужно вручную вызывать document.querySelector для каждого обновления
- ✗Create React App — рекомендуемый и поддерживаемый способ начать новый проект
- ✓Проект создают на Vite; перерисовка происходит при вызове setState
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.