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

[Aleksandr_X]

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

​

Спойлер: Описание курса

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

Приветствие

Фичи 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

скачать

Авторизуйтесь, чтобы посмотреть скрытый контент

 

[orso]

за какой год курс?

 

[Astraport]

за какой год курс?

См. картинку

 

[os]

Pirate VPN Service - Быстрый, безопасный и надежный VPN от команды PirateHUB

Работайте безопасно. Обходите любые блокировки. Защитите свои данные.

Подробнее

 

[Юков]

Интересно, как появится возможность - гляну

 

[kiv22041982]

Есть подозрение, что за 2 года в React JS произошли изменения... Насколько он - этот курс - актуален на сегодняшний день?