Большая подборка материалов для изучения React
Русскоязычный репозиторий с большой подборкой материалов (как на русском, так и на английском языке) для изучения 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]
- Собираем с нуля изоморфное приложение – пошаговое руководство по настройке сборки приложения на React с server-side рендерингом [RU]
Тестирование
- Тестирование компонентов в 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, которые могут попасться на собеседовании