14.03.2016 13:54
maxfarseer 19 15700 Источник
Закончил работу над парой подробных текстовых туториалов на русском. Постарался уделить как можно больше времени практике. По ходу повествования есть вопросы, задачи и решения.

Курс про 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)


  1. Keyten
    14.03.2016 21:22
    #8805449

    Спасибо!


  1. geakstr
    14.03.2016 21:57
    #8805479
    +1

    Новичкам советую прежде чем приступать к использованию redux, прочитать, чем он отличается от каноничного flux.


  1. sanex3339
    14.03.2016 22:28
    #8805507

    Спасибо за туториал!


  1. DenimTornado
    14.03.2016 22:57
    #8805553

    Всё, это было последней каплей, спасибо! Пойду переписывать свою апку с Handlebars + говнокод на React!


  1. strannik_k
    15.03.2016 00:17
    #8805603

    Спасибо за туториал!

    Было бы здорово, если в каждой главе были бы итоги вкратце, как сделано на сайте https://learn.javascript.ru/

    Какие вопросы были не затронуты в туториалах, но на которые вы жаждите узнать ответ?
    По Relay пока-что мало информации, особенно на русском. Хотелось бы увидеть сравнение Relay c Redux.

    По Redux хотелось бы почитать на русском о менеджменте состояний и других проблемных местах:
    tonyhb.gitbooks.io/redux-without-profanity/content/ch1-state-management.html


    1. maxfarseer
      16.03.2016 11:48
      #8807141

      Добрый день, как-то пару месяцев назад пытался вникнуть в relay и пример про "звездных войн", но не удалось. Пока не могу обещать ответа на этот вопрос.
      По "менеджменту состояний.." — вопрос любопытный, если буду копать обязательно сообщу. Пока, к сожалению, тоже не в планах.


  1. timurkar
    15.03.2016 09:44
    #8805731

    Прекрасная штука, спасибо большое


  1. n0ne
    15.03.2016 14:30
    #8806177
    +1

    Вы — Героя дня, да.
    Когда ждать продолжения?


    1. maxfarseer
      16.03.2016 11:49
      #8807143

      Добрый день, что именно хочется в "продолжении" ?


  1. FFunk
    15.03.2016 20:18
    #8806663
    +2

    Понравился туториал по React'у. Хотелось бы что-то подобное по react-router.


  1. maxfarseer
    16.03.2016 11:42
    #8807137
    +3

    Спасибо всем за отзывы и правки. Исходя из ваших пожеланий, первым делом будет описан "роутинг". Думаю управиться с ним до конца месяца. Роутинг будет рассматриваться на основе redux-приложения.

    P.S. Немного статистики: на двоих, реакт курс и редукс курс уже набрали почти 4000 скачиваний.


  1. DeLaVega
    16.03.2016 18:10
    #8807873

    Полистал реакт.

    1. В качестве key нужно избегать использования index, он должен быть на последнем месте по приоритетам. Самый идеальный key — это индекс, на втором месте — любой уникальный ключ, который может сгенерить lodash допустим. И только потом index.

    2. В нескольких местах замечал, что вы создаёте переменную, допустим author — а по факту используете её только 1 раз. Так вы засоряете память.
    Есть иная ситуация — у вас может идти this.props.author, this.props.name и тд, то есть вы каждый раз обращаетесь на уровень выше, хотя можете эту пропсу сохранить уже в рамках функции и обращаться к ней там, это будет быстрее.

    3. eshe_odno_svoistvo… В js лучше использовать camelCase, то есть ваш ключ должен принять вид — esheOdnoSvoistvo

    Ещё полистаю, может ещё чего добавлю.


    1. DeLaVega
      16.03.2016 18:16
      #8807887
      +1

      <p className={'news__big-text ' + (visible? '': 'none')}>{bigText}

      Реакт работает с виртуальным домом, то есть если нет данных, то лучше не выводить обёртку вообще…

      {visible? {bigText}: null}


    1. maxfarseer
      16.03.2016 21:11
      #8808183

      Добрый вечер, спасибо за комментарий.

      1. Не совсем понял, "самый идеальный — это индекс"? Цель ключа дать уникальность элементу. С помощью index мы же ее достигаем, почему это плохо?

      2. Абсолютно с вами согласен. Если используется больше 1го раза — нужна переменная, если 1 раз — лучше без нее. Либо создавал для наглядности, либо написал где-то не подумав. Гитбук позволяет удобно отправлять замечания по тексту, на будущее — я бы не отказался от замечаний такого типа.

      3. Это был просто пример для наглядности. Про camelCase — согласен.


      1. geakstr
        16.03.2016 21:53
        #8808239
        +1

        1. Индекс элемента в массиве нестабилен и не может идентифицировать элемент (просто потому, что после добавления/удаления элементов из коллекции индекс изменится). Проблема выбора и необходимость стабильных ключей для работы реакта хорошо расписана в документации.


      1. DeLaVega
        16.03.2016 23:58
        #8808439
        +2

        Извиняюсь, ошибся. На первом месте — id.

        По индексу уже ответили, попытаюсь по-простому, по-русски:
        1. Вы выводите элементы в цикле — им проставляете индекс.
        2. Вы удаляете элемент из UI.
        3. Запускается ререндер.
        4. Элемент стоящий после удалённого опять получает тот же индекс, что и у удалённого, потому что у вас опять пробежался цикл.
        5. То есть ивент относящийся ко второму, по факту уже будет воздействовать на третий.

        Как то так. Где то была статья, к сожалению сейчас найти не могу.


      1. lexasss
        18.03.2016 00:01
        #8809893

        Гитбук позволяет удобно отправлять замечания по тексту

        Подскажите как, пожалуйста. Сразу могу сказать, что 
        +e.target.innerText
        в ФФ не работает – испольуйте textContent вместо innerText


        1. maxfarseer
          18.03.2016 17:01
          #8810581
          +1

          Справа от обычных параграфов появляется "+" — нажмите на него и добавьте коммент. Замечание у вас верное, спасибо.


        1. maxfarseer
          18.03.2016 17:07
          #8810595

          Даже не думал, что innerText нестандартное свойство.