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

    Голосов: 0
  • #1
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 о любой ошибке, случившейся у клиентов вашего приложения.
WEEK 1
  • Настройка рабочей среды
    • Приветствие
    • Фичи 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
WEEK 2
  • Поток данных в React
    • Где и как хранить данные
    • Внутренний state компонент
    • Поток данных: props и state
    • Передача данных между близкими компонентами, родителю, детям, соседям
    • Работа со стилями
    • Context: механизм связывания компонент
    • Синтетические события реакта, способы подписки
  • React semantic-ui. Изучаем и используем внешнюю библиотеку компонент
    • Установка
    • Изучаем принципы работы компонент
    • Компоненты уровня компоновки страниц
    • Компоненты оформления элементов
    • Работа с коллекциями
    • Компоненты порталы
  • React-router. Используем роутинг на стороне браузера.
    • Как работает роутинг на клиенте.
    • React-router v4. Как работает static routing и dynamic routing.
    • Вложенные роуты в static routing и их аналог в dynamic routing.
    • Передача аргументов через url.
    • Тесты для роутов.
    • Авторизация пользователя
    • Редиректы и переходы на странице.
WEEK 3
  • Тестирование 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
WEEK 4
  • Redux-saga. Управляем побочными эффектами
    • Что такое побочные эффекты в react.
    • Redux-saga и организация управления побочными эффектами.
    • Функции генераторы function* и управление генератором с помощью yield.
    • Возможности генераторов для организации работы с побочными эффектами в redux-saga.
    • Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest)
  • Redux-saga. Типы операций
    • Разница между блокирующими и не блокирующими операциями.
    • Параллельное исполнение задач,
    • Исполнение задач в состоянии гонки
    • Последовательное исполнение групп параллельных задач
    • Композиции саг, отмена саг, форк саг
  • Redux-saga. Работа с сетью
    • Подключаем axios для работы с сетью
    • Асинхронные экшены
    • Асинхронный поток данных
    • normalizr: горизонтальная нормализация данных
    • Тесты для разных операций redux-saga
WEEK 5
  • Redux-form: Работа с формами
    • Основные принципы работы.
    • Используем Field, FieldArray, FieldSection для компоновки формы
    • Нормализация данных
    • Валидируем данные по comit формы или при вводе
    • Асинхронный комит формы
  • Деплой и тестирование в облаке
    • Что такое continuous integration и delivery integration
    • Настраиваем jenkins для тестирования в облаке
    • Регистрируемся на
    • Деплой приложения на внешний сервер
    • Настраиваем rollbar для поимки сообщений у клиента
  • Дополнительные инструменты разработки
    • React Storybook
    • React Media
    • JSX Control Statements
    • React Performance.
    • Работа с lodash и moment.js
Материал может быть удален по просьбе

Скачать:

Ссылка доступна для пользователей с группой: Премиум 

 
Похожие темы
Сверху