Какие темы будут рассмотрены в курсе?
Введение в основы React
Введение в курс React:
Вступительные слова.
Что такое React и немного об истории библиотеки.
Акцент на работе с системой управления кодом.
Основы компонента React:
Изучение того, что такое JSX в React.
Как написать первый базовый компонент.
Создание компонента со статическими данными и понимание основ.
Создание списка с динамическими данными:
Динамическое создание элементов.
Использование возможностей Array.prototype.map для динамического построения.
Импорт и экспорт компонентов из файла.
Создание таблицы с динамическими данными:
Структура таблицы и ее компоненты в HTML.
Использование вложенного цикла для построения таблицы.
Использование функции map во вложенном виде.
Использование динамических данных из импортируемого файла.
Стилизация с помощью Style Object:
Понимание разницы между HTML и JSX.
Изучение стилизации элементов на странице.
Практика динамического создания элементов сложным способом с использованием изученных стилей.
Компоненты со Стейтом и Событиями
Интеграция CSS файлов в React:
Интеграция мира стилей как неотъемлемой части построения компонента.
Понимание того, что такое className и различие между HTML и JSX.
Интеграция полноценного упражнения по всему материалу, изученному на данный момент в курсе.
Акцент на правилах CSS и их интеграции в нашу построенную систему.
Интеграция Props в компоненты:
Что такое props в React и когда их использовать.
Создание компонентов с props и общие методы написания.
Использование компонентов, которые мы написали, в динамической сборке.
Создание таблицы с Props:
Создание таблицы с использованием props.
Создание умного компонента при построении таблицы.
Сочетание динамического построения с несколькими компонентами с использованием props и стилизации с помощью CSS.
Использование событий и useState:
Как связать события типа onClick с элементами.
Что такое умные компоненты и зачем они нужны.
Что такое react hook типа useState и как его использовать.
Создание булевых условий в JSX компонента.
Соединение создания событий и хранения состояния для построения умных компонентов React.
Использование события onChange:
Как добавить input на страницу и использовать useState для хранения значений input.
Создание динамического списка с данными, введенными пользователем.
Подробное объяснение массивов и различия между значением и ссылкой.
Понимание работы с массивами, сохраненными в состоянии компонента.
Продвинутые темы и использование API
Создание динамической таблицы с использованием событий:
Понимание интеграции всего изученного до сих пор для динамического создания таблицы.
Использование useState для хранения числа вводов.
Пример использования сложного состояния с массивом объектов.
Использование хука useEffect:
Что такое react хук типа useEffect и когда и как его использовать.
Выполнение серверного общения с использованием fetch.
Показ методов защиты нашего кода для предотвращения ненужных ошибок.
Создание умного компонента, который сочетает в себе хуки useState и useEffect.
Пример использования useEffect в поиске на стороне сервера:
Изучение дополнительных способов использования useEffect.
Понимание того, как жизненный цикл компонента влияет на реализацию нашего кода.
Презентация сложного примера использования useEffect.
Использование дополнительных элементов ввода:
Что такое checkbox и как его использовать.
Что такое radio и как его использовать.
Что такое datetime и datetime-local и когда их использовать.
Создание таблицы из API с фильтрацией результатов:
Совершение API запроса для получения данных о таблице.
Динамическое создание таблицы.
Изучение методов выполнения поиска через умную фильтрацию результатов.
Обсуждение архитектуры кода.
Продвинутые темы и архитектура кода
Использование продвинутых фильтров:
Создание таблицы для отображения информации о рейсах.
Расширение использования таблицы с помощью умного компонента строки.
Использование полей ввода для создания фильтров для таблицы, используя checkbox, datetime и text inputs.
Библиотека Bulma для продвинутого стилизования:
Изучение встраивания готовых стилей.
Использование пакета bulma для добавления цвета и стилей в совместно созданные React проекты.
Встраивание стилей в существующий компонент и изучение документации используемой библиотеки.
Сортировка в JavaScript:
Улучшение существующего компонента таблицы и добавление возможностей сортировки.
Глубокое понимание того, как работают сортировки на массивах с числами, строками и объектами.
Рассмотрение способов работы со специальной сортировкой, когда наше поле не представляет простое сравнение.
Каналы связи между компонентами:
Изучение способов, которыми дочерний компонент может общаться с родительским компонентом.
Реализация стилей bulma в нескольких компонентах.
Создание универсального компонента, позволяющего встраивать вкладки в приложение.
Примеры использования props типа function.
Заключение