Обновить
62.44

ReactJS *

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

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

Дизайн-система не равно UI-kit

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

Дизайн-системы и UI-киты сейчас воспринимаются как равнозначные или тождественные. Но это не так! Более того, смешивать их будет чистым дилетантством, что недопустимо для современных UI/UX-дизайнеров и фронтендеров. В этой заметке я — Денис Пушкарь, оунер дизайн-системы Ростелекома — объясню почему.

Читать

React: полное руководство по повторному рендерингу

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


Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.


Что такое ререндеринг?


Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:


  • первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
  • ререндеринг — второй и последующие рендеринги компонента.

Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.

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

Заметка о Redux и Zustand

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


Привет, друзья!


На днях мне на глаза попалась статья, посвященная разработке корзины товаров на React с помощью Redux Toolkit для управления состоянием приложения и Redux Persist для хранения состояния в localStorage.


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



Если вам это интересно, прошу под кат.

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

Проблема с использованием тега img и picture в Safari

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

Данная статья описывает баг и его решения в контексте ReactJS + Server-Side Rendering, но это также актуально для всех фреймворков большой тройки так и для чистого JS.

При разработке сайта мы столкнулись с проблемой, что при использовании тега <img> на некоторых страницах Safari загружал изображение несколько раз вместо одного. Для отображения картинок мы использовали тег <img> с атрибутом srcset, что бы показывать картинки разного разрешения для экранов с высоким ppi.

Читать далее

Как сделать много форм, не сделав ни одной

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

Мы постоянно имеем дело с формами: регистрация, заполнение анкеты, составление отзыва. Первое, что нам хочется сделать как разработчикам,— максимально выделить общие компоненты, чтобы как можно меньше дублировать код. 

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

На самом деле есть другое решение.

Читать далее

Разрабатываем чат с помощью Nest, React и Postgres

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


Привет, друзья!


В данном туториале мы разработаем чат с использованием следующих технологий:


  • TypeScript — статический типизатор;
  • NestJS — сервер;
  • Socket.IO — библиотека для работы в веб-сокетами;
  • React — клиент;
  • TailwindCSS — библиотека для стилизации;
  • PostgreSQL — база данных (далее — БД);
  • PrismaORM;
  • Docker — платформа для разработки, доставки и запуска приложений в изолированной среде — контейнере.

Функционал чата будет таким:


  • фейковая регистрация пользователей:
    • хранение имен пользователей в памяти (объекте) на сервере;
    • хранение имен и идентификаторов пользователей в localStorage на клиенте;
  • регистрация подключений и отключений пользователей на сервере и передача этой информации подключенным клиентам;
  • запись, обновление и удаление сообщений из БД в реальном времени на сервере и передача этой информации клиентам.

Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

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

Использование шаблонов проектирования группы GoF в React

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

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

Читать далее

Как использовать Docker в приложениях Node.js и React

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

В этой статье поговорим о том, как разработать и запустить бэкэнд на Node.js-Express и фронтенд на React в контейнере Docker.

Читать далее

Вещи, которые полезно знать о React.js

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

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

Читать далее

Vue, React или Angular: какой стек используют в России. Проанализировал 180 сайтов

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

Благодаря лени узнал, какие фреймворки используют компании на российском рынке. Проанализировал e-comm, банки, интернет-магазины, сайты застройщиков, стриминговые сервисы, телекоммуникации и другие сферы. В конце статьи ссылка на таблицу.

Читать далее

Как создать Star Rating виджет на React.js и оптимизировать его

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

В этой статье я хочу затронуть еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.

За последние пять месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других компаний.

Вы должны уточнить требования и реализовать этот виджет в течение ~ 45–50 минут.

Читать далее

Vue здорового pragmatica. Как правильно делать выбор между React и Angular

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

Хочешь устроить очередной… кхм… спор о том, какой фреймворк лучше и прослыть хайпожором — напиши статью «фреймворк ХХХ кулл, остальных на кол». Но когда твой выбор влияет на стек всей компании, объясняться все равно приходится — с коллегами, заказчиками, подрядчиками. Чтобы не повторять сто раз одно и то же, запишу аргументы в этой статье. Так что приглашаю к обсуждению самих «пострадавших» и поехали!

Смотреть битву фреймворков

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

Создаём кастомный маркер в react-yandex-maps через iconLayout: template

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

Всем привет, не так давно ко мне в команду в ПРОФИ пришла задача реализации довольно комплексной в плане верстки и интерактивности карты, на которой бы отображались заказы, оставленные нашими клиентами. Мы решили использовать фреймворк, адаптирующий яндексовый SDK под реакт.

react-yandex-maps + доки к нему

UI маркеров почти полностью приходится настраивать по докам уже Яндекса, тк react-yandex-maps предоставляет нам только внешний интерфейс, позволяющий довольно удобно прокинуть параметры в объект маркера как пропсы.

По докам яндекса довольно просто понять, как сделать маркер с статичной картинкой вместо дефолтного пина, но как сделать полностью кастомный маркер разобраться не просто.

Читать далее

Создаем слайдер с изображением и текстом на React.js с нуля и оптимизируем

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

В этой статье я хочу затронуть задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Image Slider.

За последние 5 месяцев у меня было 15 онсайт собеседований, а также офферы от Google, Roku, Microsoft и других. (Больше информации можно прочитать в моем Telegram-канале)

Вы должны реализовать этот виджет за ~45–50 минут и рассказать об оптимизации. Эту информацию я постараюсь рассказать здесь. Основная цель состоит не в том, чтобы реализовать Image Slider с большим количеством функционала, а в том, чтобы показать, как реализовать и оптимизировать.

Читать далее

Общий синтаксис для математических выражений

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

О математическом менеджере с единым синтаксисом.

Читать далее

Добавить свой React компонент к балуну над меткой/Placemark в react-yandex-maps, используя React.createPortal

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

Добрый день. Хочу поделиться информацией о том как мне удалось пририсовать динамическую React компоненту внутрь всплывающего окна над меткой на Яндекс карте.

Читать далее

Создаем простой gradient background creator на React

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

Disclaimer: Безусловно, эта статья для начинающих кодеров на React. Опытный и не очень react-разработчик не найдет тут ничего полезного. Разве что может указать на ошибки(буду благодарен).

Построение и декомпозиция проекта

Никакой сложной архитектуры и декомпозиции не будет. Цель проекта - показать часто встречаемое применение хука useState и связка javascript кода с html элементами в одном компоненте. Всего будем использовать только три файла: App.js, App.css и Gradient.js.

Читать далее

Проектируем DataGrid на React так, чтобы сэкономить Boilerplate

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

⚛ Проектируем DataGrid на React так, чтобы сэкономить Boilerplate

Хорошо продуманная архитектура позволяет не только избежать legacy, но и отдать часть рутины менее квалифицированным кадрам. Думаю, будет уместно поделиться заметками о проектировании DataGrid, так как скорее всего вы уже сталкивались с копипастой)

Читать далее

Джентльменский набор React компонентов FullStack разработчика для управления потоком данных

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

⚛ Джентльменский набор React компонентов FullStack разработчика для управления потоком данных.

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

Читать далее