- PVSM.RU - http://www.pvsm.ru -

Текстовый туториал по 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]


Сайт-источник PVSM.RU: http://www.pvsm.ru

Путь до страницы источника: http://www.pvsm.ru/javascript/114939

Ссылки в тексте:

[1] документацию: http://redux.js.org/docs/introduction/Ecosystem.html

[2] gitbook: https://www.gitbook.com/@maxfarseer/

[3] Реакт: https://facebook.github.io/react/

[4] flux: https://facebook.github.io/flux/

[5] Redux: http://redux.js.org/

[6] курс: https://maxfarseer.gitbooks.io/react-course-ru/content/

[7] PDF: https://www.gitbook.com/download/pdf/book/maxfarseer/react-course-ru

[8] ePub: https://www.gitbook.com/download/epub/book/maxfarseer/react-course-ru

[9] mobi: https://www.gitbook.com/download/mobi/book/maxfarseer/react-course-ru

[10] webpack: https://webpack.github.io/

[11] babel: http://babeljs.io/

[12] курс: https://maxfarseer.gitbooks.io/redux-course-ru/content/

[13] PDF: https://www.gitbook.com/download/pdf/book/maxfarseer/redux-course-ru

[14] ePub: https://www.gitbook.com/download/epub/book/maxfarseer/redux-course-ru

[15] mobi: https://www.gitbook.com/download/mobi/book/maxfarseer/redux-course-ru

[16] Источник: https://habrahabr.ru/post/279249/