Программирование React.js.Разработка веб-приложений

[Loftschool] React.js.Разработка веб-приложений

e907e5855dfe.jpg

Настройка рабочей среды

Приветствие

Фичи es6/7 которые мы будем использовать на курсе

Настройка окружения: vs code, github, npm & yarn, eslint, prettier

Полезные плагины для vs code

Установка create-react-app, настройка своего проекта

Принцип работы webpack и create-react-app

REACT.js Введение

Компонентный подход к разработке

Virtual DOM: причины создания, принцип работы

JSX: верстка на js

Жизненный цикл: React-компоненты от инициализации до unmount.

Как все это работает вместе

Компоненты React

Вложенные компоненты в JSX при помощи props.children.

Связь с DOM с помощью refs.

Проверка аргументов компоненты с помощью PropTypes

Три синтаксиса для компонент: Stateless компоненты, ES6-классы и React.createClass.

Отличие React.Component от React.PureComponent

Components, elements и instances

Поток данных в React

Где и как хранить данные

Внутренний state компонент

Поток данных: props и state

Передача данных между близкими компонентами, родителю, детям, соседям

Работа со стилями

Context: механизм связывания компонент

Синтетические события реакта, способы подписки

React-router. Используем роутинг на стороне браузера.

Как работает роутинг на клиенте.

React-router v4. Как работает static routing и dynamic routing.

Вложенные роуты в static routing и их аналог в dynamic routing.

Передача аргументов через url.

Тесты для роутов.

Авторизация пользователя

Редиректы и переходы на странице.

Введение в Redux

3 принципа redux

Actions

Action creators

Reducers

Store

Data flow

Redux devtools

react-redux: Использование с react

Углубленное изучение Redux

Как работает redux middlewares

Redux-actions: укрощаем многословность redux

Селекторы состояния

Библиотека reselect, мемоизация селекторов

Тесты для redux action creators

Тесты для redux reducers

Тестирование react приложений.

Что такое TDD.

Рабочее окружение для написание тестов: список популярных тест раннеров, типы тестов, типы синтаксисов тестов.

Jest: пишем в стиле TDD тесты для react и следим за изменениями.

Snapshot тестирование: упрощаем процесс тестирования стандартных сценариев.

Enzyme: тестируем правильный рендеринг компоненты.

Redux. Практическое занятие

Redux-saga. Управляем побочными эффектами

Что такое побочные эффекты в react.

Redux-saga и организация управления побочными эффектами.

Функции генераторы function* и управление генератором с помощью yield.

Возможности генераторов для организации работы с побочными эффектами в redux-saga.

Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest)

Redux-saga. Работа с сетью

Подключаем axios для работы с сетью

Асинхронные экшены

Асинхронный поток данных

normalizr: горизонтальная нормализация данных

Тесты для разных операций redux-saga

Деплой и тестирование в облаке

Что такое continuous integration и delivery integration

Настраиваем jenkins для тестирования в облаке

Регистрируемся на www.netlify.com

Деплой приложения на внешний сервер

Настраиваем rollbar для поимки сообщений у клиента

Redux-form: Работа с формами

Основные принципы работы.

Используем Field, FieldArray, FieldSection для компоновки формы

Нормализация данных

Валидируем данные по comit формы или при вводе

Асинхронный комит формы

TypeScript

Установка

О Typescript

Аннотирование типов

Типы

Приведение типов

Дополнительные инструменты разработки

React Storybook

React Media

JSX Control Statements

React Performance.

Работа с lodash и moment.js
скачать
 

Рекламное сообщение
📣 Клубы Web-Master, Traffic (Instagram, Google, Яндекс) и Нейросети вновь доступны для всех желающих!

Что изменилось:
  • Клуб Web-Master совмещен с клубом по Трафику. Теперь вы получаете доступ сразу ко всем материалам всех тематических клубов. В клубе по трафику вы получаете доступ к блокам по Instagram (+ серые/черные ниши), Яндекс и Google. Материалы доступны для изучения сразу. Больше нет необходимости покупать эти направления по отдельности. Вступаете и изучаете только то, что вам нужно.
  • В совмещенных клубах появилась собственная биржа заказов.
  • До вступления в клуб теперь доступна бесплатная 15-минутная консультация с куратором.
  • Направление открыто до конца года, возможно, закроем немного раньше. С 2025 года мы полностью убираем эти направления для новых пользователей.
  • Стоимость доступа к совмещенным клубам - 150 + 100 USD.
  • Текущие пользователи клубов Веб-мастер и Трафик получат возможность присоединиться к соседнему клубу по отличным условиям.
  • Стоимость доступа клуба по нейросетям осталась, как и была. В клубе сейчас почти 200 участников. Совсем скоро появится блок по нейро-музыке, на который участники клуба получат 50% скидку. После выхода блока в свет, общая стоимость клуба по нейросетям повысится.
🟢 ПОДРОБНОСТИ
 

Обратите внимание

Назад
Сверху