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

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

Еще один способ использовать 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-иконки могут быть достаточно объемными.Если мы загружаем только те иконки, что мы реально используем то это не самый плохой вариант. Все становится нам…

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

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

[Перевод] Как создать редактор кода для 40+ языков с помощью React

Подробностями разработки онлайн-платформы выполнения и компиляции кода более чем на 40 языках делимся к старту курса по Frontend-разработке. Автор этого материала — основатель TailwindMasterKit. Читать далее…

React hooks, как не выстрелить себе в ноги. Часть 3.1: мемоизация, memo

Статья про мемоизацию оказалась объёмной и включает в себя разбор hoc memo, хуки useMemo и useCallback, затрагивает тему useRef. Было принято решение разбить статью на 2 части, в первой части разберем когда нужно и когда ненужно использовать memo, како…

Cлоёная архитектура или ООП в современном React / Mobx приложении

⚛ О применении слоеной архитектуры в современном React-Mobx приложенииВ данной статье я привожу пример использования композиции сервисов через инъекцию зависимостей в React приложении. Это позволяет сочетать проверенный временем подход и проработанные …