PRO курс

JS: React

1292 сообщения в сообществе 2397 учащихся

React — библиотека, которая перевернула наши представления о том, как разрабатывать фронтенд. В этом курсе мы затронем все аспекты его работы и шаг за шагом, начиная с простых компонентов, дойдем до взаимодействия с бекендом и интеграции с кодом, написанном без его использования (на jquery).

Подготовительный курс

JS: DOM API

Уроки курса

  • 1

    Введение

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

    Компоненты

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

    тесты

    упражнение

  • 3

    JSX

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

    тесты

    упражнение

  • 4

    Props

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

    тесты

    упражнение

  • 5

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

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

    тесты

    упражнение

  • 6

    Различия jsx и html

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

    тесты

    упражнение

  • 7

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

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

    упражнение

  • 8

    Children

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

    тесты

    упражнение

  • 9

    Состояние

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

    тесты

    упражнение

  • 10

    События

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

    тесты

    упражнение

  • 11

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

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

    упражнение

  • 12

    Формы

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

    тесты

    упражнение

  • 13

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

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

    тесты

    упражнение

  • 14

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

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

    тесты

    упражнение

  • 15

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

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

    упражнение

  • 16

    Virtual Dom

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

    тесты

    упражнение

  • 17

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

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

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

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

    упражнение

  • 19

    Component Lifecycle

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

    упражнение

  • 20

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

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

    тесты

  • 21

    Refs

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

    упражнение

Автор

Кирилл Мокевнин

Сооснователь и технический директор образовательного проекта Hexlet. Программирует с 2007 года. За это время прошел путь от разработчика до технического директора и управляющего отдельным подразделением (филиалом). Управлял командами, в которых больше 50 разработчиков. Программирует на языках: elixir, clojure, javascript, php, ruby. Со-организатор конференции nastachku.ru. Вимер. Топит за DevOps и автоматизированные тесты.

Впечатления

Решал эту задачу целый день! Даже работает онлайн. Вроде не сложно, но какие ньюансы. Теперь можно заливать на гитхаб и слать всем резюме, что я джуниор - берите меня.

Но, как же крут Хекслет!!!

Спасибо за отличный курс по React! Раньше для меня Reaсt казался чем то сложным , но после такого досконального объяснения разных мелочей , рад что стал намного лучше разбираться в нем чем раньше. После подробного изучения темы про DOM API , React получилось пройти в два раза быстрее , хотя сама тема в 2 раза больше )))

Крутой курс, спасибо!

Чуть-чуть сократил решение учителя. При использовании стрелочной функции this замыкается до компонента и this.onChange(e) отрабатывает правильно.

продолжительность
49 часов
награда
111 баллов
Получить доступ к курсу