JS: React

Включено в курс

Чему вы научитесь

• Создавать полноценные приложения на React
• Грамотно организовывать состояние приложения
• Взаимодействовать с бекендом по API
• Интегрировать React со сторонними библиотеками
• Использовать встроенные хуки
• Создать приложение, состоящее только из функциональных компонентов
• Внедрить готовые хуки для решения типовых задач

Описание

На этом курсе вы изучите React. Вы узнаете больше о создании компонентов, состоянии и жизненном цикле компонентов, а также о работе с событиями. В итоге вы научитесь создавать интерактивные пользовательские интерфейсы и манипулировать состоянием приложения. Изучение React пригодится, если вы решите создавать современные веб-приложения. Знания из этого курса помогают программистам создавать интерактивные интерфейсы и управлять состоянием приложения. Так же вы узнаете, как создавать приложения на функциональных компонентах. Вы научитесь использовать хуки для управления состоянием, доступа к DOM-элементам и других функций.

Чтобы учиться было проще, стоит заранее изучить JavaScript и основы HTML и CSS. Проще всего сразу двигаться по профессии Фронтенд-разработчик, где есть готовая программа, в которую входит и текущий курс.

Программа курса

• 1

  Введение

  Познакомиться с курсом и подготовить окружение.

  теория
• 2

  Компоненты

  Познакомиться с базовой единицей в react — компонентом. Научиться его создавать и отрисовывать в браузере.

  теория

  тесты

  упражнение

• 3

  JSX

  Научиться эффективно использовать jsx.

  теория

  тесты

  упражнение

• 4

  Props

  Познакомиться с механизмом передачи данных в компоненты.

  теория

  тесты

  упражнение

• 5

  Работа с коллекциями

  Научиться обрабатывать коллекции данных внутри компонентов.

  теория

  тесты

  упражнение

• 6

  Различия jsx и html

  Узнать об особенностях jsx, которые работают не так как в html.

  теория

  тесты

  упражнение

• 7

  Обработка имён классов

  Научиться правильно работать с классами компонентов, которые могут изменяться динамически.

  теория

  тесты

  упражнение

• 8

  Children

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

  теория

  тесты

  упражнение

• 9

  Состояние

  Познакомиться с созданием stateful компонентов. Научиться добавлять интерактивности.

  теория

  тесты

  упражнение

• 10

  События

  Познакомиться с особенностями системы событий React.

  теория

  тесты

  упражнение

• 11

  Автоматное программирование

  Вспомнить что все вокруг автоматы. Научиться правильно работать с автоматами в React.

  теория

  тесты

  упражнение

• 12

  Формы

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

  теория

  тесты

  упражнение

• 13

  Неизменяемость

  Научиться работать с составными структурами в неизменяемом стиле и познакомиться с библиотекой `immutability-helper`

  теория

  тесты

  упражнение

• 14

  Вложенные компоненты

  Разобраться с хранением состояния и управлением событиями во вложенных компонентах.

  теория

  тесты

  упражнение

• 15

  Функциональные компоненты

  Рассмотреть создание компонентов на основе функций и использования пространств имён.

  теория

  тесты

  упражнение

• 16

  Контекст (Context API)

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

  теория

  тесты

  упражнение

• 17

  Virtual Dom

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

  теория

  тесты

  упражнение

• 18

  Тестирование

  Узнать о проблемах, которые поджидают разработчика при работе с исходным кодом.

  теория

  тесты

• 19

  Асинхронная обработка

  Узнать об особенностях работы с объектом событием в асинхронном коде. Попрактиковаться в создании асинхронных обработчиков.

  теория

  тесты

  упражнение

• 20

  Жизненный цикл компонента

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

  теория

  тесты

  упражнение

• 21

  Производительность

  Научиться выжимать из React максимальную производительность.

  теория

  тесты

• 22

  Refs

  Научиться взаимодействовать с реальным DOM для интеграции сторонних компонентов.

  теория

  тесты

  упражнение

• 23

  Введение в хуки

  Узнаем для чего нужны хуки

  теория
• 24

  Хук useState

  Знакомимся с принципами работы хуков и изучаем самый базовый, отвечающий за работу с состоянием

  теория

  тесты

  упражнение

• 25

  Хук useEffect

  Учимся изолировать побочные эффекты с помощью хуков

  теория

  тесты

  упражнение

• 26

  Хук useContext

  Учимся работать с контекстом через хуки

  теория

  тесты

  упражнение

• 27

  Хук useRef

  Учимся получать доступ к DOM-элементам с помощью хуков

  теория

  тесты

  упражнение

• 28

  Хуки useCallback и useMemo

  Учимся создавать значения с Memo

  теория

  тесты

  упражнение

• 29

  Композиция компонентов

  Учимся выстраивать правильную композицию и оптимизировать приложение без memo

  теория

  тесты

  упражнение

• 30

  Заключение

  Подвести итоги курса

  теория
• 31

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже