Коллекция материалов для изучения ES2015, React, Redux, Webpack, Babel и всего остального.
Думаешь, что подборка не полная? Присылай Pull Request с недостающими материалами!
Содержание:
Перед тем, как вы утоните с головой в пучине вод 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] – основы работы промисов на интересных примерах.
Сборник наиболее необходимых на практике приёмов использования промисов [RU]
Онлайн песочница [EN] для изучения промисов с визуализацией алгоритма их выполнения. Есть несколько отличных примеров для демонстрации принципов работы и возможность написать код своими руками.
Статья из официальной документации Thinking in React [RU] про идеологию библиотеки, поможет понять, основные идеи лежащие в основе React.
React курс для начинающих [RU] – текстовый курс по основам React на русском языке. Научит только самым базовым вещам: работе с компонентами, lifecycle хуками, формами и валидацией пропсов с помощью PropTypes.
Все фундаментальные принципы React.js, собранные в одной статье [RU].
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], которые помогут разобраться в базовых идеях, лежащих в основе библиотеки.
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 с невероятно крутыми переходами между страницами, то посмотрите, как за пару минут можно прикрутить нечто подобное к себе в проект.
Подробное объяснение принципов разделения презентационных компонентов и компонентов контейнеров [RU] при работе с 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 + паттерны работы с асинхронностью и аутентификацией.
Пишем свой middleware [EN].
Асинхронный 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-стора в больших приложениях.
Как правильно организовать архитектуру большого приложения на React и Redux [EN].
Пять советов по работе с 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 с использованием API Hacker News [RU]
Тестирование компонентов в React [EN]: как сделать это правильно и что нужно тестировать в первую очередь.
Видео курс от egghead.io [EN] про тестирование React приложения с Jest.
Руководство по использованию TDD подхода при разработке React приложений [EN]
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 приложениями.
Подборка 15 вопросов с собеседования [RU] для React-разработчика.
Подборка интересных open source проектов [EN] сделанных на React. На их примере можно посмотреть, как правильно организовать код в своих проектах и подглядеть пару интересных инструментов для сборки.
Awesome React Talks [EN] – подборка лучший докладов с конференций, посвященных React, всё разделено по годам.
React за 30 минут [EN] – создайте свой клон библиотеки и посмотрите, как всё устроено изнутри.
Основы работы с recompose [EN] – библиотекой для расширения возможностей функциональных компонентов и их оптимизации.
Шпаргалка по принципам работы с экосистемой React + Redux [EN] в виде диаграммы.