[javascript.ru] Курс по React.JS. 2017

0
0 отзывов
equalizer Сравнить favorite_border В избранное
Арт: Q110611
Цена:
407
doneМного
doneЗаканчивается
highlight_offНет в наличии
notifications_none
Уведомить

[?IMG]?

?
В этом курсе мы с вами шаг за шагом пройдем от знакомства с основными идеями до использования самых новых инструментов и инфраструктуры React, на практике будем развивать одностраничное приложение. Начнем с построения простых компонентов, научимся настраивать окружение, поговорим про системы сборки и особенности работы с ES2015 синтаксисом.

Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру: Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией Flux – Redux.js

Курс состоит из 4-х блоков:
  1. Знакомство с React.?
  2. Инфраструктура React.?
  3. Построение приложений с React: Redux.js.?
  4. React для SPA: react-router и продвинутые API Реакта
Знакомство с React
В этом блоке мы разберем основные идеи Реакта, научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход.
  • Обзор и сравнение популярных современных фреймворков: Angular, Ember, React.
  • Настройка Babel и Webpack, HMR и React-transform (react-hot-loader).
  • Основы работы с Реактом, Virtual DOM, JSX.
  • Три синтаксиса для компонентов: Stateless components, ES2015-классы и React.createClass.
  • Поток данных: props и state.
  • Lifecycle: Жизнь React-компонента от инициализации до unmount.
  • Связь с DOM: keys & refs.
  • Готовим компоненты к повторному использованию: propTypes, mixins, decorators.
Инфраструктура React
Сейчас, говоря 'React', уже редко имеют ввиду саму библиотеку, которая просто позволяет декларативно описывать ваш UI. Сегодня React – это большая инфраструктура, которая включает в себя различные бибилиотеки для работы с данными, бизнес-логикой, сторонними компонентами, декораторами и множеством другого полезного кода.
  • Вложенные компоненты в JSX при помощи props.children.
  • Оптимизируем наше приложение с shouldComponentUpdate.
  • Immutable.js: узнаем как и зачем использовать иммутабельные данные.
  • Анимации в React, CSSTransitionGroup.
  • Использование сторонних компонентов.
Построение приложений с React: Redux.js
Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. В процесе построения простого новостного приложения мы детально разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы.
  • Знакомство с Flux – разбор основных элементов и идей.
  • Построение компонентов синхронной и асинхрнонной бизнес логики с Flux.
  • Ключевые отличия Redux и Flux.
  • Особенности Redux.js: функциональный подход, Redux dev tools, возможности для мониторинга и универсальных приложений.
  • Store, как иммутабельный отъект: Redux + Immutable.js.
  • Actions и Reducers, как чистые функции.
  • Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
  • React-redux для связи компонентов с логикой.
  • Side-effects в Redux: создание и использование Middlewares.
  • Варианты реализации асинхронных actions в Redux.
React для SPA: react-router и продвинутые API Реакта
Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.
  • Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
  • Настраиваем вложенные роуты.
  • Выбираем и настаиваем history для нашего приложения.
  • Используем context – еще один механизм передачи данных.
  • Объеденяем react-router и Redux.
  • Обзор Advanced API react-router.
  • Авторизация в react-router.