React.js: понятное руководство для начинающих

[andreysmind]

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

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

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

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

.

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

[Oleg_Mishutin]

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

Пожалуйста, вычитывайте материал.

[Boomburum]

Это косяк нашего парсера, угловые скобки неправильно интерпретировались, поправил.

[saaivs]

Опасная статья:) Новичкам, как руководство к действию, противопоказана категорически.

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

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

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

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

[Kirill_Dan]

Какой-то джуновский подход в 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 });
  };

Проверка в функции нужна для того, чтобы понять, вызов был из формы или при прямом вызове.

[adrozdov]

Отличная статья. Никого не слушайте ) Да, некоторые моменты — дело вкуса. Остальное очень понятно и толково описано. Для новичков в Реакте (а не в веб-фронтенде) — самое то!

[procode]

+++

[mflash123]

Я как раз «изучаю» reactjs уже недели полторы, за спиной долгий опыт php + jquery салянки и всего такого. НО что меня сильно раздражало в туториалах для новичков, так это то, что мне вобще не ясен синтаксис js, в котором проводят обучения. Спустя долгие пару суток, я смог нагуглить что такое анонимные функции и деструктуризация, а до этого я просто не понимал даже как правильно спросить у гугла что такое () => {...}, ES5, ES6...
На мой взгляд туториалы для новичков js библиотек начинаются там, где кончаются senior js. И мне кажется, это не правильно, если туориал для новичка, то пусть синтаксис там будет базовый, а не ES.

[ahmpro]

имхо уже можно назвать ES2015(ES6)+ базовым синтаксисом для новых проектов :)
почему бы новичками сразу не использовать современные и удобные фишки? зачем потом переучиваться?

[aivazovski]

Коллега! :)
Cейчас занят тем же самым. Но прежде чем засесть за nodejs и react я штудирую базовый JS на learn.javascript.ru

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

[glebasterBajo]

Не забудьте про MDN (сам частый гость) Повторное введение в JavaScript

[glebasterBajo]

На мой взгляд туториалы для новичков js библиотек начинаются там, где кончаются senior js

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

[Free_ze]

Туториалы же для новичков в реакте, а не в js.

[ArVaganov]

Учитывая, что CRA недавно стали поддерживать css modules из коробки, советовать новичкам стилизовать приложение инлайн стилями?

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

[rockon404]

Складывается впечатление. что статью писал такой же начинающий.

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

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

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

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

[procode]

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

Еще бы такое про деплой — как встроить реакт-приложение в уже существующий проект.

[ru_vds]

Мы сейчас переводим серию обучающих статей про реакт. Вот первая статья из серии.