React JS

Прелоадер, который отлично подойдёт для сайта доставки еды #прелоадер #ожидание #загрузка https://codepen.io/jkantner/pen/OJGBYJG @react_tg

⚒️ Как освоить работу с API и научиться интегрировать реальные данные на веб-страницу?  На открытом вебинаре вы разберетесь: ▸Что такое API, как с ним работать; ▸Как получать данные с реальных серверов с помощью JavaScript и fetch(); ▸ Мы покажем, как создавать простые приложения с реальными API: погода, курсы валют, случайные цитаты. ❗️ Получите практические навыки работы с API, которые помогут вам быстро создать полезные веб-приложения. Это отличный старт для начинающих разработчиков и верстальщиков, которые хотят выйти на новый уровень. 📅 Урок 3 июня в 20:00 МСК проходит в преддверие старта курса «Fullstack Developer»: https://tglink.io/48c0f73ee7b2?erid=2W5zFJ1SDSY Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

👩‍💻 В этой статье автор предлагает использовать пользовательские события для управления состоянием в React-приложениях! 🌟 Автор объясняет, что, хотя популярные решения, такие как Context API, Redux или Zustand, эффективны, можно воспользоваться встроенной возможностью браузера — Custom Events — для облегчения коммуникации между компонентами без необходимости в пропс-дриллинге или сложных библиотек управления состоянием. 🔗 Ссылка: *клик* @react_tg

Магистратура, после которой работа найдёт тебя сама 🎓   Программа «Запуск высокотехнологичных продуктов» — совместная магистратура МФТИ и Сбера. Здесь студенты сразу работают над реальными проектами, получают бизнес-навыки и учатся у тех, кто уже делает технологии будущего.   Что ты получаешь 👇 ✔️ работу над своим проектом с 1-го дня ✔️ экспертизу МФТИ + бизнес-практику от Сбера ✔️ комьюнити и менторов ✔️ шанс выиграть грант на 100% стоимости обучения   Если тебе важна практика, а не только теория — это твой путь. Подавай документы до 15 августа 📆

🚀 FastUI — фреймворк, позволяющий собирать React-интерфейсы, описывая их декларативно на Python. Под капотом у проекта набор Pydantic-моделей, которые автоматически преобразуются в TypeScript-типы и React-компоненты. Хотя инструмент еще находится в стадии активной разработки, он уже демонстрирует интересный подход — бэкенд полностью определяет UI, а фронтенд становится исполнителем без собственной бизнес-логики. 🤖 GitHub @python_job_interview

🔧Хотите научиться создавать собственные, повторно используемые компоненты для веб-приложений? Откройте для себя мощь веб-компонентов и Shadow DOM! На открытом уроке вы узнаете: ▸ Как создавать изолированные UI-компоненты с помощью чистого JavaScript, ▸ Как использовать их в любых проектах, независимо от фреймворка, ▸ Сравнение веб-компонентов и React-компонентов — плюсы и минусы каждого подхода. 🔹 Узнайте, как быстро разрабатывать универсальные компоненты для интерфейсов, которые легко интегрируются в любые веб-приложения. Вы получите практические знания по созданию UI-kit с нуля и сможете использовать их в реальных проектах. 🎓Урок пройдет в преддверие старта курса «Fullstack Developer» 📅 Встречаемся 28 мая в 20:00 МСК. ➡️ Регистрация открыта: https://otus.pw/HGEk/?erid=2W5zFHBybpt Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

👩‍💻 Эта статья обсуждает ключевые принципы работы компонентов в React, такие как однонаправленный поток данных, подъем состояния (lifting state up) и обновление UI в зависимости от изменений данных! 🔗 Ссылка: *клик* @react_tg

📥 Stoplight Elements — это мощный инструмент для создания элегантной и удобной документации API. Он поддерживает OpenAPI и Markdown, позволяя не только описывать endpoints, но и добавлять обучающие статьи, руководства и примеры использования. В репозитории есть примеры для разных фреймворков: React, Angular и даже чистый HTML. Можно быстро развернуть демо и посмотреть, как это работает. Проект доступен в виде React-компонентов или Web Components, что делает его гибким для интеграции в любые проекты — будь то многостраничный портал в стиле Stripe или простая документация для CMS. 🤖 GitHub @react_tg

📍 Залипательное движение радужной полосы на время загрузки вашего сайта или приложения #прелоадер #ожидание #загрузка https://codepen.io/jkantner/pen/mdKOpbe @react_tg

Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛 7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп:  👉 Артемий Карпов расскажет,  как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения 👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG 👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни 👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе На воркшопе участники в командах будут исправлять некорректные интерфейсы, стараясь учесть требования дизайнеров, бэкенд-разработчиков и тестировщиков. Вместе обсудим варианты решений, а коллеги из Яндекса помогут найти самое оптимальное.  Регистрируйтесь и зовите друзей! Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.

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

Формошлёп — сотни хаков для фронтендеров в одном месте Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают. 👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

🌐 Plyr — это легковесный и доступный медиаплеер с открытым исходным кодом, поддерживающий HTML5 Video, HTML5 Audio, а также интеграцию с YouTube и Vimeo! 🌟 Он разработан для работы во всех современных браузерах и предоставляет разработчикам возможность легко встраивать и настраивать воспроизведение мультимедийного контента на веб-страницах. 🔐 Лицензия: MIT 🖥 Github @javascriptv

🗣️ Astuto — open-source платформа для сбора фидбэка пользователей. С помощью инструмента можно публиковать roadmap, модерировать предложения пользователей и интегрироваться с Jira/Slack через webhooks. Проект имеет гибкие настройки доступа от анонимных предложений до обязательной модерации. В отличие от аналогов, здесь нет ограничений на количество проектов или пользователей, а развёртывание через Docker занимает минуты. 🤖 GitHub @react_tg

📝 Remirror — react-библиотека для создания текстовых редакторов. Этот open-source проект, предлагающий готовые решения для WYSIWYG-редактирования с поддержкой мобильных устройств и доступностью. Библиотека имеет модульную архитектуру: можно использовать готовые расширения или создавать собственные на низком уровне. Для старта достаточно установить пакет и собрать редактор из 30+ доступных компонентов. 🤖 GitHub @react_tg

🎨 Origin UI — готовая коллекция компонентов для React и Tailwind CSS. Библиотека предлагает разработчикам набор готовых UI-элементов, которые можно просто скопировать и вставить в свой проект. Компоненты созданы с учётом современных тенденций дизайна и поддерживают темную и светлую темы. Особенность проекта в глубокой интеграции с Tailwind CSS и React, включая Next.js. Компоненты следуют тем же принципам, что и shadcn, но с расширенными возможностями кастомизации. Поддержка Tailwind v4 обеспечивает доступ к новейшим функциям фреймворка. 🤖 GitHub @react_tg

🚀 Почему пользователи платят $30 за простой конвертер картинок? Давайте разберемся. Кирилл из комьюнити создал простой продукт всего за один месяц, внедрив метод, которой уже принес результат. Как он это сделал: 1️⃣ Анализ спроса: через поисковые запросы он увидел, что много людей ищут конвертацию «HEIC to JPG». 2️⃣ Фокус на главном: удалил всё лишнее, оставив только функцию конвертации в один клик. 3️⃣ Скорость внедрения: за 30 дней сделал запуск без перфекционизма. Посты про конвертер (ч.1, ч.2) Что из этого получилось: — Доход $500 в месяц с тенденцией роста. — Более $10K заработано на конвертере. — $0 на рекламу, всего $40 в месяц на сервер. Выводы: — Люди платят за удобство, даже если есть бесплатные аналоги. — Продукт функционирует автоматически с минимальной поддержкой. — Быстрая и экономичная проверка идеи может быть успешной. Результаты из комьюнити билдеров: — Более 400 запусков по этой методике. — Некоторые продукты уже набрали от 50К до 100К+ пользователей. Присоединяйтесь к @its_capitan — следите за процессом разработки, продвижения и узнайте, сколько можно заработать на таких микро-продуктах. Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqv2URv4

🌐 Mastra — это TypeScript-фреймворк для создания AI-приложений! 🌟 Он предоставляет инструменты для работы с LLM, агентами, рабочими процессами, RAG, интеграциями и оценками. Фреймворк поддерживает запуск как локально, так и в облаке. Среди ключевых возможностей: маршрутизация моделей (OpenAI, Anthropic, Gemini), автоматизированные агенты, инструменты для выполнения функций, графовые конечные автоматы состояний, RAG для построения баз знаний и API-клиенты для сторонних сервисов. 🔐 Лицензия: ELv2 🖥 Github @react_tg

🌧️ Graphic Walker — это легковесный React-компонент для встраивания в веб-приложения, который превращает структурирование данных в интуитивный процесс с drag-and-drop интерфейсом. Проект ориентируется на простоту реализации. В отличие от других решений, здесь можно в несколько строк кода добавить приятную визуализацию в свое приложение. При этом поддерживаются продвинутые функции: от объяснения аномалий в данных до пространственной визуализации геоданных. 🤖 GitHub @react_tg

🌐 Stack Auth — это открытая альтернатива Auth0 и Clerk, предназначенная для аутентификации пользователей в веб-приложениях! 🌟 Она поддерживает OAuth, вход через email/пароль, magic links, а также предоставляет удобные готовые компоненты для Next.js. Разработчики могут использовать REST API для интеграции с любым серверным стеком. 🔐 Лицензия: AGPL-3.0 🖥 Github @react_tg