ReactJS *

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

Подробности под катом.

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

Когда react-router 4 только появился, многие переживали по двум поводам:

• Как вынести роуты в отдельный файл (конфиг роутов)
• Как теперь жить без onEnter хука.

В видео от Tyler McGinnis'a освещен первый вопрос.

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

Многие уже научились строить чистые интерфейсы и писать «undo-redo» в несколько строчек. Но как быть с анимациями? Часто их обходят стороной, и они не всегда вписываются в подход (state) ↦ DOM. Есть отличные решения вроде React Motion, но что если вам нужно делать сложные анимации или работать с Canvas, используя физический движок?

В нашем тексте рассказывается, как работать с анимациям в React-приложениях, и сравнивается несколько подходов (D3, React-Motion, «грязные компоненты»). А также о том, как «запускать» анимации в Redux-приложениях. Материал основан на расшифровке доклада Алексея Тактарова с нашей декабрьской конференции HolyJS 2017 Moscow. Прилагаем заодно видеозапись этого доклада:


Осторожно, трафик: под катом много картинок и гифок (сами понимаете, материал про анимации).

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

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

Однако, интеграция D3 в web-приложение, построенное на React, на практике оказывается не самой простой задачей.

Многие вставали перед выбором той или иной библиотеки для работы с формами в ReactJS. Когда я выбирал подходящую мне, разные библиотеки казались идеальными НО: форма на конфигах или колбеки в onSubmit эвенте, или асинхронный submit. Почему формы для реакта не соответствуют принципам реакта, почему они выглядят как что-то особенное? Если эти вопросы приходили вам в голову, или вы любите формы, приглашаю к прочтению статьи.

Много раз, когда шла речь о переводе React-проектов на TypeScript, я часто слышал, что самую сильную боль вызывает создание HoC’ов (Higher-Order Components — компоненты-обертки). Сегодня я покажу приём, как делать это безболезненно и довольно легко. Данный приём будет полезен не только для проектов TS, но также и для проектов ES6+.

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



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

Всем привет! Друзья, 20 апреля приглашаем вас в московский офис Mail.Ru Group. Разработчик GeekBrains Даниил Скрипник расскажет о своем опыте работы с React Native, его особенностях, а также научит участников писать кроссплатформенное приложение-мессенджер. Программа и регистрация — под катом.

Встречайте, противостояние двух фреймворков: Angular и React в формате поединка на примере конкретного простого приложения. За Angular выступает Евгений Гусев (@bunopus), за React — Илья Таратухин (@ilfa). Чтобы сделать честные выводы, они сначала поменялись технологиями и попробовали развернуть базовый проект. Старт на React породил множество проблем, а вот с Angular дело обстояло гораздо проще, потому что это идеальное приложение для человека, который не особенно работал с фронтендом. Но, конечно, это было только начало, дальше пошел настоящий спор, все этапы которого под катом

Вышел перевод видео с канала Manorism. В этот раз ничего нового. Наоборот, вспоминаем "старое" и оптимизируем частоту срабатывания событий с помощью "дебаунс" (debounce).

Я люблю Реакт. Люблю за то, как он работает. За то, что он делает вещи «правильно». HOC, Composition, RenderProps, Stateless, Stateful – миллион патернов и антипатернов которые помогают меньше косячить.

И вот совсем недавно React принес нам очередной подарок. Очередную возможность косячить меньше — getDeviredStateFromProps.

Технически — имея статический мапинг из пропсов в стейт логика приложения должна стать более проста, более понятна, тестируема и так далее. По факту многие люди начали топать ногами, и требовать prevProps обратно, не в силах (или без особого желания) переделать логику своего приложения.

В общем разверлись пучины ада. Ранее простая задача стала сложней.