Все потоки
Поиск
Написать публикацию
Обновить
29.08

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

CSS-in-JS — мифы и реальность (на примере styled-components)

Время на прочтение8 мин
Количество просмотров65K

CSS-in-JS, будучи не совсем новой технологией и реализованной во множестве библиотек, до сих пор вызывает сомнения и споры в целесообразности ее использования. Свои точки над «i» в спорах о CSS-in-JS в общем, и о styled-components в частности, расставил еще год назад, ( 27 Apr 2017 ), и Gajus Kuizinas, автор react-css-modules и babel-plugin-react-css-modules, во все еще, на мой взгляд, актуальной публикации «Прекратите использовать CSS-in-JavaScript в веб-разработках».
Ниже предлагается слегка сокращенный ее перевод с некоторыми добавлениями и выводами:

Читать дальше →

Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»

Время на прочтение7 мин
Количество просмотров16K
Это небольшая ответная статья на публикацию «Сравнение JS-фреймворков: React, Vue и Hyperapp». Вообще я не большой фанат подобных сравнений. Однако раз уж речь зашла о таком маргинальном фреймворке, как Hyperapp, в сравнении с мастодонтами, типа React и Vue, я подумал, почему бы не рассмотреть все те же примеры на Svelte. Так сказать, для полноты картины. Тем более, это займет буквально 5 минут. Поехали!

image
Читать дальше →

Сравнение JS-фреймворков: React, Vue и Hyperapp

Время на прочтение13 мин
Количество просмотров21K
Автор материала, перевод которого мы сегодня публикуем, полагает, что Hyperapp — это заслуживающая внимания альтернатива таким веб-фреймворкам, как React или Vue. Он говорит, что причиной такого утверждения стало то, что он выяснил, что Hyperapp легче в освоении, чем эти два фреймворка. Его идея подверглась критике, так как кажется, что основана она исключительно на его мнении, а такой подход попросту не даёт другим фреймворкам возможности показать их сильные стороны. Эта статья направлена на объективный анализ Hyperapp, React и Vue, проведённый на основе простых примеров, демонстрирующих их возможности, и на основе результатов их испытаний.


Читать дальше →

Опыт Rambler Group: как мы начали полностью контролировать формирование и поведение фронтовых React компонентов

Время на прочтение13 мин
Количество просмотров9.5K

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

На наш взгляд нам удалось реализовать неплохой пример сбалансированного по сложности и профиту решения, который мы успешно используем в production на основе Symfony и React.
добро пожаловать под кат

Знакомьтесь: «все и сразу», React Boilerplate от Maximilian Stoiber v3.6.0

Время на прочтение5 мин
Количество просмотров13K
Сборка react-boilerplate совсем недавно, 26.06.2018, была обновлена до версии 3.6.0. Этой сборке уже более трех лет, но, заметно выделяясь на фоне множества других (более 18 тыс. Stars GitHub), она практически никак не была замечена на Хабре. В чем же ее особенность? Если кратко — сборка предлагает разработчику «все и сразу»!
Читать дальше →

Самые распространенные ошибки в вашем React коде, которые вы (возможно) делаете

Время на прочтение5 мин
Количество просмотров103K


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


Весь код написан в ES6 стиле, поэтому, что бы повторить его вам нужно использовать Babel в вашем проекте (а еще есть такие кто его не использует?).


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


Если вам интересно, то добро пожаловать под кат.

Читать дальше →

Как организовать общее состояние в react-приложениях без использования библиотек (и зачем нужен mobx)

Время на прочтение10 мин
Количество просмотров11K

Cразу небольшой спойлер — организация состояния в mobx ничем не отличается от организации общего состояния без использования mobx на чистом реакте. Ответ на закономерный вопрос зачем тогда собственно этот mobx нужен вы найдете в конце статьи а пока статья будет посвящена вопросу организации состояния в чистом в react-приложении без каких-либо внешних библиотек.




Реакт предоставляет способ хранить и обновлять состояние компонентов используя свойство state на инстансе компонента класса и метод setState. Но тем не менее среди реакт сообщества используются куча дополнительных библиотек и подходов для работы с состоянием (flux, redux, redux-ations, effector, mobx, cerebral куча их). Но можно ли построить достаточно большое приложение с кучей бизнес-логики c большим количеством сущностей и сложными взаимосвязями данных между компонентами используя только setState? Есть ли необходимость в дополнительных библиотеках для работы с состоянием? Давайте разберемся.
Читать дальше →

Конвертация данных GraphQL для компонента CustomTreeData из DevExtreme-Reactive

Время на прочтение5 мин
Количество просмотров1.6K
Понадобилось тут отобразить данные в виде дерева, с возможностью редактировать разные поля, удалять/добавлять строки и т.д. В процессе поиска подходящих компонентов (хотелось найти под material-ui и react) стал пробовать devextreme-reactive. Ньюанс, однако, оказался в том, что devextreme-reactive хочет данные для дерева в виде плоского массива объектов, в каждом из которых указан parent_id «родителя». А GraphQL сервер у меня отдаёт дерево в виде вложенных друг в друга объектов с массивами объектов. Пришлось делать из одного другое — возможно, кому-то пригодится. А может кто-то скажет, что я заморочился не по делу и всё это делается куда проще.

Итак, в ответ на GraphQL запрос (есть тесты, в каждом есть вопросы, для каждого опроса есть несколько вариантов ответов и мы хотим получить всё сразу):
Читать дальше →

UI framework за 5 минут

Время на прочтение6 мин
Количество просмотров22K

Некоторое время назад я задумался, почему так много UI frameworks для web? Я довольно давно в IT и не помню чтоб UI библиотеки на других платформах рождались и умирали с такой же скоростью как в WEB. Библиотеки для настольных OS, такие как: MFC, Qt, WPF, и т.д. — были монстрами, которые развивались годами и не имели большого количества альтернатив. В Web все не так — frameworks выходят чуть ли не каждую неделю, лидеры меняются — почему так происходит?


Думаю главная причина в том — что резко снизилась сложность написания UI библиотек. Да, для того чтобы написать библиотеку которой многие будут пользоваться — по прежнему требуется значительное время и экспертиза, но чтобы написать прототип — который будучи обернутый в удобный API — будет готов к использованию — требуется совсем немного времени. Если интересно как это можно сделать — читайте дальше.

Читать дальше →

Укрощение XBRL: заметки аналитика

Время на прочтение6 мин
Количество просмотров3.6K
Начиная с 2018 года российский Центробанк (как регулятор) обязал некредитные финансовые организации (НФО), т.е. все предприятия финансового сектора экономики, кроме банков, а именно страховые, пенсионные фонды, проф. участники рынка ценных бумаг, управляющие компании, отчитываться перед ним в новом формате – согласно спецификации XBRL (а не excel или xml).

В объем надзорной (статистической) отчетности входит информация об учредителях и клиентах, объектах страхования, премиях и выплатах, депозитах и инвестициях, о контрагентах и т.д. и т.п. — реально сотни тысяч фактов. В связи с этим, для облегчения бюрократизма и соблюдения точности процедуры, расскажем о проекте автоматизации формирования отчетности в XBRL одной крупной НФО, в основу которого легло решение Fujitsu XBRL.

Читать дальше →

Анонс RamblerFront& #5

Время на прочтение1 мин
Количество просмотров2.1K


28 июня на Мансарде Rambler&Co состоится пятый внешний RamblerFront& meetup, на котором наши сотрудники и друзья поделятся прикладными знаниями в области frontend-разработки.
Читать дальше →

Реактивный фронтенд. История о том, как мы снова всё переписали

Время на прочтение13 мин
Количество просмотров33K
Привет, это снова Катя из Яндекс.Денег. Продолжаю свою историю о том, как я перестала верстать и начала жить. В первой части я рассказала, как меня сюда занесло и чем занимаются наши фронтендеры. Сегодня — про фронтовый стек, откуда там React и куда делся БЭМ.

Спойлер: БЭМ пока никуда не делся ¯\_(ツ)_/¯. Погнали!



Внимание: высокая концентрация фронтенда. Много текста, картинок и кода, как обещала.
Читать дальше →

Как в React избавиться от сложности в управлении состоянием — отчёт по итогам поездки на React Amsterdam

Время на прочтение5 мин
Количество просмотров10K
В апреле посчастливилось побывать на очень крутом мероприятии — React Amsterdam. Кроме приятных организационных моментов было ещё и много интересных докладов. Они были, в основном, прикладного характера. Поскольку стек технологий в принципе устоялся, докладчики рассказывали о способах решения практических проблем, а не продвигали что-то незнакомое и революционное. Здесь я расскажу подробнее о выступлении “setState MachineМикеле Бертоли из Facebook.

Основная проблема, которой был посвящен доклад, — сложность в управлении состоянием в React.
Читать дальше →

Ближайшие события

Компоненты высшего порядка с использованием Recompose

Время на прочтение10 мин
Количество просмотров35K
HOC — слишком громкое слово для простого функционального паттерна!

Месяц назад в РайффайзенБанке прошел первый фронтенд-митап, и поскольку я всего за пару дней подготовил презентацию на тему «High order components with functional patterns using Recompose», а информацию о Recompose мельком выцепил в интернете за неделю до доклада, то не успел подготовить никакого справочного материала, и даже не написал своих контактных данных в конце презентации, что было не очень хорошо. И на вопрос: «Где мы можем увидеть ваши слайды?», я замялся и ничего не ответил, за что очень сильно извиняюсь.

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

Год, проведённый с React: выводы и рекомендации

Время на прочтение8 мин
Количество просмотров17K
Обычно начало работы с новой технологией — это не так уж и просто. Новичок попадает в бескрайнее море учебных руководств и статей. При этом за каждым из подобных материалов стоит личное мнение его автора, а каждый автор заявляет, что именно его устами глаголет истина.

С точки зрения здравого смысла понятно, что далеко не все статьи, опубликованные в интернете, способны принести реальную пользу, поэтому тем, кто пытается освоить что-то новое, приходится оценивать публикации в попытке найти ответ на вопрос о том, стоит ли тратить на них своё время.



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

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

Code-review тестового задания junior react разработчиков

Время на прочтение3 мин
Количество просмотров19K

Что это такое?


Это код-ревью решений второго тестового задания. На видео отмечены удачные решения и указаны ошибки, а так же советы по их исправлению. В данной заметке отмечены общие проблемы и даны ссылки с "отметкой времени".


выбрал реакт

Читать дальше →

React cheatsheet или парочка лайфхаков

Время на прочтение5 мин
Количество просмотров8.7K


Поделюсь несколькими практиками, которые использую при создании React-компонентов. Заинтересованных прошу под кат.
Читать дальше →

React v16.4.0: События указателей

Время на прочтение3 мин
Количество просмотров10K

Последний минорный релиз добавляет поддержку часто запрашиваемой фичи — событий указателей (pointer events)!


Также, он включает исправления для метода getDerivedStateFromProps. Полный список изменений доступен ниже.

Читать дальше →

Весенние митапы (и один летний) от Альфа-Банка

Время на прочтение1 мин
Количество просмотров4.2K

В пятницу принято не только менять пароли на критично важных штуках, но и составлять планы на следующую неделю. Или хотя бы пытаться это сделать.

Если у вас осталось свободное время – приглашаем на наши весенние митапы:

  • IBMi-MeetUp: авто-тестирование на IBMi
  • React Moscow Meetup 4
  • QAчественное общение: боли в тестировании
  • MskDotNet Meetup

Подробности под катом.
Читать дальше →

Apollo graphql client — разработка приложений на react.js без redux

Время на прочтение4 мин
Количество просмотров60K
Apollo graphql client представляет удобный лаконичный спсоб работы с данными в приложениях react. В большинстве случаев все то, что мы привыкли делать с помощью redux, гораздо проще сделать при помощи Apollo graphql client. То, о чем я хотел бы рассказать в этой статье — это что связка react + apollo client + graphql существенно (на порядок) упрощает разработку приложений react.
Читать дальше →

Вклад авторов