React JS

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

🌐 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

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🔥 🕓 24 апреля, в четверг, в 19:00 (мск) приходите на митап в Санкт-Петербурге или подключайтесь онлайн. Спикеры из ЮMoney и Сбера расскажут, как работают над задачами и улучшают процессы в команде. Темы докладов: 🟣 Рефакторинг за 10 секунд. Как с помощью консольной утилиты производить автоматизированный рефакторинг крупных приложений за считанные секунды. 🟣 Подходы и практики тестирования во фронтенде. Зачем нужно тестирование во фронтенде, какие стандарты и подходы существуют и как мы применяем их в своей работе. 🟣 Уязвимости фронтенда в финтехе. Топ-3 атаки, или как построить защиту по всем фронтам — от планирования до релиза. 🟣 Анимация до кончиков пальцев. Поговорим про анимацию в целом и на вебе. Рассмотрим все способы сделать анимацию. Узнаем про композитные слои и как их посмотреть в Dev Tools — на примере одинаковых анимаций, но с использованием разных подходов. Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix ❤️

👩‍💻 В этой статье автор объясняет ключевые хуки 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

Хотите научиться управлять реактивностью в Vue 3? Это ключевая концепция для создания динамичных и интерактивных интерфейсов! 📌На нашем вебинаре вы разберете, как работает реактивность во Vue 3 и почему это важно для ваших приложений. Мы познакомим вас с Composition API — новым подходом к организации кода, который повысит гибкость и поддерживаемость ваших проектов. Присоединяйтесь к вебинару и узнайте, как улучшить свои навыки и оптимизировать работу с Vue 3. Мы покажем практические примеры, которые вы сможете сразу применить в своих проектах!  Кому будет полезен вебинар? - Разработчикам, которые хотят плавно перейти с Vue 2 на Vue 3. - Новичкам, которые хотят понять основы реактивности и писать структурированный код. - Опытным разработчикам, стремящимся углубить знания и освоить Composition API для крупных проектов. 👉Регистрируйтесь и получите скидку на обучение «JavaScript Developer. Professional»: https://otus.pw/mBxF/?erid=2W5zFHUH7JY Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

✔️ Визуализация алгоритмов сортировки Визуализатор на React, чтобы разобраться в работе ключевых алгоритмов сортировки. Возможности: — сортирует массив трёхзначных чисел; — регулирует скорость; — запускает, останавливает, сбрасывает процесс; — создаёт случайный массив. 🔗 GitHub @react_tg