codequick-darkmode-logo
ВходРегистрация
Курс по React

Программа Курса:

Курс по React

20 Уроки 125 Онлайн Вопросы по Программированию


Какие темы будут рассмотрены в курсе?

Введение в основы React

  1. Введение в курс React:

    • Вступительные слова.

    • Что такое React и немного об истории библиотеки.

    • Акцент на работе с системой управления кодом.

  1. Основы компонента React:

    • Изучение того, что такое JSX в React.

    • Как написать первый базовый компонент.

    • Создание компонента со статическими данными и понимание основ.

  1. Создание списка с динамическими данными:

    • Динамическое создание элементов.

    • Использование возможностей Array.prototype.map для динамического построения.

    • Импорт и экспорт компонентов из файла.

  1. Создание таблицы с динамическими данными:

    • Структура таблицы и ее компоненты в HTML.

    • Использование вложенного цикла для построения таблицы.

    • Использование функции map во вложенном виде.

    • Использование динамических данных из импортируемого файла.

  1. Стилизация с помощью Style Object:

    • Понимание разницы между HTML и JSX.

    • Изучение стилизации элементов на странице.

    • Практика динамического создания элементов сложным способом с использованием изученных стилей.

Компоненты со Стейтом и Событиями

  1. Интеграция CSS файлов в React:

    • Интеграция мира стилей как неотъемлемой части построения компонента.

    • Понимание того, что такое className и различие между HTML и JSX.

    • Интеграция полноценного упражнения по всему материалу, изученному на данный момент в курсе.

    • Акцент на правилах CSS и их интеграции в нашу построенную систему.

  1. Интеграция Props в компоненты:

    • Что такое props в React и когда их использовать.

    • Создание компонентов с props и общие методы написания.

    • Использование компонентов, которые мы написали, в динамической сборке.

  1. Создание таблицы с Props:

    • Создание таблицы с использованием props.

    • Создание умного компонента при построении таблицы.

    • Сочетание динамического построения с несколькими компонентами с использованием props и стилизации с помощью CSS.

  1. Использование событий и useState:

    • Как связать события типа onClick с элементами.

    • Что такое умные компоненты и зачем они нужны.

    • Что такое react hook типа useState и как его использовать.

    • Создание булевых условий в JSX компонента.

    • Соединение создания событий и хранения состояния для построения умных компонентов React.

  1. Использование события onChange:

    • Как добавить input на страницу и использовать useState для хранения значений input.

    • Создание динамического списка с данными, введенными пользователем.

    • Подробное объяснение массивов и различия между значением и ссылкой.

    • Понимание работы с массивами, сохраненными в состоянии компонента.

Продвинутые темы и использование API

  1. Создание динамической таблицы с использованием событий:

    • Понимание интеграции всего изученного до сих пор для динамического создания таблицы.

    • Использование useState для хранения числа вводов.

    • Пример использования сложного состояния с массивом объектов.

  1. Использование хука useEffect:

    • Что такое react хук типа useEffect и когда и как его использовать.

    • Выполнение серверного общения с использованием fetch.

    • Показ методов защиты нашего кода для предотвращения ненужных ошибок.

    • Создание умного компонента, который сочетает в себе хуки useState и useEffect.

  1. Пример использования useEffect в поиске на стороне сервера:

    • Изучение дополнительных способов использования useEffect.

    • Понимание того, как жизненный цикл компонента влияет на реализацию нашего кода.

    • Презентация сложного примера использования useEffect.

  1. Использование дополнительных элементов ввода:

    • Что такое checkbox и как его использовать.

    • Что такое radio и как его использовать.

    • Что такое datetime и datetime-local и когда их использовать.

  1. Создание таблицы из API с фильтрацией результатов:

    • Совершение API запроса для получения данных о таблице.

    • Динамическое создание таблицы.

    • Изучение методов выполнения поиска через умную фильтрацию результатов.

    • Обсуждение архитектуры кода.

Продвинутые темы и архитектура кода

  1. Использование продвинутых фильтров:

    • Создание таблицы для отображения информации о рейсах.

    • Расширение использования таблицы с помощью умного компонента строки.

    • Использование полей ввода для создания фильтров для таблицы, используя checkbox, datetime и text inputs.

  1. Библиотека Bulma для продвинутого стилизования:

    • Изучение встраивания готовых стилей.

    • Использование пакета bulma для добавления цвета и стилей в совместно созданные React проекты.

    • Встраивание стилей в существующий компонент и изучение документации используемой библиотеки.

  1. Сортировка в JavaScript:

    • Улучшение существующего компонента таблицы и добавление возможностей сортировки.

    • Глубокое понимание того, как работают сортировки на массивах с числами, строками и объектами.

    • Рассмотрение способов работы со специальной сортировкой, когда наше поле не представляет простое сравнение.

  1. Каналы связи между компонентами:

    • Изучение способов, которыми дочерний компонент может общаться с родительским компонентом.

    • Реализация стилей bulma в нескольких компонентах.

    • Создание универсального компонента, позволяющего встраивать вкладки в приложение.

    • Примеры использования props типа function.

  1. Заключение