Записаться на курс
Пожалуйста, подождите...
Ваш запрос успешно отправлен!

Курс React JS

Для кого этот курс

Данный курс предназначен для разработчиков, владеющих языком JavaScript, которые хотят освоить новый мощный инструмент для разработки веб-приложений ReactJS.
Курс будет полезен начинающим и опытным frontend-разработчикам

Предварительные требования

Понимание HTML & CSS, JavaScript.

Курс React JS

Продолжительность:
14 ч.
Количество уроков:
7 занятий
Стоимость обучения:
2740 грн

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

Очное обучение
Онлайн обучение
Записаться на курс

Описание курса
ReactJS Essential

Мы начнем с того, что разберемся, чем Реакт отличается от других JS-фреймворков и в чем же его преимущество. Мы напишем наш первый компонент, научимся управлять состоянием и параметрами, будем использовать события, чтобы делать наши компоненты динамическими. Разобравшись с основами React, мы перейдем к изучению стека технологий, которые используются вместе с ним: разберемся со сборкой приложений, подключением внешних библиотек и изучим архитектуру Flux, а потом - напишем полноценное небольшое динамическое веб-приложение.

Программа курса
  • 1
    Введение в React
    • Немного о курсе

    • Что такое React?

    • Когда и почему стоит использовать React

    • Что такое виртуальный DOM и как он работает

    • Рендеринг данных в React - JSX!

    • Первый компонент - Hello world.

    • Props у компонентов

    • State компонентов, методы getInitialState и setState

    • Пример. Отображение списка контактов

    • Обработка событий в React, синтетические события
  • 2
    Подробнее о компонентах
    • Жизненный цикл компонента

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

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

    • Порядок вызова методов жизненного цикла при изменении состояния

    • Порядок вызова методов жизненного цикла при удалении компонента

    • Пояснение методов, когда какие следует использовать

    • Пример. Демонстрация порядка вызовов методов жизненного цикла

    • Пример. Таймер

    • Деление приложения для работы с заметками на компоненты, продумывание структуры

    • Установка nodejs и npm

    • Установка и запуск http-сервера

    • Пример. Приложение для управления заметками

    • Inline-стили в React

    • Использование this.props.children

    • Refs

    • Использование localStorage для хранения заметок пользователя
  • 3
    Окружение
    • Использование npm

    • Пример. Заполнение package.json

    • Подключение внешних модулей с помощью npm

    • Зачем нужен сборщик проектов и как он работает?

    • Настройка webpack

    • Пример. Подключение лоадеров к webpack

    • Настройка hot reloading и hot module replacement

    • Структура приложения

    • Использование NodeJS модулей

    • Пример. Построение модульного приложения
  • 4
    Роутинг и ES2015
    • Основные возможности ES2015 на примерах

    • CSS препроцессоры

    • LESS

    • Что такое роутинг? Его значение в приложении

    • Использование react-router

    • Пример. Настройка вложенных маршрутов

    • Валидация props

    • Пример. Компонент для отображения статьи

    • Контекст 10. Пример. Передача цвета через контекст

    • Навигация в приложении

    • Пример. Манипуляция с именами классов
  • 5
    Архитектура Flux, взаимодействие с API
    • Данные в приложении

    • MVC, схема, проблемы

    • Однонаправленный поток данных

    • Flux

    • Пример. Покупка товара в интернет-магазине

    • Настройка Google developers console

    • Material-ui

    • Настройка слоя коммуникации с API

    • Пример. Авторизация 10. React-router hooks

    • Пример. Построение Flux архитектуры в приложении: dispatcher, actions, stores, constants
  • 6
    Написание полноценного SPA
    • Концепция “умных” и “глупых” компонентов

    • Пример. Деление компонентов на “умные” и “глупые”

    • Пример. Отображение индикатора загрузки для списка задач

    • Что такое оптимистичные действия и когда стоит их применять?

    • Пример. Оптимистичное выделение задачи

    • Пример. Оптимистичное редактирование задачи

    • Пример. Отображение ошибки при неправильном id списка задач

    • Конфигурация, разные подходы
  • 7
    Deploy
    • Писать приложения на React

    • Использовать ES2015 при написании кода

    • Использовать Flux архитектуру

    • Настраивать конфигурацию

    • Настраивать отображение индикаторов загрузки

    • Отображать ошибки в приложении

    • работать с github

Что вы получите на курсе

Рабочее место с ноутбуком и учебными материалами

Практические занятия и проверка дз

Бесплатный видеокурс

Онлайн тестирование и сертификация

{
Сертификат

По прохождению курса

Наличие сертификата Учебного Центра CyberBionic Systematics свидетельствует о Вашем владении новыми знаниями и навыками, а значит, позволяет выгодно выделиться на фоне других кандидатов и увеличивает шансы на успешное трудоустройство или продвижение по карьерной лестнице. Для получения сертификата после окончания обучения, необходимо успeшно пройти тестирование по соответствующему курсу на Testprovider.com

}
ReactJS Essential
Старт курса:
Продолжи
тельность:
14 ч.
Количество уроков:
7 занятий
Стоимость обучения:
2740 грн
Записаться
на курс
Пожалуйста, подождите...
Ваш запрос успешно отправлен!