Шаг 1
Vite + React: создать проект за 1 минуту
Vite — современный инструмент для разработки frontend-проектов. В связке с React он даёт быстрый запуск, мгновенное обновление страницы при сохранении файла и простую production-сборку. Создание…
Учебное направление
React
Уроки React: компоненты, props, state, хуки, формы, маршрутизация, запросы к API, TypeScript и создание практических интерфейсов. Материалы выстроены от первого знакомства до практических задач и следующего уровня.
Быстрый выбор
С чего начать React
Выберите первую задачу и переходите к инструкции.
Vite + React: создать проект за 1 минуту
Vite — современный инструмент для разработки frontend-проектов. В связке с React он даёт быстрый запуск, мгновенное обновление страницы при сохранении файла и…
useState в React — управление состоянием компонента
useState — базовый хук React для хранения данных внутри компонента. Если значение влияет на то, что пользователь видит на экране, чаще всего…
useRef в React — работа с DOM элементами
useRef хранит изменяемое значение между рендерами, но изменение ref не запускает новый рендер. Чаще всего ref используют для доступа к DOM-элементу или…
useMemo и useCallback в React — оптимизация производительности
useMemo и useCallback помогают не пересоздавать результат вычисления или функцию без необходимости. Это инструменты оптимизации, а не обязательный код в каждом компоненте.…
useEffect в React — побочные эффекты с примерами
useEffect нужен, когда React-компонент должен синхронизироваться с внешним миром: API, таймером, подпиской, localStorage, WebSocket или DOM API. Если внешней системы нет, часто…
Redux Toolkit — управление состоянием в React
Redux Toolkit — современный рекомендуемый способ писать Redux. Он убирает большую часть шаблонного кода: store создаётся через configureStore, логика состояния описывается в…
Маршрут обучения
Как двигаться по порядку
Шаг 2
useState в React — управление состоянием компонента
useState — базовый хук React для хранения данных внутри компонента. Если значение влияет на то, что пользователь видит на экране, чаще всего это состояние. Синтаксис…
Шаг 3
useRef в React — работа с DOM элементами
useRef хранит изменяемое значение между рендерами, но изменение ref не запускает новый рендер. Чаще всего ref используют для доступа к DOM-элементу или хранения технического значения:…
Шаг 4
useMemo и useCallback в React — оптимизация производительности
useMemo и useCallback помогают не пересоздавать результат вычисления или функцию без необходимости. Это инструменты оптимизации, а не обязательный код в каждом компоненте. Коротко: разница Хук…
Шаг 5
useEffect в React — побочные эффекты с примерами
useEffect нужен, когда React-компонент должен синхронизироваться с внешним миром: API, таймером, подпиской, localStorage, WebSocket или DOM API. Если внешней системы нет, часто Effect вообще не…
Учебные дорожки
Маршруты по теме «React»
Сгруппированные материалы для последовательного изучения.
Маршрут 1
База и настройка
Маршрут 2
Рабочие задачи
Маршрут 3
Следующий уровень
Самопроверка
Как понять, что можно идти дальше
- Вы можете повторить основной пример без пропущенных шагов
- Понимаете назначение ключевых команд и параметров
- Умеете проверить результат и прочитать сообщение об ошибке
- Можете изменить пример под собственную задачу
Материалы рубрики
Новые материалы по теме «React»
Vite + React: создать проект за 1 минуту
Vite — современный инструмент для разработки frontend-проектов. В связке с React он даёт быстрый запуск, мгновенное обновление страницы при сохранении файла и простую production-сборку. Создание проекта на Vite Vite закрывает базовый старт React-проекта:…
useState в React — управление состоянием компонента
useState — базовый хук React для хранения данных внутри компонента. Если значение влияет на то, что пользователь видит на экране, чаще всего это состояние. Синтаксис useState useState возвращает два значения: текущее состояние и…
useRef в React — работа с DOM элементами
useRef хранит изменяемое значение между рендерами, но изменение ref не запускает новый рендер. Чаще всего ref используют для доступа к DOM-элементу или хранения технического значения: id таймера, предыдущего значения, флага. Синтаксис useRef Фокус…
useMemo и useCallback в React — оптимизация производительности
useMemo и useCallback помогают не пересоздавать результат вычисления или функцию без необходимости. Это инструменты оптимизации, а не обязательный код в каждом компоненте. Коротко: разница Хук Что запоминает useMemo Результат вычисления useCallback Функцию Когда…
useEffect в React — побочные эффекты с примерами
useEffect нужен, когда React-компонент должен синхронизироваться с внешним миром: API, таймером, подпиской, localStorage, WebSocket или DOM API. Если внешней системы нет, часто Effect вообще не нужен. Базовые варианты useEffect useEffect проще понять через…
Redux Toolkit — управление состоянием в React
Redux Toolkit — современный рекомендуемый способ писать Redux. Он убирает большую часть шаблонного кода: store создаётся через configureStore, логика состояния описывается в createSlice, а React подключается через Provider. Когда нужен Redux Toolkit Redux…
React Router DOM — навигация в React приложении
React Router добавляет навигацию в React-приложение: страницы, ссылки, параметры URL, вложенные маршруты и программные переходы. В новых версиях библиотека развивает несколько режимов, но для обычного SPA новичку достаточно декларативного роутинга. Базовая настройка маршрутов…
React Query (TanStack Query) — запросы к API в React
React Query сейчас развивается как TanStack Query. Это библиотека для серверного состояния: запросы к API, кэш, загрузка, ошибки, повторные запросы и мутации. Она убирает много ручного useEffect-кода. Базовая настройка React Query Сначала важно…
React Native — что это и как начать разрабатывать мобильные приложения
React Native — фреймворк для создания мобильных приложений на JavaScript и React. Вы пишете компоненты на привычном React-подходе, а на устройстве они превращаются в нативные элементы Android и iOS. База React Native React…
Первое приложение на React Native — пошаговый урок
Сделаем первое приложение на React Native: список задач. В нём будут TextInput, кнопка добавления, FlatList, отметка выполненных задач и удаление. Такой пример сразу показывает основные элементы мобильного UI. Создать проект Главный компонент Стили…