Описание урока:

Разберётесь с основой React! Этот урок познакомит вас с основополагающими концепциями механики библиотеки React; раскроет принципы работы внутреннего движка Fiber; объяснит, почему React-приложения настолько быстрые и отзывчивые.

Напишите своё React-приложение — Instagram! Во время урока вы научитесь работать с JSX-разметкой, которая легко создаёт страницы с динамическим контентом, cможете управлять отображением элементов, эффективно использовать один из основных паттернов React — conditional rendering и создадите правильную архитектуру React-компонентов.

Получите набор материалов!  Для урока используется обновленный конспект. В новом конспекте применяются нововведения React v16.4.0: современные подходы и практики, с примерами и иллюстрациями.

Важно! Во время урока будет доступен чат, где мы будем отвечать на вопросы в прямом эфире.

Этот урок будет полезен, если вы:

  • начинающий frontend-разработчик;
  • хотите познакомиться с React;
  • устали просто верстать сайты;
  • планируете использовать React в рабочем проекте;
  • в короткие сроки решили освоить React.

Требования к участникам:

HTML, CSS, базовые навыки JavaScript, настроить среду для разработки по инструкции, прочитать конспект к уроку.

Структура урока:

  1. Познакомимся с элементарной единицей — ReactElement.
  2. ReactComponent — игрок высшей лиги.
  3. Откроем для себя новый движок Fiber и механизм reconsiliation.
  4. Виртуальный DOM и улучшенная производительность.
  5. Выполнение JavaScript-кода внутри JSX-разметки.
  6. Узнаем об атрибутах разметки.
  7. Как работает экранирование в JSX.
  8. Научимся создавать самозакрывающиеся теги.
  9. Обращение к компоненту через точку.
  10. Потренируемся писать комментарии в JSX.
  11. Изучим композицию компонентов.
  12. Узнаем как рендерить списки.
  13. Рассмотрим фрагменты.
  14. О рендеринге строк и чисел в новом React.
  15. Что такое conditional rendering и как его использовать?

Выберите удобный пакет участия

Стандартный

  • Доступ к трансляции онлайн-воркшопа
  • Доступ к закрытому чату React-разработчиков
  • Инструкция по настройке среды окружения
  • Исходный код, используемый на уроке
  • Подробный иллюстрированный конспект с примерами и советами
  • Файлы презентаций тем, рассмотренных на уроке

Бесплатно

Расширенный

  • Всё, что включает Стандартный, и дополнительно:
  • Персональный ментор на время обучения
  • Помощь в настройке среды окружения
  • Практическое задание + код-ревью