Программирование 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
скачать
 

Рекламное сообщение
📈 Хотите влиться в мир криптотрейдинга, но нет знаний? Доверьте это профессионалам!

Выбрав наш сервис, вы даете возможность торговать криптовалютами нам на вашем аккаунте. Используем только проверенные сигналы проверенных трейдеров. Проверяем каждый сигнал перед отправкой в работу.

Выбрав копитрейд сервис, вы вкладываетесь в криптовалюты, но только в те, которые имеют реальный шанс принести доход.

Все что вам остается - это включать бота и разрешить ему торговлю.

➡️ Подробнее
 

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

Назад
Сверху