React предоставляет разработчикам множество методов и «хуков», которые вызываются во время жизненного цикла компонента, они позволяют нам обновлять UI и состояние приложения. Когда необходимо использовать каждый из них, что необходимо делать и в каких методах, а от чего лучше отказаться, является ключевым моментом к пониманию как работать с React.
Читать полностью »
Рубрика «ReactJS» - 34
Понимание жизненного цикла React-компонента
2018-05-08 в 8:09, admin, рубрики: javascript, react.js, ReactJS, Разработка веб-сайтовАнимации в мире состояний
2018-05-04 в 13:35, admin, рубрики: holyjs, javascript, ReactJS, анимация, Блог компании JUG.ru Group, ТактаровМногие уже научились строить чистые интерфейсы и писать «undo-redo» в несколько строчек. Но как быть с анимациями? Часто их обходят стороной, и они не всегда вписываются в подход (state) ↦ DOM. Есть отличные решения вроде React Motion, но что если вам нужно делать сложные анимации или работать с Canvas, используя физический движок?
В нашем тексте рассказывается, как работать с анимациям в React-приложениях, и сравнивается несколько подходов (D3, React-Motion, «грязные компоненты»). А также о том, как «запускать» анимации в Redux-приложениях. Материал основан на расшифровке доклада Алексея Тактарова с нашей декабрьской конференции HolyJS 2017 Moscow. Прилагаем заодно видеозапись этого доклада:
Осторожно, трафик: под катом много картинок и гифок (сами понимаете, материал про анимации).
Читать полностью »
Как подружить React и D3
2018-05-03 в 8:24, admin, рубрики: D3, javascript, React, ReactJS, визуализация данных, интерактивная визуализацияD3 одна из наиболее популярных javascript-библиотек для создания динамических и интерактивных визуализаций данных. Сегодня ее используют сотни тысяч сайтов и web-приложений.
В интернете огромное количество примеров – от банальных линейных графиков до динамически обновляющихся диаграмм Вороного – созданных с помощью этой библиотеки. Кажется, что можно найти готовый код для любой самой причудливой визуализации и лишь немного модифицировать его «под себя».
Однако, интеграция D3 в web-приложение, построенное на React, на практике оказывается не самой простой задачей.
Формы должны быть простыми и декларативными
2018-04-27 в 15:27, admin, рубрики: javascript, React, ReactJS, TypeScript
Многие вставали перед выбором той или иной библиотеки для работы с формами в ReactJS. Когда я выбирал подходящую мне, разные библиотеки казались идеальными НО: форма на конфигах или колбеки в onSubmit эвенте, или асинхронный submit. Почему формы для реакта не соответствуют принципам реакта, почему они выглядят как что-то особенное? Если эти вопросы приходили вам в голову, или вы любите формы, приглашаю к прочтению статьи.
Читать полностью »
9 советов по улучшению качества кода React-приложений
2018-04-20 в 11:09, admin, рубрики: javascript, React, ReactJS, Блог компании RUVDS.com, разработка, Разработка веб-сайтовБиблиотека React значительно облегчает жизнь разработчиков, которым приходится создавать сложные пользовательские интерфейсы. Программисту достаточно подготовить простые описания графических представлений для состояний приложения, а React, при изменении данных, будет эффективно обновлять и перерисовывать только те компоненты, на которые повлияли эти изменения. Однако, для того, чтобы создавать качественные проекты на React, программисту нужно приложить усилия, направленные на освоение этой библиотеки и вспомогательных средств разработки.
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться с аудиторией React-разработчиков девятью полезными советами, направленными на повышение качества кода. Эти советы затрагивают довольно широкий диапазон тем — от инструментальных средств до стиля программирования.
Читать полностью »
Приглашаем на воркшоп по React Native от разработчика GeekBrains
2018-04-18 в 15:37, admin, рубрики: geekbrains, mail.ru group, react native, ReactJS, Блог компании Mail.Ru Group
Всем привет! Друзья, 20 апреля приглашаем вас в московский офис Mail.Ru Group. Разработчик GeekBrains Даниил Скрипник расскажет о своем опыте работы с React Native, его особенностях, а также научит участников писать кроссплатформенное приложение-мессенджер. Программа и регистрация — под катом.
Бешеные псы: Angular 2 vs React
2018-04-17 в 8:02, admin, рубрики: angular, angular2, javascript, React, ReactJS, Блог компании Конференции Олега Бунина (Онтико)Встречайте, противостояние двух фреймворков: Angular и React в формате поединка на примере конкретного простого приложения. За Angular выступает Евгений Гусев (@bunopus), за React — Илья Таратухин (@ilfa). Чтобы сделать честные выводы, они сначала поменялись технологиями и попробовали развернуть базовый проект. Старт на React породил 112 проблем, а вот с Angular дело обстояло гораздо проще, потому что это идеальное приложение для человека, который не особенно работал с фронтендом. Но, конечно, это было только начало, дальше пошел настоящий спор, все этапы которого под катом
getDerivedStateFromState – или как сделать из простой проблемы сложную
2018-04-16 в 1:17, admin, рубрики: 16.3, getDerivedStateFromProps, javascript, memoize, React, ReactJSЯ люблю Реакт. Люблю за то, как он работает. За то, что он делает вещи «правильно». HOC, Composition, RenderProps, Stateless, Stateful – миллион патернов и антипатернов которые помогают меньше косячить.
И вот совсем недавно React принес нам очередной подарок. Очередную возможность косячить меньше — getDeviredStateFromProps.
Технически — имея статический мапинг из пропсов в стейт логика приложения должна стать более проста, более понятна, тестируема и так далее. По факту многие люди начали топать ногами, и требовать prevProps обратно, не в силах (или без особого желания) переделать логику своего приложения.
В общем разверлись пучины ада. Ранее простая задача стала сложней.
Читать полностью »
Совершенствуем Redux
2018-04-15 в 17:06, admin, рубрики: javascript, javascript library, open source, React, ReactJS, redux, rematchПривет! Представляю вашему вниманию перевод статьи "Redesigning Redux" автора Shawn McKay.
Должно ли управление состоянием вызывать проблемы на сегодняшний день? Интуитивно, разработчики видят скрытую правду: управление состоянием куда сложнее, чем должно быть. В данной статье мы разберем несколько вопросов, которые вы наверняка задавали себе:
- Вам действительно необходима библиотека для управления состоянием?
- Заслужил ли Redux свою популярность? Почему или почему нет?
- Можем ли мы придумать лучшее решение? Если да, то какое?
Необходима ли библиотека для управления состоянием?
Front-end разработчик не тот, кто попросту передвигает пиксели из стороны в сторону; истинное искусство в знании где хранить состояние. Это кажется сложным только на первый взгляд.
Давайте рассмотрим возможности, которые предоставляет нам React:
Как использовать getDerivedStateFromProps в React 16.3 (ру субтитры)
2018-04-12 в 7:09, admin, рубрики: getDerivedStateFromProps, javascript, react.js, ReactJS, субтитрыВышел перевод нового видео от команды hackage.tv, в котором очень доступно рассказано об использовании методов жизненного цикла в React 16.3 и getDerivedStateFromProps в частности.