Курс React.js в Киеве

Старт курса Ожидается

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

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

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

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

Курс React.js в Киеве

Старт курса Ожидается

Продолжительность:

14 ч.

Количество уроков:

7 занятий

Стоимость обучения:

2 740грн.

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

Очное обучение

Онлайн обучение

Записаться на курс Пробный урок

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

React - очень популярный JavaScript фреймворк, который применяется в построении пользовательских интерфейсов веб-приложений. Главная особенность данной платформы - компонентно-ориентированный подход, позволяющий переиспользовать код, что повышает общую гибкость написания приложений. Курс по “React Essential” предназначен для начинающих, которые только открывают для себя JS фреймворки. Что Вас ожидает? В ходе обучения Вы освоите базовые вещи: напишете первый компонент, научитесь управлять состоянием и параметрами, узнаете, как использовать события, чтобы делать компоненты динамическими. Разобравшись с основами фреймворка, перейдете к изучению стека технологий, которые используются вместе с ним, а именно: сборка приложений, подключение внешних библиотек, освоение архитектуры Flex. Под конец обучения создадите полноценное динамическое веб-приложение. Курсы проходят в Киеве. Обустроенные учебные аудитории обеспечивают максимально продуктивный процесс обучения. По завершению курса Вы сможете использовать React для создания одностраничных приложений (SPA) с высокой эффективностью и удобством.

Программа курса

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

Курс React.js в Киеве

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

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

Курс React.js в Киеве

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

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

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

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