Без кейворда

Коллекция материалов для изучения ES2015, React, Redux, Webpack, Babel и всего остального.

Думаешь, что подборка не полная? Присылай Pull Request с недостающими материалами!

ES2015: то, что действительно нужно

Перед тем, как вы утоните с головой в пучине вод React самое полезное, что вы можете сделать – изучить некоторые возможности ES2015, которыми вы будете пользоваться постоянно.

Блочные зоны видимости [RU] – const , let вместо var : в чём разница и где стоит быть осторожным.

Стрелочные функции [RU] – f => f вместо function (f) < return f; >и как не потерять контекст выполнения функции без использования метода bind .

Расширение литерала объекта [RU] – сокращённые записи свойств и методов в объектах.

Деструктуризация объектов и массивов [RU] – сокращённая запись обращения к свойствам.

Модульная система [RU] – основы использования нативных модулей.

Классы [RU] – работа с прототипами и наследованием в новом стандарте.

Интерполяция строк [RU] или как забыть про 'hello, ' + userName + '!' .

Новые методы массивов [EN]: Array.from , find , fill , includes и многие другие.

Обещание бургерной вечеринки [RU] – основы работы промисов на интересных примерах.

Онлайн песочница [EN] для изучения промисов с визуализацией алгоритма их выполнения. Есть несколько отличных примеров для демонстрации принципов работы и возможность написать код своими руками.

React: Основы основ

Статья из официальной документации Thinking in React [RU] про идеологию библиотеки, поможет понять, основные идеи лежащие в основе React.

React курс для начинающих [RU] – текстовый курс по основам React на русском языке. Научит только самым базовым вещам: работе с компонентами, lifecycle хуками, формами и валидацией пропсов с помощью PropTypes.

React.js for Stupid People [EN] – спасёт вас, если вы до сих пор ничего не поняли. Всё максимально доступно для самых чайников. Есть перевод на русский язык – React.js для глупых людей [RU].

Абсолютный минимум [EN], того что надо знать, чтобы начать работать с React.

Modern React with Redux [EN] – курс по основам React. Подойдёт для всех, кто только начинает своё знакомство с экосистемой React. В ходе первой части курса вы построите приложение для поиска и просмотра видео на YouTube (только React, никаких изысков), во второй части начнёте своё путешествие в страну Redux и создадите приложение с использованием Redux и Google Maps API.

React to the Future [EN] – презентация про то, чем действительно является React и, почему появление библиотеки – это большой шаг вперёд.

Объяснение принципов работы пропсов и состояний [EN] в React на примере Дарт Вейдера и повстанцев.

Подборка интерактивных примеров [EN], которые помогут разобраться в базовых идеях, лежащих в основе библиотеки.

Ныряем в React с головой

PureComponent в React [RU] – как и зачем применять, разбор отличий от Component.

Основы производительности React-приложений [RU] – как правильно работать с shouldComponentUpdate .

Основы работы с содержимым head [RU] в React-приложениях (в том числе и изоморфных) с помощью библиотеки react-helmet.

React Lifecycle Methods – how and when to use them [EN] – всё про жизненный цикл компонентов в React: подробно о том, как работает каждый метод + разбор ситуаций, в которых может понадобиться каждый хук.

Контекст в React [EN] – экспериментальный функционал, на который опираются многие популярные библиотеки (react-redux, react-intl).

Компоненты высшего порядка [EN] – руководство по работе с вашими собственными компонентами высшего порядка.

Десять мини-паттернов в React [EN]: разбор лучших практик при работе с компонентами.

Курс Advanced React and Redux [EN] расскажет про основы тестирования React компонентов, работу с аутентификацией на стороне клиента и сервера и компоненты высшего порядка.

Работа с AJAX запросами в React [EN] — где и когда загружать данные.

Работа с анимациями в React [EN] с помощью ReactCSSTransitionGroup. Если вы видели приложения на React с невероятно крутыми переходами между страницами, то посмотрите, как за пару минут можно прикрутить нечто подобное к себе в проект.

Робкое знакомство с Redux

Подборка 8 вещей, которые обязательно надо изучить в React, перед знакомством с Redux. [EN]

Когда я пойму, что готов к Redux?, перевод статьи разработчика о том, как понять, что наступило время освоить Redux.

Лучший способ ознакомиться с Redux — посмотреть курс от самого создателя (Дэна Абрамова) на egghead.io [EN] — 30 видео уроков, в которых покажут не только, как пользоваться библиотекой, но и объяснят принцип её работы (по сути, в ходе курса вы сами напишете свой мини-Redux) + в конце расскажут про связку с React с помощью компонентов из React-redux, объяснят, как создавать компоненты-контейнеры, единственная цель которых передавать данные в другие компоненты, а также, как использовать контексты при работе с React.

Сразу после курса бегите читать официальную документацию [EN]. Документация небольшая по объёму, но проясняет многие детали, которые не смог покрыть курс. Так же существует вольный перевод документации на русском языке [RU].

Статья Лучшие практики при работе с Redux [EN] расскажет, как не совершить типичных ошибок: где и как организовать бизнес логику приложения, как правильно работать с асинхронными операциями, как создать архитектуру проекта на Redux и многое другое.

mergeStateToProps [RU] — возможности React Redux, о которых вы не знали ( mapDispatchToProps на стероидах).

Идиоматический Redux [EN] – второй курс от создателя Redux (Дэна Абрамова) про продвинутые техники использования библиотеки.

Обзор экосистемы Redux [EN] — объяснение принципов сосуществования с React, React Router + паттерны работы с асинхронностью и аутентификацией.

Асинхронный Redux [EN] – разбор библиотек для работы с асинхронными операциями в Redux.

React Router 4 [RU] – простое объяснение отличий от предыдущих версий.

React router + browserHistory [EN] – как правильно использовать в продакшене.

Всё о React Router 4 [EN] – подробно о новых идеях заложенных в новой версии библиотеки и почему всё так кардинально изменилось.

Напиши свой React Router, или как работает четвёртая версия React Router изнутри [EN] – лучший способ понять принцип работы React Router.

Изоморфные приложения на React с React Router 4 версии [EN] – как организовать server-side рендеринг приложения.

React Router не всегда идеальное решение для организации роутинга. Facebook, например, вообще не использует его в своих проектах. Обзор альтернатив React Router [EN].

Как написать свой роутер [EN] – руководство по созданию собственного роутера, работающего с server-side рендерингом.

Анимированные переходы между страницами + React Router 4 [EN] – введение в использование ReactTransitionGroup.

Как избежать излишней сложности состояния приложения [RU] – руководство по правильной организации Redux-стора в больших приложениях.

Пять советов по работе с Redux в больших приложениях [EN] – продвинутое использование селекторов, техники разделения состояния, переиспользование редюсеров.

От и до: уроки по созданию полноценных приложений

Создаём клон Trello [RU]. Описывается разработка сайта c авторизацией и функционалом популярного. Помимо React используется Redux, PostgreSQL, Phoenix (фреймворк для Elixir, который в свою очередь работает на Erlang VM).

Собираем с нуля изоморфное приложение – пошаговое руководство по настройке сборки приложения на React с server-side рендерингом [RU]:

Создаём клон Реддита [EN] с помощью React и Firebase

Создаём клон Твиттера [EN] на React с использованием appbase в качестве бэкенда.

Создаём медиа-библиотеку с помощью React, Redux и Redux-saga [EN]:

Тестирование компонентов в React [EN]: как сделать это правильно и что нужно тестировать в первую очередь.

Видео курс от egghead.io [EN] про тестирование React приложения с Jest.

Webpack + React [RU] – как уменьшить бандл в 15 раз: подборка плагинов для экстремального сжатия.

Webpack 4 для начинающих [EN] – подробное введение в использование четвертой версии сборщика.

Видео курс [EN] по второй версии Webpack. Расскажут, как написать базовый конфиг, работать с лоадерами и плагинами, автоматически генерировать HTML, работать с React и Babel, стилями и другими файлами + подробно про настройку Webpack dev server для удобной горячей перезагрузки.

Собираем React приложение с помощью Webpack 2 и Babel [EN] – руководство по настройке самых необходимых инструментов.

Code Splitting [EN] в React приложении – разделение большого бандла на меньшие части для более быстрой загрузки приложения.

Горячая перезагрузка всего! [EN] Как использовать Hot Module Replacement в Webpack для перезагрузки фронтенда и бэкенда в изоморфном приложении.

Руководство по настройке редактора кода Atom [EN] для наиболее продуктивной работы с React приложениями.

Подборка интересных open source проектов [EN] сделанных на React. На их примере можно посмотреть, как правильно организовать код в своих проектах и подглядеть пару интересных инструментов для сборки.

Awesome React Talks [EN] – подборка лучший докладов с конференций, посвященных React, всё разделено по годам.

React за 30 минут [EN] – создайте свой клон библиотеки и посмотрите, как всё устроено изнутри.

Основы работы с recompose [EN] – библиотекой для расширения возможностей функциональных компонентов и их оптимизации.