Курс про Redux попал в официальную документацию.
Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).
В текстах нарочно участвуют термины переведенные на русский (например, состояние), английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.
React.js для начинающих
В данном курсе затронуты основы "реакта". Результатом будет небольшое приложение, в котором пользователь сможет добавить новость в ленту новостей.
Здесь специально не рассматривается webpack, hot module replacement и так далее. Реакт — это библиотека, значит достаточно просто добавить скрипт на страницу и начать писать на нем.
Чуть подробнее чем остальные темы, в курсе разобрана работа с формой (контролируемые и неконтролируемые компоненты). Остальные разделы — минимум текста. Не забыты propTypes.
В заключении курса (на данный момент) рассматривается простая реализация системы глобальных событий. Что плавно подводит читателя к тому, почему flux (и Redux) были созданы.
В планах написать об анимациях.
Код — ES5. Прямая ссылка на курс (PDF, ePub, mobi).
Redux
В данном курсе наоборот, добавлены webpack и поддержка HMR, разработка становится более комфортной, но, возможно, несколько запутанной на стадии подготовки, если читатель никогда не работал с webpack и babel.
Результатом будет мини-приложение, которое позволить получить фото из VK за разные года, отсортированное по "лайкам". Освещены запросы выполнения ajax-запросов в частности и "как вообще это работает", если вы решили использовать Redux подход.
Для тех, кто только выбирает flux-архитектуру, или вообще еще не работал с react, хочу сказать, что redux подход мне очень симпатизирует. На мой взгляд он хорошо структурирует код и делает его читаемым. Даже если вы откроете "слегка подзабытый" проект, то вам не потребуется много времени на то, чтобы вспомнить что и как работает.
В планах — роутинг, оптимизация сборки.
Код — ES2015/ES7. Прямая ссылка на курс (PDF, ePub, mobi).
В качестве заключения
Буду рад услышать критику по тексту, по коду и вообще. Какие главы плохо написаны (если вы "бывалый"), либо какие главы вам были не понятны (если вы "начинающий")?
Какие вопросы были не затронуты в туториалах, но на которые вы жаждите узнать ответ?
Спасибо за внимание.
Комментарии (19)
geakstr
14.03.2016 21:57+1Новичкам советую прежде чем приступать к использованию redux, прочитать, чем он отличается от каноничного flux.
DenimTornado
14.03.2016 22:57Всё, это было последней каплей, спасибо! Пойду переписывать свою апку с Handlebars + говнокод на React!
strannik_k
15.03.2016 00:17Спасибо за туториал!
Было бы здорово, если в каждой главе были бы итоги вкратце, как сделано на сайте https://learn.javascript.ru/
Какие вопросы были не затронуты в туториалах, но на которые вы жаждите узнать ответ?
По Relay пока-что мало информации, особенно на русском. Хотелось бы увидеть сравнение Relay c Redux.
По Redux хотелось бы почитать на русском о менеджменте состояний и других проблемных местах:
tonyhb.gitbooks.io/redux-without-profanity/content/ch1-state-management.htmlmaxfarseer
16.03.2016 11:48Добрый день, как-то пару месяцев назад пытался вникнуть в relay и пример про "звездных войн", но не удалось. Пока не могу обещать ответа на этот вопрос.
По "менеджменту состояний.." — вопрос любопытный, если буду копать обязательно сообщу. Пока, к сожалению, тоже не в планах.
maxfarseer
16.03.2016 11:42+3Спасибо всем за отзывы и правки. Исходя из ваших пожеланий, первым делом будет описан "роутинг". Думаю управиться с ним до конца месяца. Роутинг будет рассматриваться на основе redux-приложения.
P.S. Немного статистики: на двоих, реакт курс и редукс курс уже набрали почти 4000 скачиваний.
DeLaVega
16.03.2016 18:10Полистал реакт.
1. В качестве key нужно избегать использования index, он должен быть на последнем месте по приоритетам. Самый идеальный key — это индекс, на втором месте — любой уникальный ключ, который может сгенерить lodash допустим. И только потом index.
2. В нескольких местах замечал, что вы создаёте переменную, допустим author — а по факту используете её только 1 раз. Так вы засоряете память.
Есть иная ситуация — у вас может идти this.props.author, this.props.name и тд, то есть вы каждый раз обращаетесь на уровень выше, хотя можете эту пропсу сохранить уже в рамках функции и обращаться к ней там, это будет быстрее.
3. eshe_odno_svoistvo… В js лучше использовать camelCase, то есть ваш ключ должен принять вид — esheOdnoSvoistvo
Ещё полистаю, может ещё чего добавлю.DeLaVega
16.03.2016 18:16+1<p className={'news__big-text ' + (visible? '': 'none')}>{bigText}
Реакт работает с виртуальным домом, то есть если нет данных, то лучше не выводить обёртку вообще…
{visible? {bigText}: null}
maxfarseer
16.03.2016 21:11Добрый вечер, спасибо за комментарий.
- Не совсем понял, "самый идеальный — это индекс"? Цель ключа дать уникальность элементу. С помощью index мы же ее достигаем, почему это плохо?
- Абсолютно с вами согласен. Если используется больше 1го раза — нужна переменная, если 1 раз — лучше без нее. Либо создавал для наглядности, либо написал где-то не подумав. Гитбук позволяет удобно отправлять замечания по тексту, на будущее — я бы не отказался от замечаний такого типа.
- Это был просто пример для наглядности. Про camelCase — согласен.
geakstr
16.03.2016 21:53+1- Индекс элемента в массиве нестабилен и не может идентифицировать элемент (просто потому, что после добавления/удаления элементов из коллекции индекс изменится). Проблема выбора и необходимость стабильных ключей для работы реакта хорошо расписана в документации.
DeLaVega
16.03.2016 23:58+2Извиняюсь, ошибся. На первом месте — id.
По индексу уже ответили, попытаюсь по-простому, по-русски:
1. Вы выводите элементы в цикле — им проставляете индекс.
2. Вы удаляете элемент из UI.
3. Запускается ререндер.
4. Элемент стоящий после удалённого опять получает тот же индекс, что и у удалённого, потому что у вас опять пробежался цикл.
5. То есть ивент относящийся ко второму, по факту уже будет воздействовать на третий.
Как то так. Где то была статья, к сожалению сейчас найти не могу.
lexasss
18.03.2016 00:01Гитбук позволяет удобно отправлять замечания по тексту
Подскажите как, пожалуйста. Сразу могу сказать, что+e.target.innerText
в ФФ не работает – испольуйте textContent вместо innerTextmaxfarseer
18.03.2016 17:01+1Справа от обычных параграфов появляется "+" — нажмите на него и добавьте коммент. Замечание у вас верное, спасибо.
- Не совсем понял, "самый идеальный — это индекс"? Цель ключа дать уникальность элементу. С помощью index мы же ее достигаем, почему это плохо?
Keyten
Спасибо!