/react-things

Коллекция материалов для изучения React

Primary LanguageJavaScript

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, которыми вы будете пользоваться постоянно.

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

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

  • Абсолютный минимум [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 на русском языке. Научит только самым базовым вещам: работе с компонентами, lifecycle хуками, формами и валидацией пропсов с помощью PropTypes.

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

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

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

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

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

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

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

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

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

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

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

  • Пишем всю middleware [EN].

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

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

Роутинг

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

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

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

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

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

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

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

Инструменты

  • Webpack 2 для самых глупых – подробное введение в использование второй версии сборщика

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

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

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

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

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

Разное