React JS

⚡️ ​Создаём приложение для чата с помощью ReactJS и Firebase

Небольшое приложение со входом в аккаунт через учётную запись Google с помощью Firebase Authentication (SDK). Это инструмент Firebase, который поддерживает различные методы аутентификации, такие как пароли, номера телефонов, Google, Facebook, Twitter, GitHub и другие.

Все сообщения из чата пользователя хранятся в облаке Firestore. Cloud Firestore сохраняет данные в документах в виде пар ключ-значение.

В этой статье вы найдёте пошаговое руководство, как настроить проект в Firebase и React, и создадите полноценное приложение для чата:

https://www.freecodecamp.org/news/building-a-real-time-chat-app-with-reactjs-and-firebase/

#react

@react_tg

👩‍💻 react-dnd — библиотека для реализации функционала drag-and-drop (перетаскивания) в приложениях на React!

🌟 Она предоставляет высокоуровневые абстракции для работы с интерфейсами, которые требуют перетаскивания элементов, например, списков, карточек или областей для размещения.

💡 Основные возможности библиотеки включают поддержку сложных сценариев перетаскивания, таких как вложенные области перетаскивания, обработка нескольких элементов, создание настраиваемых источников и целей для перетаскивания. React-DnD построен на основе Redux и использует концепцию "обработчиков", чтобы обеспечить универсальность и гибкость при построении интерфейсов.

🔐 Лицензия: MIT

🖥 Github

@react_tg

🔥 Open Canvas — интерфейс, разработанный на Next.js и Tailwind для улучшенного взаимодействия с языковыми моделями для задач, связанных с созданием текста, кода и документации

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

🔐 Лицензия: MIT

🖥 Github

@react_tg

👩‍💻 Formik — это популярная библиотека для управления формами в приложениях на React!

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

🔐 Лицензия: Apache-2.0

🖥 Github

@react_tg

🖥 css-protips — коллекция полезных советов по CSS для улучшения кода и пользовательского интерфейса!

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

🔐 Лицензия: CC0-1.0

🖥 Github

@react_tg

👣 book-store — приложение книжный магазин, написанное на Go (backend) и Next.js (frontend).

🌟 Основные функции включают аутентификацию пользователей с JWT, админ-панель для управления книгами и заказами, CRUD-операции и middleware для валидации запросов. Интерфейс разработан на React и Next.js с использованием Redux Toolkit для управления состоянием.

🖥 Github

@react_tg

⚡️ Screenshot-to-code позволяет легко преобразовывать скриншоты, макеты и дизайнерские концепции из Figma в высококачественный, функциональный код с помощью искусственного интеллекта.

Он поддерживает работу с моделями Claude Sonnet 3.5 и GPT-4o.

🔗 Репозиторий

@react_tg

👩‍💻 Chakra UI — это современная библиотека компонентов, которая предоставляет простые, доступные и высоконастраиваемые компоненты пользовательского интерфейса! В ней присутствует встроенная поддержка темного режима и адаптивного дизайна.

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

@react_tg

👩‍💻 React Starter Kit — это набор инструментов для быстрого старта разработки веб-приложений на React. Он включает SSR (server-side rendering), аутентификацию, поддержку API и модульную архитектуру. Проект ориентирован на высокую производительность и гибкость, что делает его хорошей отправной точкой для создания любых приложений

🔐 Лицензия: MIT

🖥 Github

@react_tg

🖥 Красивый остров с показателем прокрутки на странице с возможностью перемещения по заголовкам статьи!

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

@react_tg

🖥 24 проекта на CSS! Анимации загрузки, карусели, слайдеры и многое другое!

🌟 CSS — это важный навык для веб-разработчиков, и его освоение может значительно улучшить внешний вид и восприятие ваших проектов. Независимо от того, новичок ли вы, желающий отточить свои навыки, или опытный разработчик, стремящийся быть в курсе последних технологий, этот курс будет одинаково для вас полезен!

🕞 Продолжительность: 2:34:10

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

@react_tg

🔥 WebStorm теперь бесплатен для некоммерческого использования! Изучаете ли вы JavaScript, работаете над проектами с открытым исходным кодом, создаете контент или пишете код в качестве хобби, теперь вы можете делать это бесплатно!

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

@react_tg

🖥 HeyForm — это open-source конструктор форм, написанный с использованием Node.js и React. Он позволяет легко создавать и настраивать интерактивные формы для опросов, анкет и викторин с использованием различных полей ввода и условной логики.

🌟 HeyForm поддерживает интеграции с вебхуками, аналитическими и маркетинговыми платформами, а также включает мощные возможности анализа данных.

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

🖥 Github

@react_tg

👩‍💻 bluewave-uptime — это open-source инструмент мониторинга серверов, созданный с использованием React.js, Node.js и MongoDB.

🌟 Приложение отслеживает доступность серверов, время отклика и инциденты в реальном времени, визуализируя данные и предоставляя уведомления. BlueWave Uptime подходит для управления доступностью и производительностью серверов, поддерживает мониторинг веб-страниц, портов и планируемое обслуживание.

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

🖥 Github

@react_tg

🔥 Бесплатный курс по React!

🌟 Описание: React (иногда пишется как React.js или ReactJS) — одна из самых популярных библиотек JavaScript для разработки мощных интерактивных веб-приложений. Вы узнаете, как начать с React и перейти к динамическим пользовательским интерфейсам. Вы будете работать со специфическими концепциями React, такими как: JSX, компоненты, состояние, свойства, хуки и многое другое. Пройдите этот курс, чтобы получить преимущество в качестве front-end или full-stack веб-разработчика!

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

@react_tg

👩‍💻 Vim for React Developers — мини-курс, который помогает разработчикам на React быстро освоить основные команды Vim и применять их в реальных сценариях работы с React-кодом!

🌟 В этом репозитории содержатся инструкции по установке Neovim, примеры наиболее полезных команд для навигации и редактирования кода, а также рекомендации по оптимизации работы в Vim для React-разработчиков. Курс ориентирован на тех, кто хочет повысить свою продуктивность, работая с Vim и JavaScript

🖥 Github

@react_tg

🖥 Полный курс JavaScript: создание сайта управления отелем с помощью Next.js, Sanity.io и Tailwind CSS!

🕞 Продолжительность: 10:19:31

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

@react_tg

🖥 Circle preloader — красивая анимация загрузки контента. Реализована на чистом CSS без использования JavaScript!

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

@react_tg

🔥 Tolgee — это веб-платформа для локализации, ориентированная на разработчиков и переводчиков. Она поддерживает интеграцию с такими фреймворками, как React, Angular, Vue, и предлагает функции автоматического перевода, переводческой памяти и совместной работы. Tolgee позволяет переводить контент прямо в контексте приложения и может быть развернут как самостоятельно, так и через облачные сервисы

▪️GitHub
🔗 Ссылка: *клик*

@react_tg

👩‍💻 beautiful-react-hooks — коллекция кастомных React-хуков, которые упрощают разработку компонентов и управление их состоянием!

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

🔐 Лицензия: MIT

🖥 Github

@react_tg