Обновить
19.89

ReactJS *

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

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

Создание интернет магазина на основе Evershop

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

Evershop https://evershop.io — опенсорсная платформа для создания интернет-магазинов на Node.js. Платформа включает необходимый функционал: интеграции с платежными системами (Stripe, PayPal), админ-панель для управления заказами и контентом, систему промокодов и аналитику продаж.

Официальная документация Evershop не покрывает многие практические аспекты разработки. Данная статья — практическое руководство по созданию интернет-магазина на основе Evershop, включающее:

Пошаговую настройку проекта

Создание тем и расширений

Решение типичных проблем и необходимые патчи

Описание внутренней архитектуры для разработки кастомных решений

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

Читать далее

Новости

Что сделала с моим nextjs сайтом React2Shell уязвимость

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели7.9K

Что сделала уязвимость react2shell c моим сайтом на nextjs 15, как мне удалось понять, что это именно она и что я предпринял чтобы снизить риски.

Читать далее

Вайбкодерам и Веб-разработчикам на заметку! Список сайтов с готовыми React UI-Компонентами

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели11K

Во многих случаях при разработке веб-сервисов и сайтов возникает необходимость в поиске готовых UI-компонентов — как для вдохновения, так и для ускорения работы над интерфейсом. Подобные решения будут полезны всем, кто занимается веб-дизайном и веб-разработкой.

В статье представлена подборка ресурсов с качественными и интересными UI-компонентами. Список будет дополняться по мере появления действительно достойных сайтов и сервисов.

❕ - пометка нового контента в статье.
[Статья обновлена 8 января 2026 года]

Читать далее

Баг с модульными стилями на динамически импортируемых компонентах в Next.js до 15 версии и немного о стилях в Next.js

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели8.1K

Баг с модульными стилями на динамически импортируемых компонентах в Next.js до 15 версии и немного о том, как работают стили в старых версиях Next.js.

Читать далее

Уязвимость React2Shell: что произошло и какие уроки можно извлечь

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели12K

3 декабря 2025 года критическая уязвимость в серверных компонентах React (React Server Components, RSC) потрясла сообщество веб-разработчиков. Была обнаружена уязвимость React2Shell/React4Shell (CVE-2025-55182) с оценкой CVSS 10.0, что является максимальным баллом для уязвимостей. Ошибка позволяет удаленно выполнять код (Remote Code Execution, RCE) на любом сервере, работающем с RSC. В течение нескольких часов после обнаружения уязвимости китайские государственные группы и криптомайнинговые компании начали взламывать уязвимые серверы.

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

Мы также обсудим, как защитить себя и как эта уязвимость подчеркивает важнейшие принципы безопасности.

Читать далее

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

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели12K

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

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

Читать далее

Как я превратил скрипты локализации в npm-библиотеку

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели6K

В прошлой статье я показал как скриптами перевести 10 000 строк на 3 языка. Скрипты оказались полезными - решил оформить в npm-библиотеку.
Теперь вместо копирования 4 файлов: npx i18next-toolkit update - и готово.

Читать далее

RSC Explorer: что на самом деле летит по сети в React Server Components

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели7.3K

Команда JavaScript for Devs подготовила перевод статьи о том, как на самом деле работают React Server Components. Автор разбирает RSC на уровне протокола: что именно стримится с сервера, как JSX путешествует по сети, почему состояние не ломается при обновлениях и зачем React вообще понадобился такой странный формат.

Читать далее

Практическая оптимизация React: ререндеры, Context, списки, INP и code splitting

Уровень сложностиПростой
Время на прочтение15 мин
Охват и читатели9.2K


Оптимизация в React почти всегда сводится к двум факторам: объёму работы, которую выполняет JavaScript, и частоте (а также «стоимости») перерисовок компонентов. Сам React работает достаточно быстро, но в крупных интерфейсах даже небольшие архитектурные промахи и на первый взгляд безобидные ререндеры начинают заметно бить по производительности.

В данной статье мы расскажем про ключевые подходы к оптимизации React-приложений: как уменьшить количество лишних ререндеров, сократить объём вычислений при вводе и скролле и снизить нагрузку стартового JavaScript.

Читать далее

Тренды в ИТ: 2026

Уровень сложностиПростой
Время на прочтение13 мин
Охват и читатели11K

Тренды в ИТ — это не про красивые слова и не про вечные «угрозы» о том, что нас вот-вот заменит ИИ и пора срочно выбирать другую профессию.

Тренды — это про то, как изменится работа с архитектурой и безопасностью в ближайшие годы, как трансформируются подходы к разработке и само мышление инженеров.тМы попросили экспертов ГК «Юзтех» поделиться своим взглядом на ИТ-тренды 2026 года.

3… 2… 1 — поехали. Ждём горячее обсуждение в комментариях.

Читать далее

Module Federation на примере фишинга

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели5.7K

Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях.

Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?"

Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?

Читать далее

shadcn-glass-ui: Glassmorphism поверх shadcn/ui без миграции

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели9.6K

Привет, Хабр! Представляю shadcn-glass-ui — библиотеку React-компонентов с glassmorphism-эффектами, которая работает поверх существующих shadcn/ui проектов без миграции.

Читать далее

Внедрение архитектуры: от хаоса к порядку

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

Всем привет! Меня зовут Анатолий, я представляю команду Front-End разработки компании DD Planet.

В этой статье расскажу о том, как наш проект завершил этап разработки и трансформировался в стабильный рабочий продукт.

Читать далее

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

Как я автоматизировал перевод 10 000 строк на 3 языка за один день

Уровень сложностиСредний
Время на прочтение23 мин
Охват и читатели7.5K

Привет, хабр! В проекте 8000+ TypeScript файлов, весь текст захардкожен на русском. Бизнес хочет английский и казахский. Руками - это неделя копипасты. Решил написать скрипты на Babel AST. Результат: 9,823 ключа перевода, 39,086 вызовов t() в коде, 5 минут работы. Под катом 4 скрипта с исходниками, которые можно адаптировать под свой проект.

Читать далее

1000 и 1 способ сломать DevEx React — или почему я выбираю Svelte

Уровень сложностиСредний
Время на прочтение15 мин
Охват и читатели10K

React — самый популярный фреймворк среди фронтенд‑разработчиков. Его подходы к разработке приложений часто воспринимаются как единственные правильные. Но что, если такие «стандарты» — это не необходимость, а вредная привычка, ломающая Developer Experience?

В статье разберем типичные проблемы Developer Experience в React: избыточный бойлерплейт, сложность управления состоянием и неочевидные оптимизации производительности. Покажем, как эти же задачи решаются в Svelte и обсудим, как смена фреймворка может упростить разработку.

Статья будет полезна разработчикам, которые хотят расширить свой кругозор и критически переосмыслить привычные подходы к фронтенд‑разработке.

Читать далее

Бесплатные и платные хостинги для сайтов на Next, React и JAMStack

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

Сегодня я рассмотрю несколько специализированных сервисов для хостинга фронта, среди которых не будет однотипных VPS. Только узкоспециализированные решения для хостинга сайтов.

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

Читать далее

Мой справочник по Feature-Sliced Design

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели7.9K

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Так как при использовании Feature-Sliced Design (FSD) возникает много вопросов и разные люди понимают её по-разному, я решил написать статью-справочник, раскрывающий некоторые подробности методологии. В этой статье я продолжаю использовать те же принципы и часть терминологии, что и в предыдущей.

Здесь я, в основном, описываю структурирование по правилам методологии. А в следующей статье, напротив, рассмотрю, как можно улучшить структуру проекта, намеренно нарушая правила FSD. Заранее предупрежу, что правила методологии носят рекомендательный, а не обязательный характер. Их назначение — задать направление структурирования, а дальше принимать решения нужно в зависимости от конкретного проекта и ситуации в нём. Строгое же следование правилам может привести к бо̒льшим проблем, чем их нарушение.

Если заметите ошибки — пишите в комментариях!

Читать далее

Увольте своих программистов. Или спросите их…

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

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

В этом и есть суть современной разработки: бесконечный ремонт, замаскированный под «инновации».

Читать далее

Анимированный UI: как улучшить взаимодействие с пользователем

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели5.3K

Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт.

В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя.

Когда команда проектирует систему анимаций, важно фиксировать принципы в дизайн-системе. Это помогает избежать хаоса и гарантирует согласованность между продуктами. Хорошая практика — описывать длительность, кривые ускорения и паттерны движения как переменные, чтобы и дизайнеры, и разработчики говорили на одном языке. Например, motion-tokens, где заданы типовые параметры переходов: fast-out-slow-in, linear-out-slow-in и т.д.

На зрелом уровне анимация становится не надстройкой, а частью архитектуры интерфейса. Она помогает продукту чувствоваться цельным, обеспечивает предсказуемость и ритм, а главное — создаёт ощущение «живого» цифрового опыта. Привет, я Максим, frontend-разработчик в компании SimbirSoft, в этой статье расскажу, как сделать полезный для пользователя UI.

Читать далее

Как мы за два месяца построили платформу для клонирования голоса: 12 проблем, mass-рефакторинги в 3 ночи и mass-фейлы

Уровень сложностиСредний
Время на прочтение19 мин
Охват и читатели6.6K

Привет, Хабр.

Меня зовут Роман, я основатель Somazone — платформы для сохранения голосовой памяти о близких людях. Пользователь загружает аудиозаписи, мы клонируем голос и создаём AI-агента, с которым можно общаться.

Звучит просто, да?

Два месяца без выходных. Рефакторинги в три часа ночи, когда глаза уже не фокусируются, но ты точно знаешь, что если не починишь сейчас — утром будет хуже. Прод падает в субботу вечером, когда ты наконец-то решил поужинать с семьёй. Баги, которые воспроизводятся только на проде и только у одного пользователя из Владивостока (почему Владивосток? мы так и не поняли). WebSocket-соединения, которые умирают по непонятным причинам. FFmpeg, который выжирает всю память на сервере и роняет всё вокруг.

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

Читать далее
1
23 ...

Вклад авторов