Обновить
64K+

ReactJS *

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

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

Глупомер на TypeScript и React: 12 вопросов для проверки команды

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

Как измерить человеческую глупость? На первый взгляд, кажется, легко: измерить IQ, делов то! Но не все так однозначно. Как Вы сподвигнете человека на 2 часа интенсивных умственных нагрузок (а столько времени занимает прохождение теста)? Но даже замерив IQ, можно ли однозначно по нем делать вывод о глупости человека? К примеру, если замерить IQ Дон Кихоту и Санчо Пансо, у кого он окажется выше? А кто из них более глупый? В данной статье не только предлагается операциональное определение глупости, но и готовый бесплатный open source инструмент для ее измерения в течении 3-х минут. Поехали!

Читать далее

Новости

Как я организовал проект на Next.js

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

В этой статье я расскажу, как организовал свой проект на Next.js. На примере реального приложения рассмотрены структура проекта, организация маршрутизации, работа с данными через DAL, аутентификация, валидация, тестирование и другие подходы, которые я использовал в процессе разработки. Статья не претендует на универсальное руководство, а показывает один из возможных вариантов организации приложения.

Читать далее

Эмиграция в США после 30: от подработок на складе до Apple, своей школы и разработки с ИИ

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

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

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Виктором Богуцким — разработчиком, который переехал в США в 2016 году, прошёл путь от физической работы и десятков отказов до позиции в Apple и eBay, а сейчас основателем школы программирования PASV.   

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

Читать далее

Пятая кнопка за вечер. Архитектура фронтенда под контекст LLM

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

К концу второго месяца vibe coding на фронте моего пет-проекта жили пять компонентов кнопки, четыре спиннера, компонент страницы на 700 строк и шапка, которая показывала один баланс, пока модалка рядом показывала другой. LLM-агент писал всё это уверенно, быстро и с хорошим стилем кода. Фронтенд под LLM деградирует даже быстрее бэкенда — и тому есть причины: от качества обучающей выборки, где вперемешку лежат три поколения React, до самой природы JSX, где разметка, логика и состояние легально живут в одном файле.

Под катом — что в итоге сработало: Feature-Sliced Design, урезанный до трёх слоёв, как карта для агента; dependency-cruiser в роли архитектурного контракта, который нельзя нарушить; кодогенерация API-клиента из OpenAPI вместо доменной модели; за что я простил Tailwind; и честно — про самое слабое место конвейера: агент, который верстает вслепую. Это продолжение статьи про бэкенд, но читается и само по себе.

Читать далее

Агора: что случилось за три месяца после прошлой статьи. Разбор комментариев

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

В прошлый раз я рассказывал, как в 15 лет с нуля написал российскую соцсеть для учеников, учителей и студентов «Агора» — тогда было 99 пользователей, около сотни SQL-миграций и куча энтузиазма. Статья неожиданно собрала 12 тысяч просмотров и почти 40 комментариев. Часть из них были просто добрыми словами, но был и один разбор — от PyXiion — на несколько экранов, по существу, без скидок на возраст. Отвечать на него сходу я тогда не стал, но за прошедшее время большая часть замечаний либо уже была исправлена, либо стала понятнее, почему сделано именно так.

С тех пор проект вырос — не столько по пользователям (~160 человек, аудитория та же — учащиеся, педагоги, студенты), сколько по тому, что под капотом. Расскажу и про рост, и по порядку разберу, что из той критики было верным, а что — нет.

Читать далее

FSD, Clean или modular? Шесть вариантов React-магазина под четырьмя изменениями

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

Мы вынесли компактную карточку банковской карты в entities/card/ui: маска номера, баланс и статус — решение казалось очевидным.

Через два спринта в карточке появились действия «заблокировать карту» и «изменить лимит». В итоге entity начала импортировать features/block-card, features/change-card-limit и проверку прав доступа мимо public API. Когда ту же карточку понадобилось показать в выборе счёта списания, вместе с ней приехали ненужные зависимости и проверки ролей.

Пользовательских инцидентов не случилось, но исправление отняло время. В entity оставили чистый CardPreview, сценарии подключили выше, композицию дашборда перенесли в widgets/card-summary, затем заново прогнали ролевые тесты.

После этого на ревью мы стали обсуждать имя папки ближе к концу разговора. Сначала отвечали на другой вопрос:

Какие будущие изменения выбранная граница позволит оставить локальными?

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

Читать далее

Point0 — простой, как tRPC, полноценный фулстек-фреймворк

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

Хочу сравнить фреймворк Point0 и библиотеку tRPC. Делаю это, потому что квери и мутации в Point0 очень похожи по DX на tRPC, но более удобны ввиду того, что всё же Point0 это фреймворк и он может обладать возможностями, которыми библиотека не может:

Объявлять квери вместе с серверным кодом прямо в клиентских файлах, или наоборот

Автоматически гидрировать и дегидрировать квери клиент при включении SSR

В мутациях отправлять файлы автоматически превращая данные в FormData и обратно

Иметь стабильные индивидуальные урлы для квери и мутаций

Не заставлять зависать редактор кода при увеличении количества эндпоинтов

Возвращать в ответах с сервера на клиент целые серверные компоненты или интерактивные острова

Управлять внешним видом состояний загрузки на страницах и в компонентах

Кроме того, что описано в этой статье, Point0 может много чего ещё, но об этом в других статьях. Сейчас фокусируемся на сравнении с tRPC. Предполагается, что вы с tRPC более менее знакомы, но ниже я всё равно буду показывать примеры реализации на tRPC, чтобы сравнения были видимыми.

Читать далее

Redux никогда не работал в React

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

потому что нельзя просто взять redux и начать использовать в React. Необходима некая «react-redux» библиотека. А в чём тогда смысл талдычить, что «Redux works with any UI layer»?

Читать далее

Жизненный цикл API-токенов: От генерации до компрометации

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

JWT не защищает от кражи. Подпись гарантирует, что токен не подделан, но не мешает злоумышленнику использовать его, если тот оказался в чужих руках. В 2026 году утечки токенов через XSS, логи и CDN-атаки входят в тройку самых частых векторов компрометации, а медианное время обнаружения такой кражи составляет 43 дня.

В этой статье разбираем полный жизненный цикл токена — от выдачи до отзыва. Сравниваем хранение в localStorageHttpOnly-куках и BFF-прослойке. Объясняем, почему Refresh Token Rotation — это must-have, а не опция, и как детектировать кражу еще до того, как злоумышленник успеет навредить.

Читать далее

Детектор копипасты для TypeScript, Vue, Svelte и Angular

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

Копипаста редко выглядит как копипаста. После переименования переменных, строк и чисел два одинаковых блока спокойно проходят ревью как разный код. Я написал clone-alert, чтобы находить такие совпадения в TypeScript, JavaScript и шаблонах Vue, Svelte и Angular.

Читать далее

Локализация уже скомпилированных React компонентов в node_modules

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

🇧🇷 🇨🇳 🇮🇳 Локализуем React не трогая код компонентов

React-компоненты из node_modules уже скомпилированы, поэтому внедрить react-i18next в них обычно невозможно без форка библиотеки. В статье показываю, как перехватить все вызовы jsx/jsxs через кастомный react/jsx-runtime и автоматически локализовать текст даже внутри уже собранных компонентов, не меняя их исходный код.

Читать далее

Овцеводческая CRM, Узбекистан и .NET 10: семь инженерных историй с граблями

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

Мы делаем QoyHunter — учётную систему для овцеводческих хозяйств Узбекистана, с витриной животных, доставкой и блогом на соседних поддоменах. С точки зрения бизнес-логики ничего экзотического: CRM как CRM. Экзотика начинается там, где эта CRM встречается с реальностью рынка.

А реальность такая: основной канал пользователей — Telegram, а не браузер; основной язык — не всегда русский (узбекский обязателен, английский — по явному выбору); часовой пояс один (Ташкент, UTC+5, без перехода на летнее время — тоже давало баги, но об этом ниже); а разработка идёт на Windows-ноутбуках без сервера БД под рукой. Из этих фактов вытекает добрая половина решений в статье. Стек: бэкенд на ASP.NET Core (.NET 10), фронт на React + Vite, админка на react-admin, всё за nginx в docker compose.

Читать далее

Как я сделал идеальную карту для GTA San Andreas в браузере при помощи моего движка

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

Это продолжение моей статьи о том, как я сделал движок совместимый с GTA San Andreas для запуска в браузере, рекомендую сначала прочитать:

https://habr.com/ru/articles/1051828/

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

Читать далее

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

DS MCP: как дать AI-агенту знание о вашей дизайн-системе

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

Статья про то, как AI-агенту дали знание о дизайн-системе, чтобы он перестал придумывать несуществующие компоненты и начал верстать из того, что реально есть в проекте.

Закрываем очень практичную боль: агент видит макет, умеет писать код, но не понимает, какими компонентами из вашего проекта этот экран нужно собирать.

Внутри: Figma MCP, свой DS MCP, React, Jetpack Compose и SwiftUI, поиск по компонентам, ChromaDB, RAG, embeddings, препроцессор для описания дизайн-системы, грабли с чтением файлов, шумом в контексте, устаревающим SKILL.md и честное сравнение подходов по tool calls, токенам и результату.

Заходите, читайте и рассказывайте, как вы решаете эту проблему у себя ❤️

Читать далее

Нужен ли здесь useEffect? «хороший» React-вариант и мол-вариант здесь один и тот же код

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

На Хабре вышла хорошая статья «Нужен ли здесь useEffect?»: 12 сценариев из code review, в которых эффект либо не нужен, либо нужен не такой.

Я пишу на $mol и читал её как этнограф. в моле нет API эффектов. Во что превратятся все 12 демо, если их переписать ? Посмотрите ?. Сделал страницу с демками.

Спойлер: чек-лист из 12 строк в конце схлопнулся в …

Узнать про useEffect в $mol

Angular против React: зарплаты, кризис в IT и почему корпорации остаются на Angular

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

Angular часто воспринимают как тяжёлый корпоративный фреймворк «из прошлого»: сложный вход, много правил, меньше хайпа, чем у React. Но за последние годы фреймворк заметно изменился: появились сигналы, обновился SSR, стало проще начинать, а экосистема перестала быть закрытым «котлом» только для энтерпрайза.

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Олегом Щёголевым — frontend-разработчиком, преподавателем, ментором и специалистом по Angular автором Telegram-канала «SUMMON_THE_CODER».    

В этом выпуске мы разбираем путь в профессию, реальные проекты, ситуацию на рынке труда, зарплаты, использование нейросетей в разработке, статус GDE, современный Angular, сигналы, SSR, CLI, директивы, модули и главный вопрос: почему React популярнее, но крупные компании всё равно продолжают выбирать Angular.

Читать далее

Точно ли здесь нужен `any`? 13 сценариев из TypeScript-код-ревью — от `unknown` до границы приложения

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

Красная волнистая линия под строкой раздражает, и самый быстрый способ её убрать — дописать any, as или !. Компилятор замолкает, сборка зеленеет, PR уходит дальше. Вот только ошибка никуда не делась: она переехала из редактора в рантайм, поближе к пользователю.

За годы ревью — чужого кода и своего — я привык читать эти три символа как сигнальную лампочку. Они почти всегда отмечают место, где тип не описан, а выключен. Иногда это осознанный и оправданный выбор. Гораздо чаще — способ не разбираться прямо сейчас, счёт за который приходит позже и другому человеку.

Поэтому на code review я задаю не привычное «как затипизировать, чтобы TypeScript замолчал», а обратный вопрос:

Что именно я здесь отключаю — и правда ли без этого нельзя?

Веду frontend-команду, много времени провожу в чужих диффах, и про any, as и ! у нас постепенно сложился небольшой свод договорённостей для review. Из него и выросла эта статья: 13 сценариев, которые складываются в один короткий фильтр. Для каждого есть пара «плохо → хорошо» и рабочий пример на TypeScript 6 — всё можно потрогать в playground (он написан на React, но сами приёмы относятся к TypeScript в целом). Разберём any и unknown, сужение и type guards, satisfies, as const, оператор ! и валидацию данных на границе.

Главная мысль:

Типы — это проверяемые обещания о данных. any, а также необоснованные as T и !, позволяют компилятору принять такое обещание без доказательства. Если тип неизвестен — это unknown и сужение; если известен, но невиден компилятору — это guard, валидация или контролируемый инвариант, а не слепое утверждение.

Читать далее

Как использовать useMemo и useCallback?(спойлер) большинство из них можно удалить

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

Каково назначение хуков useMemo и useCallback? Какие ошибки и лучшие практики следует при их использовании, и почему удаление большинства из них может быть хорошей идеей?

Здесь вы найдете ответы на эти вопросы или можете поделиться своей историей «переоптимизации».

Читать далее

Нужен ли здесь `useEffect`? 12 сценариев из React-код-ревью — от производного состояния до React 19.2

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

На code review я регулярно встречаю один и тот же вопрос, только записанный разным кодом: «Как правильно синхронизировать эти значения через useEffect

Со временем я понял, что чаще полезнее спросить иначе: а эффект здесь вообще нужен?

В статье разбираю 12 типичных сценариев из React-код-ревью: производное состояние, события, цепочки эффектов, внешний store, useEffectEvent, загрузку данных и современные подходы React 19.2. Для каждого случая — пример «плохо → хорошо» и практический фильтр, который помогает выбрать между рендером, обработчиком события, Action, useEffect или query-библиотекой.

Читать далее

Оптимизация next.js monorepo приложения

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

Как я ускорил работу с тулингом на своем проекте в среднем более чем в 10 раз, заменив JS-инструменты на нативные.

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