React JS

🌐 Stack Auth — это открытая альтернатива Auth0 и Clerk, предназначенная для аутентификации пользователей в веб-приложениях!

🌟 Она поддерживает OAuth, вход через email/пароль, magic links, а также предоставляет удобные готовые компоненты для Next.js. Разработчики могут использовать REST API для интеграции с любым серверным стеком.

🔐 Лицензия: AGPL-3.0

🖥 Github

@react_tg

CSS совет 💡

Для лучшего UX используйте :focus-visible вместо :focus для изменения стиля обводки ✅

@react_tg

🌐 LinguiJS — легковесная библиотека для интернационализации. Этот инструмент предлагает элегантное решение, для адаптации проекта под несколько языков без головной боли.

В отличие от громоздких аналогов, Lingui весит всего 3 КБ и поддерживает React-компоненты прямо внутри переводимых строк. В коде используется ICU MessageFormat — тот же стандарт, что и в популярных i18n-библиотеках, но с более простым синтаксисом. А встроенный CLI автоматически извлекает фразы для перевода из кода.

🤖 GitHub
@react_tg

Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀.

👾 ReasonReact — проект, предлагающий писать React-компоненты на ReasonML — типизированном языке c безупречным выводом типов и синтаксисом, вдохновлённым OCaml.

Это не новый фреймворк, а скорее "обёртка" над обычным React, которая добавляет автоматическую проверку типов и минимальный рантайм. Вы по-прежнему можете использовать существующие JavaScript-библиотеки, но с гарантией, что пропсы и состояния компонентов будут корректны на этапе компиляции.

🤖 GitHub

@react_tg

🌐 Plate — это мощный редактор форматированного текста (WYSIWYG), созданный на основе React и Slate, с поддержкой интеграции AI!

🌟 Он предоставляет гибкую платформу для создания настраиваемых редакторов с возможностью расширения с помощью плагинов. Plate подходит для различных сценариев, таких как редактирование документов в стиле Notion, обработка Markdown и коллаборативные инструменты.

🔐 Лицензия: MIT

🖥 Github


@react_tg

Изображение преобразуется в информационную карточку при нажатии на значок ➡️

#карточки

https://codepen.io/chandrashekhar/pen/vrddgg

@react_tg

🌐 Эта статья объясняет, как настроить React-библиотеку для тестирования приложений на Next.js!

🌟 В статье пошагово описывается процесс установки Jest, конфигурации и написания первых тестов. Рассматриваются преимущества тестирования, включая уверенность при рефакторинге кода и упрощение поиска ошибок. В качестве примера приведен тест компонента игры 2048, который проверяет правильность рендеринга игрового поля.

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

@react_tg

👩‍💻 В этой статье автор объясняет ключевые хуки React 19: useFormState() для управления состоянием форм, useFormStatus() для отслеживания статуса отправки, useActionState() для обработки асинхронных действий, useOptimistic() для оптимистичных обновлений UI и use() для работы с промисами в компонентах!

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

@react_tg

Как стать профи в JavaScript? Вебинар для разработчиков, которые хотят расти

JavaScript — это не только язык программирования. Это целый мир, где важно уметь выбирать правильные инструменты и фреймворки, которые действительно помогут вам двигаться вперед.

На открытом вебинаре 21 апреля в 20:00 мск мы разберемся, как стать профессионалом, а не просто джуном. Обсудим:

— Почему одного знания JavaScript недостаточно для роста.
— Как фреймворки (React, Vue, Angular, Svelte) влияют на вашу карьеру и как выбрать тот, который подходит именно вам.
— Почему Node.js полезен фронтенд-разработчикам и как он ускоряет ваш путь в мире технологий.
— Как научиться быстро осваивать новые фреймворки и не бояться перемен.

Этот вебинар — не о коде, а о том, как осознанно развивать свою карьеру. Присоединяйтесь и получите скидку на большое обучение «JavaScript Developer. Professional»: https://otus.pw/a9L1/?erid=2W5zFGnNqbN

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

👩‍💻 react-responsive — это React-библиотека, позволяющая использовать CSS media queries непосредственно в компонентах React, обеспечивая адаптивный дизайн!

🔐 Лицензия: MIT

🖥 Github

@react_tg

🚀 SaaS Starter Kit — готовый шаблон для корпоративных SaaS-приложений на Next.js. Этот open-source проект включает всё необходимое для enterprise-решений: аутентификацию, платежи через Stripe, аудит-логи и даже синхронизацию с корпоративными каталогами.

Основанный на Next.js и TypeScript, шаблон уже настроен для работы с PostgreSQL через Prisma и покрыт end-to-end тестами на Playwright. Особенно удобна встроенная поддержка Docker Compose для быстрого развёртывания.

🤖 GitHub

@react_tg

🌐 Gradienty — это онлайн-инструмент, предназначенный для создания и настройки градиентов, текстовых градиентов, эффектов glassmorphism и других визуальных элементов с поддержкой Tailwind CSS!

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

@react_tg

🌐 Developer Icons — это бесплатный и открытый набор оптимизированных и настраиваемых иконок для ваших проектов!

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

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

@react_tg

🖥 Совет по HTML 💡

Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

@react_tg

👩‍💻 Это — подробное руководство по созданию настраиваемого хука useSearch в React!

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

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

@react_tg

👩‍💻 Mantine — это современная библиотека компонентов и хуков для React, созданная для ускорения разработки веб-приложений! Она включает более 100 настраиваемых компонентов и свыше 50 хуков, обеспечивая разработчикам широкий инструментарий для создания функциональных и доступных интерфейсов.

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

@react_tg

🌐 Headless UI — это набор полностью доступных UI-компонентов для React и Vue, разработанных для интеграции с Tailwind CSS!

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

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

@react_tg

✔️ Визуализация алгоритмов сортировки

Визуализатор на React, чтобы разобраться в работе ключевых алгоритмов сортировки.

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

🔗 GitHub

@react_tg