🧩 Masonic — React-библиотека для создания высокопроизводительных masonry-гридов с виртуализацией. Основана на react-virtualized, но предлагает более гибкий API и автоматическую адаптацию под размеры контейнера.

Библиотека экспортирует не только готовый компонент, но и низкоуровневые хуки (useMasonry, usePositioner), позволяя кастомизировать поведение. Поддерживает TypeScript и оптимизирована для работы с тысячами элементов.

🤖 GitHub

@react_tg

🌐 BrowserOS — операционная система внутри браузера на базе AI

BrowserOS — это экспериментальный проект, превращающий браузер в полноценную AI‑среду с "живущими" агентами. По сути, это OS-слой внутри вкладки браузера, где ИИ-агенты могут взаимодействовать с интерфейсами как пользователи.

🧠 Основные идеи:
— Агент может кликать, печатать, читать и взаимодействовать с окнами внутри браузера
— Поддержка многозадачности: можно открыть несколько окон, как в реальной ОС
— Простое API для создания интерфейсов и запуска ИИ-агентов
— Можно подключать LLM и наделять их возможностью выполнять действия

📦 Особенности:
— UI построен на React
— Использует WebAssembly и Web Workers
— Позволяет тестировать и запускать агента в контролируемой "песочнице"

💡 Подходит для:
— Исследований в области AI-агентов
— Прототипирования мультимодальных систем
— Демонстрации взаимодействия LLM с интерфейсами

🔗 GitHub

@react_tg

⚛️ Felte — минималистичный менеджер форм для React. Библиотека предлагает React-разработчикам простой способ работы с формами через хук useForm. В отличие от Formik или React Hook Form, Felte не требует оберток в виде компонентов — форма становится реактивной сразу после подключения ref.

Инструмент поддерживает валидацию через Zod/Yup/Superstruct и удобная интеграция с существующей разметкой. Подходит для проектов, где важна легковесность и минимальное количество boilerplate-кода.

🤖 GitHub

@react_tg

🧩 Как собрать приложение Playground: React + .NET Aspire

Если вы хотите быстро создать SPA на React (через Vite) вместе с backend’ом на ASP.NET Core, .NET Aspire делает это очень просто.

➡️ Новый пример на GitHub показывает, как интегрировать React-приложение и ASP.NET Core API в единую .NET Aspire‑архитектуру.

Что внутри:

- AspireJavaScript.AppHost — проект‑оркестратор на .NET Aspire
- AspireJavaScript.MinimalApi — API на ASP.NET Core (возвращает тестовые данные)
- AspireJavaScript.React — фронтенд на React (Vite), потребляющий API
- Также есть варианты на Angular и Vue

⚙️ Преимущества:

- Авто‑конфигурация сервисов и портов через Aspire Dashboard
- Простое связывание frontend/backend без ручной настройки
- Visual Studio или CLI (dotnet run) запускают всю систему сразу

Для запуска понадобится:

- .NET 8 SDK (или новее), Node.js (≥ 20.x), Docker Desktop/Podman
- В каждом клиентском (React/Angular/Vue) каталоге выполнить npm install, затем запустить через Aspire

📦 Структура запуска:

# из папки с AppHost
dotnet run
# откроется Aspire Dashboard
# через него можно перейти в React‑frontend, вызвав API

🧠 Почему это круто:

- Работает из коробки: сервисы стартуют, обнаруживают друг друга и логируются в едином UI
- Повна́я изоляция: конфигурации, порты, переменные окружения управляются централизованно
- Пресеты шаблонов облегчают настройку и отладку

📌 Подробности

@react_tg

🎣 Pullstate — минималистичный стейт-менеджер для React, который превращает управление состоянием в прогулку с хуками. В отличие от Redux, здесь не нужны редьюсеры или контексты, достаточно создать Store и напрямую мутировать его через update(), благодаря интеграции с Immer.

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

🤖 GitHub

@react_tg

⚛️ React.js Cheat Sheet — удобная шпаргалка по основным концепциям и API React. В ней собраны ключевые паттерны: от базовых компонентов и работы с состоянием до современных хуков и проверки типов пропсов.

Материал охватывает как классический подход с классами, так и актуальные функциональные компоненты с useState и useEffect. Особенно полезны примеры по работе с DOM, списками и условиями рендеринга. Шпаргалка пригодится как новичкам для быстрого старта, так и опытным разработчикам для сверки синтаксиса.

🔗 Ссылка - *клик*

@react_tg

📊 react-pivottable — React-библиотека для создания интерактивных сводных таблиц с drag-and-drop интерфейсом, вдохновлённым старыми версиями Excel.

Проект разработан Plotly и позволяет анализировать данные, визуализируя их в виде таблиц или графиков Plotly.js. Поддерживает гибкую настройку, работу с разными форматами данных и интеграцию в React-приложения через NPM.

🤖 GitHub

@react_tg

💨 Вышло новое крупное обновление на React Router — v.7.8.0

Команда React продолжает улучшать библиотеку, и новое обновление принесло несколько важных изменений. Одно из самых заметных — унификация именования данных загрузчиков. Теперь везде используется loaderData вместо смешанных вариантов, что делает API более предсказуемым.

Особое внимание в этом релизе уделено middleware-функциям, которые пока помечены как unstable. Их API дорабатывается перед стабилизацией, и разработчики просят тестировщиков делиться обратной связью. Также появились небольшие, но полезные правки: например, добавлен пропс nonce для <Link> и улучшена обработка ошибок в ErrorBoundary.

Тем, кто использует экспериментальные фичи вроде RSC или middleware, стоит обратить внимание на breaking changes — некоторые API были переименованы или изменили поведение.

🔗 Полный список правок - *клик*

@react_tg

⚙️🚀 Как работают децентрализованные приложения и что такое Web3?

👉 На открытом уроке 14 августа в 20:00 МСК мы разберём, почему смарт-контракты и блокчейн лежат в основе успешных децентрализованных приложений. Вы увидите реальные кейсы, узнаете, как использовать Solidity для создания безопасных и эффективных приложений, а также разберете перспективы Web3 и развития децентрализованных технологий.

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

🎁 Присоединяйтесь к уроку и получите специальное предложение на курс «Solidity Developer».

👉 Для участия зарегистрируйтесь: https://otus.pw/h9xw/?erid=2W5zFJ38f4c

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

☁️ MistCSS — стилизация без JavaScript. Необычный подход к созданию UI-компонентов: вместо JS-обёрток использует чистый HTML и CSS с автодополнением типов. Генерирует .d.ts-файлы на основе CSS, обеспечивая проверку атрибутов прямо в JSX.

Особенность инструмента в нулевой JS-нагрузка. Стили работают через data-атрибуты, а вложенный CSS позволяет создавать сложные компоненты. Совместим с Tailwind и другими CSS-фреймворками.

🤖 GitHub

@react_tg

🎯 Browserable — открытый инструмент для автоматизации браузера с помощью AI-агентов.

Что делает:
• Управляет браузером как человек: переходит по сайтам, кликает, заполняет формы, вытаскивает данные.
• Достигает 90.4 % на тесте Web Voyager — один из лучших результатов среди подобных решений.
• Работает локально (self-hosted) или через удалённые браузеры.
• Запуск в 1 команду (`npx browserable`) или в полном окружении через Docker.
• В комплекте: админ-панель, REST API, JavaScript/TypeScript SDK, интеграция с LLM (OpenAI, Claude, Gemini и др.).

Зачем полезно:
— Автопарсинг и мониторинг сайтов
— Автоматизация тестирования веб-приложений
— Интеграция с агентами для сложных сценариев в интернете

GitHub: https://github.com/browserable/browserable

SourceCraft от Яндекса прокачал комьюнити-функции, и теперь опенсорс здесь — это не только репозитории и коммиты, но и настоящая система признания.

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

Добавились ачивки с индивидуальным дизайном от нейросети — каждая награда отражает личный вклад разработчика. А связь рейтингов с грантами упрощает поиск перспективных проектов и даёт им шанс на поддержку.

До 31 августа проходит конкурс: перенесите свой проект на SourceCraft, наберите больше лайков и получите эксклюзивный мерч.

Информация об организаторе Акции, о правилах проведения Акции, количестве призов, сроках, месте и порядке их получения размещена по ссылке

🧩 10 принципов для React-разработчиков

Недавно наткнулся на полезную статью с базовыми правилами работы в React. Вот главные рекомендации, которые стоит взять на заметку:
1. Чистый код с JSX — используй HTML-подобный синтаксис для лучшей читаемости.
2. Функциональные компоненты + хуки — современный подход вместо классовых компонентов.
3. Ключи в списках — помогают эффективно обновлять только изменённые элементы.
4. Переиспользуемые компоненты — разбивай интерфейс на мелкие части для удобства поддержки.
5. Управление состоянием — useState для простых случаев, useReducer для сложной логики.
6. Оптимизация — предотвращай лишние перерендеры вычислений и функций.
7. Валидация пропсов — проверяй типы пропсов для раннего обнаружения ошибок.
8. Глобальное состояние — удобный способ передавать данные без пропс-дриллинга.
9. Обработка ошибок — заранее перехватывай ошибки в компонентах.
10. Следить за обновлениями экосистемы — важно быть в курсе новых возможностей.

🔗 Ссылка - *клик*

@react_tg

📑 Landy — бесплатный шаблон лендинга на React с TypeScript

Он используется для быстрого создания профессиональных лендингов без глубоких знаний React. Шаблон использует хуки, TypeScript и код-сплиттинг. Всё содержимое хранится в JSON-файлах — тексты можно править, не копаясь в коде.

Интересные детали:
— Мультиязычность без перезагрузки страницы
— Готовые анимированные секции
— Идеальные показатели в Google Lighthouse
— Встроенная контактная форма с валидацией

🤖 GitHub

@react_tg

📄 Vectorless PDF Chatbot — новый подход к работе с документами

Интересный проект, который предлагает альтернативу традиционным чат-ботам с векторными базами данных. Вместо преобразования документов в эмбеддинги, система использует LLM для интеллектуального анализа PDF-файлов прямо в браузере пользователя.

Решение полностью статично и ориентируется на приватность. Документы не покидают браузер, не требуют предварительной обработки и не хранятся на серверах. При этом бот сохраняет контекст и может анализировать до 100 PDF-файлов одновременно.

🤖 GitHub

@react_tg

🍓 React-joyride — удобное решение для создания интерактивных туров по интерфейсу.

Основанный на react-floater проект позволяет гибко настраивать внешний вид и поведение туров. Можно использовать как готовые компоненты, так и создавать собственные элементы оформления.

Проект очень просто интегрировать с react-приложениями. Достаточно определить шаги тура и подключить компонент в нужном месте.

🤖 GitHub

@react_tg

🎉 Создайте свой AI-чат с Open-Fiesta!

Open-Fiesta — это открытая платформа для экспериментов с многомодельным AI-чатом, построенная на Next.js. Пользователи могут переключаться между различными провайдерами и моделями, сравнивать результаты и использовать веб-поиск с возможностью прикрепления изображений.

🚀 Основные моменты:
- Множество провайдеров: Gemini, OpenRouter и другие
- Выбор до 5 моделей для одновременного использования
- Поддержка веб-поиска и вложений изображений
- Удобный интерфейс с поддержкой клавиатуры

📌 GitHub: https://github.com/NiladriHazra/Open-Fiesta