Русскоязычный репозиторий с большой подборкой материалов (как на русском, так и на английском языке) для изучения ES2015, React, Redux, Webpack, Babel и всего остального.

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

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

• Блочные зоны видимости [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] – основы работы промисов на интересных примерах.
  • Основные приемы использования промисов [RU]
  • Онлайн-песочница [EN] для изучения промисов с визуализацией алгоритма их выполнения.

Основы React

• Мыслим в стиле React [RU] – перевод статьи из официальной документации, она поможет понять идеологию библиотеки и идеи, которые легли в ее основу.
• Minimum Minimorum [EN] – минимум, необходимый, чтобы начать работать с React.
• Modern React with Redux [EN] – курс по основам React. Подойдёт для всех, кто только начинает своё знакомство с экосистемой React. В ходе первой части курса вы построите приложение для поиска и просмотра видео на YouTube (только React, никаких изысков), во второй части начнёте своё путешествие в страну Redux и создадите приложение с использованием Redux и Google Maps API.
• React to the Future [EN] – презентация о том, что такое React и почему он стал огромным шагом вперед.
• Курс React для начинающих [RU] – курс для новичков на русском языке.
• React Props/State Explained Through Darth Vader’s Hunt for the Rebels [EN] – пост о работе пропсов и состояний на примере Дарта Вейдера и повстанцев.
• React.js for Stupid People [EN] – спасительный круг для тех, кто до сих пор ничего не понял. Есть перевод на русский язык.

Углубленный React

• React Lifesycle Methods - How and When to Use Them [EN] – всё про жизненный цикл компонентов в React.
• PureComponent [RU] – об особенностях использования и отличиях от Component.
• Контекст в React [EN] – видео об экспериментальном функционале, на который опираются многие популярные библиотеки.
• Компоненты высшего порядка [EN] – руководство по работе с вашими собственными компонентами высшего порядка.
• Основы производительности приложений [RU] – как правильно работать с shouldComponentUpdate.
• Десять мини-паттернов [EN] – разбор лучших практик при работе с компонентами.
• Курс Advanced React and Redux [EN] – курс по основам тестирования компонентов, работы с аутентификацией на стороне клиента и сервера и компонентов высшего порядка.
• Основы работы с содержимым head [RU]
• Работа с AJAX-запросами [EN] – о том, где и когда загружать данные.
• Анимация [EN] – видео о работе с анимацией с помощью ReactCSSTransitionGroup.

Знакомство с Redux

• Курс от создателя Redux Даниила Абрамова[EN]  – 30 видеоуроков об устройстве и функционировании библиотеки, а также о приемах работы с ней.
• Официальная документация [EN]
• Лучшие практики при работе с Redux [EN] статья, рассказывающая, как избежать типичных ошибок: где и как организовать бизнес логику приложения, как правильно работать с асинхронными операциями, как создать архитектуру проекта на Redux и многое другое.
• Презентационный компонент и контейнер в React [RU] – подробное объяснение принципов разделения презентационных компонентов и компонентов контейнеров.

Продвинутый Redux

• Идиоматический Redux [EN] – второй курс от создателя Redux (Даниила Абрамова) про продвинутые техники использования библиотеки.
• Обзор экосистемы Redux [EN] — принципы сосуществования с React и React Router, паттерны работы с асинхронностью и аутентификацией.
• Пишем всю middleware [EN]
• Асинхронный Redux [EN] — обзор библиотек для работы с асинхронными операциями в Redux.
• mergeStateToProps [RU] — возможности Redux, о которых вы не знали (mapDispatchToProps на стероидах).

Роутинг

• React router + browserHistory [EN]
• Четвертая версия React Router изнутри [EN]
• Изоморфные приложения на React с React Router 4 версии [EN] – как организовать server-side рендеринг приложения.
• Обзор альтернатив React Router [EN]
• Как написать свой роутер [EN] – руководство по созданию собственного роутера, работающего с server-side рендерингом.

Архитектура приложения

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

Уроки по созданию полноценных приложений

• Клон Twitter [EN]
• Клон Trello [RU]
• Создание медиа-библиотеки [EN]
  • часть 1
  • часть 2
• Собираем с нуля изоморфное приложение – пошаговое руководство по настройке сборки приложения на React с server-side рендерингом [RU]
  • часть 1
  • часть 2
  • часть 3

Тестирование

• Тестирование компонентов в React [EN] 
• Лучшие практики тестирования компонентов [EN]
• Видеокурс по тестированию JS-приложений с Jest [EN]
• Руководство по использованию TDD подхода при разработке React приложений [EN]

Инструменты

• Webpack 2 для самых глупых [EN] – подробное введение в использование второй версии сборщика.
• Видеокурс по второй версии Webpack [EN]
• Собираем React приложение с помощью Webpack 2 и Babel [EN] – руководство по настройке самых необходимых инструментов.
• Code Splitting [EN] – разделение большого бандла на меньшие части для более быстрой загрузки приложения.
• Webpack + React [RU] – как уменьшить бандл в 15 раз: подборка плагинов для экстремального сжатия.
• Горячая перезагрузка всего [EN] Как использовать Hot Module Replacement в Webpack для перезагрузки фронтенда и бэкенда в изоморфном приложении.

Разное

• 15 вопросов с собеседования [RU]
• Подборка интересных опенсорсных проектов [EN]
• Awesome React Talks [EN] – подборка лучших докладов с конференций.
• React за 30 минут [EN]

Другие статьи по теме

5 вопросов по React, которые могут попасться на собеседовании

Изучение React. С чего начать?