ReactJS — популярная JavaScript-библиотека с открытым исходным кодом. Разработана в Facebook для построения пользовательских интерфейсов (UI, User Interfaces) на основе компонентного подхода. Характеризуется декларативным подходом к описанию, компоненто-ориентированностью и простотой использования. Особенности ReactJS: однонаправленный поток данных, виртуальный DOM, JSX.

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

Курс познакомит вас с базовыми особенностями популярной библиотеки, даст практические навыки создания компонентов на ReactJS и его расширении JavaScript - JSX.

Курс будет полезен для веб-разработчиков, для специалистов,  ориентированных на работу с клиентской стороной (Frontend-разработка

Этот курс для вас, если вы:

Оформите
Frontend-разработчик
   
Менеджер
Веб-разработчик - фрилансер
   
Вы получите
Студент
   
Подписываем
Веб-разработчик компании
   
Вы получите
Преподаватель курсов по Frontend-разработке
   
 
   

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

Создавать компоненты на основе ReactJS

 

Настраивать жизненный цикл компонентов

 

Отрисовывать форму по условию

 

Обрабатывать события и управлять всплытием состояний

 

Создавать пользовательские интерфейсы любой сложности

 

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

 

Как проходит обучение

  • Изучаете тему или несколько тем, например, верстка нескольких блоков на  главной странице
  • Выполняете практическое задание с преподавателем
  • Выполняете задание сами (2-3 примера) рядом с преподавателем
  • Получаете домашнее задание, отражающее текущую тему и темы, которые вы изучили на предыдущих
  • В промежутке  до следующего урока вы можете прислать выполненное задание или консультироваться по WA, Телеграм, Скайп, Zoom,  чтобы процесс обучения был непрерывным
  • На следующем уроке проверяется задание

Где проходит обучение - мы предлагаем несколько вариантов

  • Обучение в нашей студии
  • Обучение на территории ученика или заказчика
  • Он-лайн.  Для этого используем  2 программы, чтобы слышать друг друга и  мы оба работали в вашем компьютере.
    Сами  программы - Скайп или Zoom   +  Тимвивер или Anydesk
  • Платформы онлайн-школы
Тема 1. Знакомство с React
  • Многостраничный дизайн старой школы
  • Одностраничные приложения новой школы
  • Автоматическое управление состоянием пользовательского интерфейса
  • Быстрое манипулирование DOM
  • API для создания компонуемых пользовательских интерфейсов
  • Визуальные элементы, целиком определенные в коде JavaScript
  • Только V в архитектуре MVC
Тема 2. Создание первого React-приложения
  • Работа с JSX
  • Использование React
  • Отображение имени
  • Смена места назначения
  • Добавление стилей
Урок 3. Компоненты React
  • Краткий обзор функций
  • Изменения во взаимодействии с пользовательским интерфейсом
  • Компоненты React
  • Создание компонента HelloWorld
  • Указание свойств
  • Обновление определения компонента
  • Изменение кода вызова компонента
  • Работа с дочерними элементами
Урок 4. Стили в библиотеке React
  • Стилизация контента React с помощью CSS
  • Сгенерированный HTML-код
  • Применение стиля
  • Стилизация контента методом библиотеки React
  • Создание объекта стиля
  • Стилизация контента
  • Настройка фонового цвета
Урок 5. Создание сложных компонентов
  • От визуализации до компонентов
  • Определение основных визуальных элементов
  • Определение компонентов
  • Создание компонентов
  • Компонент Card
  • Компонент Square
  • Компонент Label
  • Передача свойств
  • Почему так важна компоновка компонентов
Урок 6. Передача свойств
  • Обзор проблемы
  • Глубокий анализ проблемы
  • Оператор расширения
  • Лучший способ передачи свойств
Урок 7. JSX
  • Что происходит с JSX?
  • Особенности JSX, которые надо запомнить
  • Обработка выражений
  • Возвращение нескольких элементов
  • Почему нельзя использовать встроенные стили CSS
  • Комментарии
  • Регистр, HTML-элементы и компоненты
  • Использование JSX-кода в любом месте, часть 1
Урок 8. Работа с состояниями React
  • Использование состояний
  • Начало работы
  • Настройка счетчика
  • Установка начального значения состояния
  • Запуск таймера и установка состояния
  • Рендеринг смены состояния
  • Дополнительно: полный код
Урок 9. Переход от данных к пользовательскому интерфейсу
  • Пример
  • Использование JSX-кода в любом месте, часть 2
  • Работа с массивами
Урок 10. События в React
  • Определение и реагирование на события
  • Начало работы
  • Создание кнопки действия
  • Свойства события
  • Синтетические события
  • Работа со свойствами события
  • Действия с событиями
  • Вы не можете напрямую прослушивать события компонентов
  • Прослушивание стандартных событий DOM
  • Значение this внутри обработчика событий
  • Совместимость с браузерами
  • Повышение производительности
Урок 11. Жизненный цикл компонента
  • Знакомство с методами жизненного цикла
  • Методы жизненного цикла в действии
  • Этап начального рендеринга
  • Получение свойств по умолчанию
  • Получение состояния по умолчанию
  • componentWillMount
  • render
  • componentDidMount
  • Этап обновления
  • Изменение состояний
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate
  • Изменения свойств
  • Этап размонтирования
Урок 12 Доступ к элементам DOM в React
  • Код приложения «Палитра»
  • Знакомство со ссылками
  • Использование порталов
Урок 13 Настройка среды разработки React
  • Проект Create React
  • Анализ произошедшего
  • Создание демонстрационного приложения
  • Сборка проекта
Урок 14. Работа с внешними данными в React
  • Основы веб-запросов
  • Время работать с React
  • Начало работы
  • Получение IP-адреса
  • Визуальные эффекты уровнем выше
Урок 15 Создание планировщика в React
  • Начало разработки
  • Создание интерфейса
  • Построение остальной части приложения
  • Добавление элементов
  • Отображение элементов
  • Форматирование контента приложения
  • Удаление элементов
  • Анимация!
Урок 16 Создание плавающего меню в React
  • Как работает плавающее меню
  • Настройка плавающего меню
  • Начало работы
  • Отображение и сокрытие меню
  • Создание кнопки
  • Создание меню
Урок 17 Оптимизация ненужных операций рендеринга
  • Вкратце о методе render
  • Оптимизация количества вызовов метода render
  • Пример
  • Анализ вызовов метода render
  • Переопределение обновления компонента
  • Использование компонента PureComponent
Урок 18 Создание одностраничного приложения React с помощью роутера
  • Начало работы
  • Создание одностраничного приложения
  • Отображение начального фрейма
  • Создание страниц с контентом
  • Использование библиотеки React Router
  • Последние штрихи
  • Содержание
  • Исправление путей маршрутизации
  • Добавление правил CSS
  • Выделение активной ссылки
Урок 19 Введение в Redux
  • Что такое Redux
  • Создание простого приложения с помощью Redux
  • Настало время Redux
  • Свет! Камера! Мотор
  • Управление редуктором
  • Работа с хранилищем
Урок 20 Совместное использование Redux с React
  • Управление состояниями React с помощью Redux
  • Как пересекаются React и Redux
  • Начало работы
  • Создание приложения

Гарантии

Мы даем 100% гарантию, что вы станете профессионалом. Во время обучения мы с вами разработаем 2-4 проекта.  Работаем по договору.

Документы об окончании - сертификат

Количество уроков
12-16 уроков
Количество часов
70 часов
Стоимость
120 000 руб.

Отзыв от слушателей в рамках обучения Web разработкам на платформе WORLDSKILLS (ноябрь-декабрь 2020 года)