Комментарии 17
Вкусовщина под видом Правильного(тм) способа.
Непонятно для кого статья. Если для полного новичка, то зачем забивать голову деструктуризацией и чистыми компонентами, а если для новичка в Реакт(с опытом в вебе), то зачем рассказывать как бороться с общим случаем инлайн стилей.

В React все компоненты пользовательского интерфейса могут быть выражены в виде наборов чистых функций. Использование чистых функций для формирования UI можно сравнить с глотком чистого воздуха.


Через два абзаца.

Тут надо отметить, что хотя только что мы сказали о том, что функциональные компоненты предпочтительнее классов компонентов, в этом материале мы будем пользоваться, в основном, классами, так как код классов компонентов оказывается понятнее для новичков, он полагается на меньшее количество абстракций, с его помощью легче демонстрировать ключевые концепции React.
.

И так по всей статье: придумываем несущественную для новичков проблему и героически с ней боремся.

Здесь нас особенно интересует строка .

Пожалуйста, вычитывайте материал.
Это косяк нашего парсера, угловые скобки неправильно интерпретировались, поправил.
Опасная статья:) Новичкам, как руководство к действию, противопоказана категорически.

Куча утверждений являются либо передергиванием или откровенной неправдой, либо противоречием. Если интересно, то можно сделать даже подборку таких моментов.

Сравнение Angular и React не вполне корректно, хотя и возможно, по классической причине:
Angular — это фреймворк, который предлагает «out-of-the-box» все, начиная от StyleGuide, документацией, и заканчивая системами сборки проектов.
React — сам по себе лишь библиотека чтобы достаточно эффективно отрендерить DOM из модели.
Все остальное — вы собираете и делаете сами. Да, развита великолепная экосистема всевозможных библиотек на все случаи жизни. Но как из них из всех скомпоновать в архитектуру готового жизнеспособного приложения — уже лежит на плечах разработчика и архитектора. Это и плюс, и минус. Большие возможности — большая ответственность.

Если угодна аналогия из бизнеса — то Angular это франшиза какого-нибудь таксо-парка, а React это просто автомобиль:)

И на том и на другом вполне реально получить работающий продукт, но что нужнее зависит от ваших целей. И выбор лучше делать осознанно. Понимая границы применимости одного, и трудности, с которыми придется сталкнуться используя другое. Особенно если вы не инди-разработчик, и разработку нужно будет масштабировать в том числе и на распределенные команды.
Какой-то джуновский подход в onChange. Зачем-то для каждого поля свой обработчик. Обработчик должен быть один для всех полей, который должен добавлять значения в метод стейта (а в идеале — хранилища), например, fieldsData:

/**
   * Set fields data from form
   *
   * @param fieldData
   */
  setFieldsData = fieldData => {
    if (fieldData && fieldData.target && fieldData.target.id) {
      fieldData = {field: fieldData.target.id, value: fieldData.target.value};
    }

    let fieldsData = this.state.fieldsData;
    fieldsData[fieldData.field] = fieldData.value;
    this.setState({ fieldsData });
  };


Проверка в функции нужна для того, чтобы понять, вызов был из формы или при прямом вызове.
Отличная статья. Никого не слушайте ) Да, некоторые моменты — дело вкуса. Остальное очень понятно и толково описано. Для новичков в Реакте (а не в веб-фронтенде) — самое то!
Я как раз «изучаю» reactjs уже недели полторы, за спиной долгий опыт php + jquery салянки и всего такого. НО что меня сильно раздражало в туториалах для новичков, так это то, что мне вобще не ясен синтаксис js, в котором проводят обучения. Спустя долгие пару суток, я смог нагуглить что такое анонимные функции и деструктуризация, а до этого я просто не понимал даже как правильно спросить у гугла что такое () => {...}, ES5, ES6...
На мой взгляд туториалы для новичков js библиотек начинаются там, где кончаются senior js. И мне кажется, это не правильно, если туориал для новичка, то пусть синтаксис там будет базовый, а не ES.
имхо уже можно назвать ES2015(ES6)+ базовым синтаксисом для новых проектов :)
почему бы новичками сразу не использовать современные и удобные фишки? зачем потом переучиваться?
Коллега! :)
Cейчас занят тем же самым. Но прежде чем засесть за nodejs и react я штудирую базовый JS на learn.javascript.ru

Это онлайн учебник и там есть целый раздел посвященный нововведениям es6. Сильно рекомендую если не читать учебник полностью, то хотя бы ознакомится с этим разделом. Довольно сжато, но доступно объясняются все эти штуки.
На мой взгляд туториалы для новичков js библиотек начинаются там, где кончаются senior js

Позволю себе с Вами не согласиться. Я сам в основном пишу задний конец бэкенд на Python, Go, до недавнего времени имел дело с JS исключительно через jQuery. НО, поглядывал статьи о новинках в JS: промисы, стрелочные функции, async/await, etc. Именно поглядывал, а не изучал и вдавался в подробности.
Недавно начали новый проект, так уж выпало, что мне достался UI и я решил попробовать React, вместо привычной "%язык% + jquery салянки". И поскольку я был «в курсе последних новинок» в JS, то разобраться с React(+Redux +Thunk +Semantic UI) мне удалось всего за пару дней (основы, я не стал гуру).
Смею предположить, что у Вас аналогичная ситуация, в плане «общения» с JS, за исключением слежения за новинками, поэтому были сложности в начале?
Учитывая, что CRA недавно стали поддерживать css modules из коробки, советовать новичкам стилизовать приложение инлайн стилями?

Теперь можно сконфигурировать css modules + scss препроцессор просто установив через консоль node-sass за одну минуту. Нет необходимости эджектить конфиг CRA.
Складывается впечатление. что статью писал такой же начинающий.

Автор статьи, перевод которой мы публикуем, считает, что, к несчастью, в большинстве из существующих руководств по React не уделяется должного внимания ценным практическим приёмам разработки.

В этой статье их тоже нет. Лучше уж официальный туториал почитать.

Автор делится своими соображениями по поводу функциональных компонентов, но ни слова не написал о преимуществах компонентов классов.

Статья из разряда вредных. Я бы не рекомендовал новичкам опираться на советы автора по поводу функциональных компонентов. По поводу остального, лучше почитать официальный туториал и документацию. Там можно найти множество лучших практик. А за примерами реальных приложений, уже искать тематические статьи и репозитории на github.
Я только начал изучать реакт (изучил код крестики-нолики с офсайта и посмотрел несколько часов различных видосов на ютубе) — эта статья — лучшее что я вообще видел. Спасибо.

Еще бы такое про деплой — как встроить реакт-приложение в уже существующий проект.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.
Информация
Дата основания

27 августа 2015

Местоположение

Россия

Сайт

ruvds.com

Численность

11–30 человек

Дата регистрации

18 марта 2016

Блог на Хабре