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

[Odyvanchik]

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

Больше никаких хаков с jQuery! Только структурированный код и декларативный подход в приложениях. React.js имеет огромную экосистему библиотек, зная его, не составит труда начать писать полноценные мобильные приложения с помощью React Native!

За 5 недель мы изучим React.js и разработаем свое веб-приложение. Освоим джентльменский набор инструментов React-разработчика. Весь код будет храниться на github, тестироваться в облаке, а сообщения об успешных тестах и ошибках у клиента прилетят нам в Slack.

Пройдя курс, вы научитесь

* Разрабатывать полноценные приложения на стеке React.js
React.js является лишь представлением данных, для полноценной работы приложения мы изучим как хранить данные, общаться с сервером и следить за свежестью данных на клиентской стороне.

* Оптимизировать React.js приложения
Прежде чем оптимизировать, мы научимся понимать когда нам нужно заниматься этим, и как правильно найти места, нуждающиеся в оптимизации. Мы научимся пользоваться современными инструментами google chrome и с помощью них найдем кандидатов на оптимизацию.

* Правильно разделять работу с данными и представлением
Узнав какие абстракции используют разработчики известных библиотек, вы сможете улучшить свои приложения, используя такие же приемы. Строго разделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера, делать time travel debug и использовать приемы оптимистичных интерфейсов.

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

* Тестировать все части вашего фронтенд-приложения
Современные приложения содержат тысячи строк кода и, чтобы быть уверенным в том, что все работает как надо, вы научитесь тестировать каждую часть вашего приложения, автоматизировать тестирование и наслаждаться стабильностью работы вашего приложения.

* Выбирать правильные инструменты для вашего стартапа
Существует огромное множество библиотек, которые позволяют не писать код, а использовать чужие наработки, будучи уверенными что там все протестировано и проверено. Нам предстоит изучить не только стек React-приложений, но и изучить самые популярные библиотеки, которые могут пригодиться в разработке больших приложений.

* Правильно разделять ваш код и UI на компоненты, а компоненты в правильную файловую иерархию
Правильно разделив код на компоненты, вы сможете переиспользовать их много раз в разных частях вашего приложения. Мы изучим тонкости умных компонент, глупых компонент и компонент высшего порядка: зачем они нужны, и как такие компоненты упрощают разработку больших приложений.

* Мониторить работу вашего приложения и быстрое обнаружение ошибок у клиентов
Написать и протестировать приложение — это еще пол беды, вы научитесь мониторить ошибки с помощью современных средств и вовремя на них реагировать, получая уведомления в отдельный канал slack о любой ошибке, случившейся у клиентов вашего приложения.

* Настройка рабочей среды
Приветствие
Фичи 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 semantic-ui. Изучаем и используем внешнюю библиотеку компонент
Установка
Изучаем принципы работы компонент
Компоненты уровня компоновки страниц
Компоненты оформления элементов
Работа с коллекциями
Компоненты порталы

* React-router. Используем роутинг на стороне браузера.
Как работает роутинг на клиенте.
React-router v4. Как работает static routing и dynamic routing.
Вложенные роуты в static routing и их аналог в dynamic routing.
Передача аргументов через url.
Тесты для роутов.
Авторизация пользователя
Редиректы и переходы на странице.

* Тестирование react приложений.
Что такое TDD.
Рабочее окружение для написание тестов: список популярных тест раннеров, типы тестов, типы синтаксисов тестов.
Jest: пишем в стиле TDD тесты для react и следим за изменениями.
Snapshot тестирование: упрощаем процесс тестирования стандартных сценариев.
Enzyme: тестируем правильный рендеринг компоненты.

* Введение в Redux
3 принципа redux
Actions
Action creators
Reducers
Store
Data flow
Redux devtools
react-redux: Использование с react

* Redux - Использование с React.
Как работает redux middlewares
Redux-actions: укрощаем многословность redux
Селекторы состояния
Библиотека reselect, мемоизация селекторов
Тесты для redux action creators
Тесты для redux reducers

* Redux-saga. Управляем побочными эффектами
Что такое побочные эффекты в react.
Redux-saga и организация управления побочными эффектами.
Функции генераторы function* и управление генератором с помощью yield.
Возможности генераторов для организации работы с побочными эффектами в redux-saga.
Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest)

* Redux-saga. Типы операций
Разница между блокирующими и не блокирующими операциями.
Параллельное исполнение задач,
Исполнение задач в состоянии гонки
Последовательное исполнение групп параллельных задач
Композиции саг, отмена саг, форк саг

* Redux-saga. Работа с сетью
Подключаем axios для работы с сетью
Асинхронные экшены
Асинхронный поток данных
normalizr: горизонтальная нормализация данных
Тесты для разных операций redux-saga

* Redux-form: Работа с формами
Основные принципы работы.
Используем Field, FieldArray, FieldSection для компоновки формы
Нормализация данных
Валидируем данные по comit формы или при вводе
Асинхронный комит формы

* Деплой и тестирование в облаке
Что такое continuous integration и delivery integration
Настраиваем jenkins для тестирования в облаке
Регистрируемся на www.netlify.com
Деплой приложения на внешний сервер
Настраиваем rollbar для поимки сообщений у клиента

* Дополнительные инструменты разработки
React Storybook
React Media
JSX Control Statements
React Performance.
Работа с lodash и moment.js



—————————————————————————

📥 СКАЧАТЬ КУРС:

Для просмотра содержимого вам необходимо Войти или Зарегистрироваться.

🔐 Хотите получить доступ?

Чтобы увидеть скрытые ссылки и ставить лайки, активируйте VIP-статус.

💎 ПОЛУЧИТЬ ДОСТУП Наш Telegram канал