React Things

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

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

---

Содержание:

1. ES2015: то, что действительно нужно
2. React: Основы основ
3. Ныряем в React с головой
4. Робкое знакомство с Redux
5. Продвинутый Redux
6. Роутинг
7. Архитектура приложения
8. От и до: уроки по созданию полноценных приложений
9. Тестирование
10. Инструменты
11. Разное

---

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] – основы работы промисов на интересных примерах.

  • Сборник наиболее необходимых на практике приёмов использования промисов [RU]

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

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

• Статья из официальной документации 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], которые помогут разобраться в базовых идеях, лежащих в основе библиотеки.

Ныряем в 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

• Подробное объяснение принципов разделения презентационных компонентов и компонентов контейнеров [RU] при работе с React и Redux.

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

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

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

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

Продвинутый 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]:

  • Часть 1
  • Часть 2
  • Часть 3

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

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

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

  • Часть 1
  • Часть 2

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

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

• Лучшие практики тестирования React компонентов [EN].

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

• Руководство по использованию TDD подхода при разработке React приложений [EN]

Инструменты

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

• Webpack 2 для самых глупых [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] в виде диаграммы.