Текстовый туториал по React.js и Redux на русском

Закончил работу над парой подробных текстовых туториалов на русском. Постарался уделить как можно больше времени практике. По ходу повествования есть вопросы, задачи и решения.

Курс про Redux попал в официальную документацию ^[1].

Оба руководства бесплатны и выложены на gitbook ^[2] (можно скачать PDF, ePub, mobi).

В текстах нарочно участвуют термины переведенные на русский (например, состояние), так и английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.

React.js для начинающих

В данном курсе затронуты основы "реакта". Результатом будет небольшое приложение, в котором пользователь сможет добавить новость в ленту новостей.

Здесь специально не рассматривается webpack, hot module replacement и так далее. Реакт ^[3] — это библиотека, значит достаточно просто добавить скрипт на страницу и начать писать на нем.

Чуть подробнее чем остальные темы, в курсе разобрана работа с формой (контролируемые и неконтролируемые компоненты). Остальные разделы — минимум текста. Не забыты propTypes.

В заключении курса (на данный момент) рассматривается простая реализация системы глобальных событий. Что плавно подводит читателя к тому, почему flux ^[4] (и Redux ^[5]) были созданы.

В планах написать об анимациях.

Код — ES5. Прямая ссылка на курс ^[6] (PDF ^[7], ePub ^[8], mobi ^[9]).

Redux

В данном курсе наоборот, добавлены webpack и поддержка HMR, разработка становится более комфортной, но, возможно, несколько запутанной на стадии подготовки, если читатель никогда не работал с webpack ^[10] и babel ^[11].

Результатом будет мини-приложение, которое позволить получить фото из VK за разные года, отсортированное по "лайкам". Освящены запросы выполнения ajax-запросов в частности и "как вообще это работает", если вы решили использовать Redux подход.

Для тех, кто только выбирает flux-архитектуру, или вообще еще не работал с react, хочу сказать, что redux подход мне очень симатизирует. На мой взгляд он хорошо структурирует код и делает его читаемым. Даже если вы откроете "слегка подзабытый" проект, то вам не потребуется много времени на то, чтобы вспомнить что и как работает.

В планах — роутинг, оптимизация сборки.

Код — ES2015/ES7. Прямая ссылка на курс ^[12] (PDF ^[13], ePub ^[14], mobi ^[15]).

В качестве заключения

Буду рад услышать критику по тексту, по коду и вообще. Какие главы плохо написаны (если вы "бывалый"), либо какие главы вам были не понятны (если вы "начинающий")?

Какие вопросы были не затронуты в туториалах, но на которые вы жаждите узнать ответ?

Спасибо за внимание.

Автор: maxfarseer

Источник ^[16]