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

Курс React JS

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

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

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

Целевая аудитория

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

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

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

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

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

Содержание курса

Cвернуть
1
Введение в React
• Немного о курсе

• Что такое React?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Inline-стили в React

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

• Refs

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

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

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

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

• Настройка webpack

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

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

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

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

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

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

• LESS

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

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

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

• Валидация props

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

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

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

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

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

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

• Flux

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

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

• Material-ui

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• работать с github

Читать дальше

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

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

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

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

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

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