Обновить
64K+

ReactJS *

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

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

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

Время на прочтение1 мин
Охват и читатели4.3K

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

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

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

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

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

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

Как сделать конфигурационный файл роутов в React Router 4 (субтитры)

Время на прочтение1 мин
Охват и читатели7.2K

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


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

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


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

Понимание жизненного цикла React-компонента

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

Анимации в мире состояний

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

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


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

Как подружить React и D3

Время на прочтение8 мин
Охват и читатели26K

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


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


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


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

Формы должны быть простыми и декларативными

Время на прочтение4 мин
Охват и читатели10K


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

React HoC в TypeScript. Типизация без боли

Время на прочтение6 мин
Охват и читатели39K


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

9 советов по улучшению качества кода React-приложений

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

image

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

Приглашаем на воркшоп по React Native от разработчика GeekBrains

Время на прочтение2 мин
Охват и читатели3K


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

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

Бешеные псы: Angular 2 vs React

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


Оптимизируем (debounce) срабатывание событий в React

Время на прочтение1 мин
Охват и читатели8.4K

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


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

getDerivedStateFromState – или как сделать из простой проблемы сложную

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

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

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

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


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

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

Совершенствуем Redux

Время на прочтение5 мин
Охват и читатели29K
Привет, Хабр! Представляю вашему вниманию перевод статьи "Redesigning Redux" автора Shawn McKay.

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

  • Вам действительно необходима библиотека для управления состоянием?
  • Заслужил ли Redux свою популярность? Почему или почему нет?
  • Можем ли мы придумать лучшее решение? Если да, то какое?

Необходима ли библиотека для управления состоянием?


Front-end разработчик не тот, кто попросту передвигает пиксели из стороны в сторону; истинное искусство в знании где хранить состояние. Это кажется сложным только на первый взгляд.

Давайте рассмотрим возможности, которые предоставляет нам React:

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

Как использовать getDerivedStateFromProps в React 16.3 (ру субтитры)

Время на прочтение1 мин
Охват и читатели17K

Вышел перевод нового видео от команды hackage.tv, в котором очень доступно рассказано об использовании методов жизненного цикла в React 16.3 и getDerivedStateFromProps в частности.


Continuous Integration для новичков

Время на прочтение8 мин
Охват и читатели151K

Что такое CI


Continuous Integration — это практика разработки программного обеспечения, которая заключается в слиянии рабочих копий в общую основную ветвь разработки несколько раз в день и выполнении частых автоматизированных сборок проекта для скорейшего выявления потенциальных дефектов и решения интеграционных проблем. В обычном проекте, где над разными частями системы разработчики трудятся независимо, стадия интеграции является заключительной. Она может непредсказуемо задержать окончание работ. Переход к непрерывной интеграции позволяет снизить трудоёмкость интеграции и сделать её более предсказуемой за счет раннего обнаружения и устранения ошибок и противоречий. Основным преимуществом является сокращение стоимости исправления дефекта, за счёт раннего его выявления.


Если вы не знаете как настроить CI в своем проекте, я приглашаю вас "под кат"

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

Разработка игры на React + SVG. Часть 3

Время на прочтение29 мин
Охват и читатели12K

TL;DR: в этих сериях вы узнаете, как заставить React и Redux управлять SVG элементами для создания игры. Полученные в этой серии знания позволят вам создавать анимацию не только для игр. Вы можете найти окончательный вариант исходного кода, разработанного в этой части, на GitHub


(третья часть заключительная. В ней помимо завершения разработки непосредственно игры, рассмотрена авторизация с помощью Auth0 и простой realtime-сервер — прим.переводчика)


image

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

Вышел React v.16.3.0

Время на прочтение5 мин
Охват и читатели18K

Несколько дней назад, мы написали пост о приближающихся изменениях в наших lifecycle-методах, где также затронули стратегию постепенной миграции (обновления). В React 16.3.0 мы добавили несколько новых lifecycle-методов для помощи в этой миграции. Мы также предоставили новое API для давно ожидаемых новшеств: официальное context API, ref forwarding API и ergonomic ref API.

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

Keys in React. Готовим правильно

Время на прочтение15 мин
Охват и читатели82K

Сегодня поговорим об атрибуте key в React. Часто разработчики, которые только начинают использовать React, не придают большого значения атрибуту key. А зря…


image
Что говорит уточка, когда узнала, что ты не используешь key


Чтобы представить работу ключей полностью и с различными кейсами, рассмотрим план:


  1. Reconciliation
  2. Реиспользование ключей и нормализация
  3. Использование key при рендере одного элемента
  4. Работа с ключами при передаче компоненту children

Wesbos  рассказывает как использовать новое React Context API (субтитры)

Время на прочтение1 мин
Охват и читатели3.5K

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


image

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