Обновить
37.88

ReactJS *

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

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

Способ стабильного создания больших приложений с помощью ИИ

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

В этой статье я детально опишу свой опыт создания «большого» (по меркам приложений которые можно получить из ИИ) с помощью ИИ.

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

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

Читать далее

Матрица компетенций: Как IT-компании оценивают ваш грейд (и почему ваши hard skills — это только половина дела)

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

Привет, Хабр. Давайте о больном. У вас 5+ лет опыта, вы уверенно решаете сложные задачи, менторите джунов и знаете свой стек досконально. Вы чувствуете себя сеньором. Но раз за разом на собеседованиях вам либо предлагают позицию Middle+, либо дают оффер с зарплатой, которая явно не дотягивает до сеньорской.

В чем проблема?

Проблема в том, что вы пытаетесь измерить свой уровень одномерной линейкой «знания технологий». А в голове у адекватного нанимающего менеджера — многомерная система координат.

Как бывший рекрутер, я видел десятки таких «матриц компетенций» в разных IT‑компаниях. И сейчас я вскрою этот черный ящик и покажу, по каким на самом деле осям вас оценивают.

Читать далее

Пилим стартап, часть 2.5. Мини-гайд по Claude Code, причесываем UI

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

Да, я убрал из заголовка "за выходные", потому что проект чутка растянулся. Но идёт весело! У него и веб-версия теперь есть: https://mini.qyp.ai

Напомню: я давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex).

Идея простая: десктопное приложение, дешборд на весь экран, справа интерфейс чата. Просим ИИ вывести на дешборд какую-то информацию в духе "сколько новых юзеров за последнюю неделю" - ИИ пишет код виджета, и размещает его на дешборде. Под капотом - runtime компиляция React.js + sql-коннекторы.
Полный open-source, весь код в репозитории: https://github.com/ElKornacio/qyp-mini

Читать далее

AI-генератор сайтов на ChatGPT и Next.js 15: Создаем SEO-оптимизированные страницы с нуля (аналог v0)

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

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

На практике это сводится к простому циклу: вы отправляете промпт в ChatGPT, получаете в ответ конфигурационный файл, загружаете его в приложение и одной командой сборки создаёте готовые, стилизованные страницы. Всё это уже настроено в стартовом шаблоне, включая авторизацию и многоязычный AI-чат.

Или используйте полную автоматизацию так же как в v0, но с прицелом под крупные корпоративные интеграции.

Читать далее

CreateObservableStore: реактивный store с гранулярными подписками и идеальной интеграцией с React

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

В статье рассматривается библиотека @qtpy/state-management-observable и её React-обёртка @qtpy/state-management-react, объединяющая реактивность, строгую типизацию и удобный API. Если вы ищете альтернативу Redux, Zustand или Valtio с поддержкой undo/redo, granular-подписок, middleware, асинхронных обновлений и прозрачной работы с массивами через Proxy — createObservableStore может стать хорошим выбором.

Читать далее

Организация селекторов для тестирования

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

Зачастую обычные веб-приложения не покрывают E2E тестами, однако, когда разговор заходит об административных панелях, формах биллинга и разнообразных конструкторах, то данная потребность быстро возникает.

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

🧪🧪🧪 TEST_ID="Читать далее" 🧪🧪🧪

Vibe Coding на Firebase Studio: Как я победил логистический Ад и подружился с Gemini

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

(История экономиста с неоконченной Computer Science, который нашёл себя в автоматизации логистики)

Хабр, привет! Меня зовут Александр и я обычный менеджер по работе с ключевыми клиентами в логистической компании, которая занимается в основном контейнерными перевозками из Китая в РФ (рекламы не будет).

Кратко обо мне: всегда интересовали компьютеры и программирование, но жизнь складывалась немного иначе чем хотелось. В 14 лет всей семьей уехали жить в Италию, где я закончил экономический, а также потом поехал учиться на 3 года на Computer Science в г. Пиза (да, это там, где башня падает и все никак не упадет). К сожалению, в связи с бумом ковида было принято решение возвращаться домой, да и долги по учебе не добавляли оптимизма в связи с чем, спустя год изоляции (возможно многие знают как жестили в Европе с ограничениями) я отправился на родину в Москву, где после непонятного года я смог более‑менее укрепиться в сфере международных перевозок.

Несмотря на все пертурбации, я по‑прежнему искал любыми способами оставлять в жизни место и время для программирования, Хабра и поиска интересных решений и попыток самому что‑то сделать годное. В моем небольшом арсенале есть основы С с универа и Java/Kotlin/JS, которые я использую везде куда дотягиваются руки.

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

Читать далее

Не лайком единым, или как получить от пользователей максимальный feedback?

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

Несомненно, появление концепции лайка открыло новую страницу в механизме feedback. Не только для крупных компаний, но и для мелких девчушек, которые гоняются за лайками от своих сверстников. Однако, в какой‑то момент времени, лайки стали тормозить развитие механизмов получения того самого feedback. Зачем что‑то выдумывать новое, если уже есть лайк, понятный даже макаке‑резус и регулярно повсеместно используемый? Концепция лайков противоречит количественной социологии? Да ну ее на фиг, эту социологию! Одним лайком сложно получить качественный feedback? Зато лайк это уже традиция — так еще наши прадеды делали, деды, отцы делали, и мы делать будем, и наши дети и правнуки, ну Вы поняли. В данной статье не только делается попытка поиска следующего за лайком механизма feedback. Но и приводится вместе с исходным кодом действующий компонент на React TypeScript. Если кому интересна тема поиска новых механизмов feedback, добро пожаловать под кат!

Читать далее

Wake Up Remix: Перезагрузка фреймворка для современного веба

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

На конференции React прошлым летом команда объявила, что Remix «уходит в спячку».

К тому моменту Remix v2 стал настолько тонкой обёрткой над React Router, что между проектами возникло искусственное разделение. Чтобы упростить архитектуру фреймворка, команда перенесла код сборщика и серверного рантайма из Remix непосредственно в React Router v7, объединив всё лучшее из фреймворка в так называемый “framework mode” для роутера. Также было объявлено о планах добавить ограниченную поддержку React Server Components (RSC) в React Router.

Эта работа была завершена: версия 7 была выпущена в ноябре прошлого года, а в конце мая была представлена предварительная поддержка RSC. Теперь разработчики, использовавшие Remix v1, v2 или более ранние версии React Router, могут рассчитывать на стабильную платформу с долгосрочной поддержкой.

Теперь же, пришло время заняться Remix!

Читать далее

CI/CD для чайников — разберитесь и начните наконец-то автоматизировать рутину в разработке. Часть 2. Запускаем CI

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

Список необходимых инструментов.

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

И на этом сервере, мы можем выполнять любой набор команд для автоматизации.🫡

Но самый важный момент на этом этапе – какие настройки должны быть на этом сервере? Какие программы, пакеты или библиотеки, должны быть установлены? В конце концов, какую операционную систему использовать? ⚠️

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

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

eslint . –fix

npm run build

Если попробовать перечислить, то получится следующий список

Читать далее

Каким должен быть Интернет-ресурс для умных, или возвращаясь к истокам отцов-основателей

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

Изначально интернет в современном его понимании Тимом Бёрнерс-Ли и Робертом Кайо задумывался для умных людей. Прежде всего для физиков-ядерщиков, а также для химиков, биологов и т.д. Но, к сожалению, со временем Интернет выродился в ресурсы для самых недумающих. В полном соответствии с мировым трендом на идиотократию. Сеть заполнили миллиарды постов с фото о том, кто что покушал, и кто где покакал. Я про FaceBook с Инстаграммами Вашими брюзжу. Нет, я понимаю, в мире, в котором 23% людей теоретически не в состоянии научиться читать, капиталистам глупо вкладывать деньги в ресурсы для умных - не окупятся! Лайкнуть котика может и даун, а вот вникнуть в сложные идеи Платона - мало лишь кто (на мой взгляд не более 2%). Но с другой стороны это что ж, умным людям вообще оставаться без созданных под их нужды ресурсов? Не порядок!

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

Читать далее

Мемоизация коллбэков в списках react-приложения

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

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

Давайте рассмотрим несколько типичных ошибок более подробно...

Читать далее

Топ-5 библиотек для управления состоянием React в 2025 году

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

Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки.

Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.

Читать далее

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

Большой гайд по ускорению и оптимизации сайта

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

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

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

Полетели

Найди x: React + MobX + SSR + x = Счастье

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

С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение. В статье вы узнаете, как мы решили уравнение :-)

Читать далее

6 альтернатив swiper в 2025 году

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

Уже почти два года я не писал приложения на традиционном React стэке. Решил попробовать использовать современные практики: сделал небольшой ленгдинг с формой. И получил JS файл 500 килобайт!

Мне нужен swiper для плавной анимации переключения между "нативными" окнами. Но один swiper весит 80 килобайт. В связи с этим решил провести сравнение и найти хороший аналог.

Читать далее

Опыт первого знакомства с Next.js

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

Хочу поделиться своим опытом первого знакомства с фреймворком Next.js.
Я понимаю, что потратил не очень много времени и скорее всего многие вопросы, описанные в статье уже кем-то решены. Но ценность данной статьи именно в том, что это первые впечатления.

Читать далее

Грани полиморфизма в React: паттерн asChild

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

Привет, мы продолжаем разбирать полиморфизм в React. В прошлой серии мы разобрали паттерн as — мощный, типобезопасный, но с проблемами в композиции. Сегодня разберем, как решить эту проблему с помощью паттерна asChild. Спойлер: это сделает ваш код чище, композируемее и приятнее для глаз, но придется пожертвовать поддерживаемостью.

Читать про asChild

Как сделать сайт бесконечно ленивым. Часть 3: Вендоры и кэш

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

Ранее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это важно для ленивой загрузки. А в этой статье мы расскажем о следующем:
- Как мы должны загружать вендор файлы с точки зрения правильной организации ленивой загрузки.
- Что общего между стратегиями оптимизации "ленивой загрузки" и "кэширования", и как использование одной из них влияет на другую.
- Что такое кэшируемость и как сделать наше приложение максимально кэшируемым.
- А также как правильно настраивать группы кэша в Webpack и не испортить кэшируемость.

Читать далее

ElevenLabs открыла голосового ассистента для Shopify. Внутри MCP, WebRTC и полностью открытый стек

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

ElevenLabs выложила в открытый доступ проект Eleven Shopping - голосового агента, который превращает процесс выбора товаров и оформления заказа в диалог с ИИ. В основе - стек Next.js + React + TypeScript + Tailwind CSS и подключение к Shopify Storefront API через протокол MCP.

Читать далее

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