Организация react-компонентов с помощью dot-notation и почему я часто прибегаю именно к этому способу

Компонентный подход является основополагающим при создании приложений с помощью react. Компоненты — это главные строительные блоки, которые в своей композиции помогают реализовать сложные системы. В основе каждого компонента, в идеале, всегда лежит как…

Раз, два, три и готово! 3 месяца, 1 проект и новая команда

Привет, Хабр! Меня зовут Дмитрий Адмакин, руководитель отдела архитектурных решений и перспективной разработки одного из бизнес-центров в компании «БАРС Груп». Сегодня я расскажу о том, как мы создавали современную систему мониторинга по исполнению гос…

Еще один способ использовать SVG в React. На этот раз удобный

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы…

Пишем продвинутый планировщик с использованием React, Nest и NX. Часть 1: настройка проекта

Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. В серии статей мы поэтапно разработаем продвинутое приложение-планировщик. Сначала создадим и настроим монорепозиторий c помощью NX, разработаем интерфейс с помощ…

Оптимизация загрузки js бандла использующего icon pack’и

Иконки в проекте часто становятся причиной проблем разбухания размера бандла. Все из-за того что svg-иконки могут быть достаточно объемными.Если мы загружаем только те иконки, что мы реально используем то это не самый плохой вариант. Все становится нам…

[Перевод] Как обрабатывать ошибки в React

Давайте признаем, что тот, кто ищет что-то в интернете, не хочет наткнуться на нерабочую пустую страницу. Это, как минимум, путает, сбивает с толку. Сидишь и не понимаешь, что произошло и почему, это оставляет плохое впечатление о сайте. Часто лучше со…

Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера

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

Использование RTK Query вместе с Redux Toolkit [На примере Next.js + TypeScript]

Всем привет 🙂 Хотел бы здесь рассказать о использовании RTK Query + Redux Toolkit в больших проектах, а также ускорить вашу разработку и добавление новых страничек путем избавления от ненужных дублирований кода. Если ты frontend-разработчик на react, …