К содержанию

Основной учебник React

Учебник по JavaScript фреймворку React. Для новичков. Много теории и задач.

Уроки

Введение в фреймворк React

Установка фреймворка React

Подключение плагина react-devtools

Введение в компонентный подход в React

Макет сайта фреймворка React

Результат работы компонента

Язык JSX

Введение в язык JSX в React

Возврат вложенных тегов JSX функциями

Правила возврата функцией при сносе тега вниз в JSX

Особенности возврата нескольких тегов в JSX

Возврат незакрытого тега JSX

Возврат функцией пустого тега в JSX

Вставка значений переменных и констант в JSX

Нюансы при вставке значений переменных

Вставка массивов в JSX

Вставка объектов в JSX

Вставка переменных и констант в атрибуты тегов в JSX

Хранение тегов в переменных и константах JSX

Особенности хранения нескольких тегов в константах JSX

Теги на разных строках в JSX

Возврат тегов через return в JSX

Закрытость тегов JSX

Корректность верстки в React

Выполнение кода JavaScript

Условия

Применение условий в JSX

Показ по условию в React

Условия для возврата тега в JSX

Тернарный оператор в JSX

Использование оператора && в JSX

Инвертирование для сокращенных условий в JSX

Функции

Использование функций в React

Вызов функций внутри тегов в React

Навешивание событий в JSX

Параметры в функции JSX

Объект Event в React

Объект Event при передаче параметров

Формирование тегов

Теги в массивах JSX

Формирование массива тегов в цикле React

Формирование тегов из массива с данными в React

Уникальные ключи в массиве тегов в React

Вывод массива объектов в React

Уникальные ключи через id в React

Вывод массива объектов в виде HTML таблицы в React

Уникальные id

Обсуждение уникальных id в React

Проблемы с новыми id в React

Случайные строки для id в React

Генерация id в React

Функция для генерации id в React

Использование функции id в React

Неправильное использование функции id в React

Стейты

Введение в стейты в React

Использование стейтов в React

Реактивность стейтов в React

Логическое значение в стейте в React

Счетчик на стейтах в React

Формы

Работа с инпутами в React

Изменение данных инпута при их выводе в React

Изменение данных с помощью функции в React

Работа с несколькими инпутами в React

Обработка данных формы по нажатию на кнопку в React

Работа с textarea в React

Работа с checkbox в React

Чекбоксы и условный рендеринг в React

Работа с select в React

Пункты селекта из массива в React

Атрибуты value в селекте в React

Атрибуты value селекта из массива в React

Работа с radio в React

Значения по умолчанию в React

Привязка инпутов к массиву в React

Привязка инпутов к объекту в React

Данные

Реактивность данных в React

Реактивное добавление в массив в React

Реактивные операции над массивами в React

Реактивное добавление в массив объектов в React

Реактивные операции над массивами объектов в React

Реактивный показ данных в React

Компоненты

Введение в компоненты React

Использование компонентов в React

Несколько экземпляров компонента в React

Пропсы компонентов в React

Создание дочерних компонентов в React

Массив для создания дочерних компонентов в React

Дочерние компоненты в цикле React

Передача стейтов в дочерние компоненты в React

Передача id в компонент в React

Изменение стейта родителя в дочернем компоненте в React

Редактирование стейта родителя в дочернем компоненте в React

Редактирование стейта во внучатом компоненте в React

Режимы работы через стейты компонентов-потомков в React

Концепции

Концепции React при работе с компонентами

Данные компонентов в React

Типы компонентов в React

Однонаправленный поток данных в React

Подъем состояний в React

Один источник истины в React

Стилизация

Способы стилизации React компонентов

Использовании глобального CSS при стилизации в React

Вставка данных в атрибут style из объекта в React

Вставка данных в атрибут style из отдельного файла в React

Работа с CSS стилями в атрибуте style в React

Вставка данных в атрибут style из переменных в React

Стилизация с помощью Styled Components в React

Использование пропсов с Styled Components в React

Использование пропсов в условном рендеринге с Styled Components в React

Расширенная стилизация компонентов в React

Начало изучения стилизации с CSS modules в React

Продолжение изучения стилизации с CSS modules React

Команда composes для классов в CSS modules в React

Команда composes для файлов в CSS modules в React

Проекты

Проект Чеклист в React

Проект Блокнот в React