Comments 17
Вкусовщина под видом Правильного(тм) способа.
Непонятно для кого статья. Если для полного новичка, то зачем забивать голову деструктуризацией и чистыми компонентами, а если для новичка в Реакт(с опытом в вебе), то зачем рассказывать как бороться с общим случаем инлайн стилей.
Через два абзаца.
И так по всей статье: придумываем несущественную для новичков проблему и героически с ней боремся.
Непонятно для кого статья. Если для полного новичка, то зачем забивать голову деструктуризацией и чистыми компонентами, а если для новичка в Реакт(с опытом в вебе), то зачем рассказывать как бороться с общим случаем инлайн стилей.
В React все компоненты пользовательского интерфейса могут быть выражены в виде наборов чистых функций. Использование чистых функций для формирования UI можно сравнить с глотком чистого воздуха.
Через два абзаца.
Тут надо отметить, что хотя только что мы сказали о том, что функциональные компоненты предпочтительнее классов компонентов, в этом материале мы будем пользоваться, в основном, классами, так как код классов компонентов оказывается понятнее для новичков, он полагается на меньшее количество абстракций, с его помощью легче демонстрировать ключевые концепции React..
И так по всей статье: придумываем несущественную для новичков проблему и героически с ней боремся.
Здесь нас особенно интересует строка .
Пожалуйста, вычитывайте материал.
Опасная статья:) Новичкам, как руководство к действию, противопоказана категорически.
Куча утверждений являются либо передергиванием или откровенной неправдой, либо противоречием. Если интересно, то можно сделать даже подборку таких моментов.
Сравнение Angular и React не вполне корректно, хотя и возможно, по классической причине:
Angular — это фреймворк, который предлагает «out-of-the-box» все, начиная от StyleGuide, документацией, и заканчивая системами сборки проектов.
React — сам по себе лишь библиотека чтобы достаточно эффективно отрендерить DOM из модели.
Все остальное — вы собираете и делаете сами. Да, развита великолепная экосистема всевозможных библиотек на все случаи жизни. Но как из них из всех скомпоновать в архитектуру готового жизнеспособного приложения — уже лежит на плечах разработчика и архитектора. Это и плюс, и минус. Большие возможности — большая ответственность.
Если угодна аналогия из бизнеса — то Angular это франшиза какого-нибудь таксо-парка, а 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.
На мой взгляд туториалы для новичков js библиотек начинаются там, где кончаются senior js. И мне кажется, это не правильно, если туориал для новичка, то пусть синтаксис там будет базовый, а не ES.
имхо уже можно назвать ES2015(ES6)+ базовым синтаксисом для новых проектов :)
почему бы новичками сразу не использовать современные и удобные фишки? зачем потом переучиваться?
почему бы новичками сразу не использовать современные и удобные фишки? зачем потом переучиваться?
Коллега! :)
Cейчас занят тем же самым. Но прежде чем засесть за nodejs и react я штудирую базовый JS на learn.javascript.ru
Это онлайн учебник и там есть целый раздел посвященный нововведениям es6. Сильно рекомендую если не читать учебник полностью, то хотя бы ознакомится с этим разделом. Довольно сжато, но доступно объясняются все эти штуки.
Cейчас занят тем же самым. Но прежде чем засесть за nodejs и react я штудирую базовый JS на learn.javascript.ru
Это онлайн учебник и там есть целый раздел посвященный нововведениям es6. Сильно рекомендую если не читать учебник полностью, то хотя бы ознакомится с этим разделом. Довольно сжато, но доступно объясняются все эти штуки.
Не забудьте про MDN (сам частый гость) Повторное введение в JavaScript
На мой взгляд туториалы для новичков js библиотек начинаются там, где кончаются senior js
Позволю себе с Вами не согласиться. Я сам в основном пишу
Недавно начали новый проект, так уж выпало, что мне достался UI и я решил попробовать React, вместо привычной "%язык% + jquery салянки". И поскольку я был «в курсе последних новинок» в JS, то разобраться с React(+Redux +Thunk +Semantic UI) мне удалось всего за пару дней (основы, я не стал гуру).
Смею предположить, что у Вас аналогичная ситуация, в плане «общения» с JS, за исключением слежения за новинками, поэтому были сложности в начале?
Туториалы же для новичков в реакте, а не в js.
Учитывая, что CRA недавно стали поддерживать css modules из коробки, советовать новичкам стилизовать приложение инлайн стилями?
Теперь можно сконфигурировать css modules + scss препроцессор просто установив через консоль node-sass за одну минуту. Нет необходимости эджектить конфиг CRA.
Теперь можно сконфигурировать css modules + scss препроцессор просто установив через консоль node-sass за одну минуту. Нет необходимости эджектить конфиг CRA.
Складывается впечатление. что статью писал такой же начинающий.
В этой статье их тоже нет. Лучше уж официальный туториал почитать.
Автор делится своими соображениями по поводу функциональных компонентов, но ни слова не написал о преимуществах компонентов классов.
Статья из разряда вредных. Я бы не рекомендовал новичкам опираться на советы автора по поводу функциональных компонентов. По поводу остального, лучше почитать официальный туториал и документацию. Там можно найти множество лучших практик. А за примерами реальных приложений, уже искать тематические статьи и репозитории на github.
Автор статьи, перевод которой мы публикуем, считает, что, к несчастью, в большинстве из существующих руководств по React не уделяется должного внимания ценным практическим приёмам разработки.
В этой статье их тоже нет. Лучше уж официальный туториал почитать.
Автор делится своими соображениями по поводу функциональных компонентов, но ни слова не написал о преимуществах компонентов классов.
Статья из разряда вредных. Я бы не рекомендовал новичкам опираться на советы автора по поводу функциональных компонентов. По поводу остального, лучше почитать официальный туториал и документацию. Там можно найти множество лучших практик. А за примерами реальных приложений, уже искать тематические статьи и репозитории на github.
Я только начал изучать реакт (изучил код крестики-нолики с офсайта и посмотрел несколько часов различных видосов на ютубе) — эта статья — лучшее что я вообще видел. Спасибо.
Еще бы такое про деплой — как встроить реакт-приложение в уже существующий проект.
Еще бы такое про деплой — как встроить реакт-приложение в уже существующий проект.
Мы сейчас переводим серию обучающих статей про реакт. Вот первая статья из серии.
Sign up to leave a comment.
React.js: понятное руководство для начинающих