React.js Plugins | To Watch | RU
8 subscribers
317 photos
317 links
Плагины, пакеты и примеры на React.js
Download Telegram
Приложение notes, разработанное с помощью spring boot и react

Это пакет из Github, который представляет собой приложение для заметок.
Он состоит из backend и frontend.
Для установки и запуска приложения необходимо установить JDK 17, Gradle, MySQL и Node 18.16.1, а также рекомендуется использовать Visual Studio Code, IntelliJ Community и Postman. После установки всех необходимых инструментов можно клонировать репозиторий, настроить подключение к базе данных, установить и запустить backend, а затем установить и запустить frontend. Также возможен вариант установки и запуска приложения с помощью Docker. После успешной установки и запуска приложение доступно по адресу http://localhost:5173 и имеет следующие представления: активные заметки, архивные заметки, создание заметки, редактирование заметки, архивирование заметки, удаление заметки.

Github
Простой проект загрузки файлов с помощью React

Этот пакет из Github представляет собой простой проект для загрузки и хранения изображений. В нем используются Multer - мощный middleware для обработки загрузки изображений, и Cloudinary - надежный облачный сервис для безопасного хранения изображений. Проект предлагает возможность ознакомиться с его функциональностью и попробовать демо-версию. Multer упрощает процесс обработки загрузки файлов, включая изображения, с клиента на сервер, а Cloudinary интегрируется для безопасного хранения загруженных изображений. Проект может быть полезен для упрощения процесса загрузки и хранения изображений в ваших приложениях.

Github
Погодное приложение, предоставляющее информацию о погодных условиях

Этот пакет в Github представляет проект WeatherAPP, который позволяет пользователям видеть погоду любого города в мире. Он разработан с использованием React и Redux. Основные функции включают в себя получение информации о погоде в режиме реального времени и поиск любого города в мире. Проект имеет отзывчивый дизайн и поддерживает установку и запуск на локальной машине. Разработчик проекта - Reza Merzaie.

Github
Реагируйте на погоду в Тбилиси - обновляйте погоду в Тбилиси, Грузия, в режиме реального времени

В данном репозитории на Github представлен проект React Weather Website для Тбилиси. Данное приложение предоставляет в реальном времени информацию о погоде в красивом городе Тбилиси, Грузия. Оно включает в себя подробный прогноз на следующие шесть дней, включая температуру, ветер, максимальную и минимальную температуры, время восхода солнца и изображения погоды. Приложение имеет отзывчивый дизайн для удобного использования на различных устройствах. Для работы с данными о погоде используются React, OpenWeatherMap API и CSS для стилизации сайта.

Github
Веб-приложение, которое позволяет пользователям осуществлять поиск игр по жанрам

Этот пакет на GitHub представляет собой Proper responsive Indie Gems Portal - платформу, где вы можете искать и открывать свои любимые игры на основе различных категорий. Он предлагает удобный способ исследования и поиска игр, которые соответствуют вашим предпочтениям. Для использования пакета необходимо клонировать репозиторий, установить зависимости и запустить разработческий сервер, после чего можно будет искать и сортировать игры на основе разных факторов. Проект лицензирован под MIT License и создан с использованием технологий React18, TypeScript, Chakra-UI, Vite и API Rawg.io.

Github
Fashion Cube-приложение для электронной коммерции с React

Пакет ScreenShotFashion Cube-Ecommerce Application представляет собой приложение электронной коммерции, разработанное с использованием Reactjs, Redux, Axios, Sass и react-bootstrap. Он содержит функции домашней страницы с отображением списка продуктов, страницу с подробной информацией о продукте, страницу с категориями продуктов, страницу с рекомендованными продуктами, страницу корзины, а также страницы для входа и регистрации. Этот проект также включает Monorepo и Lerna для более эффективного управления кодом, а также использование Design System и React Hooks. В планах для будущих версий проекта добавление новых функций. Образец работы приложения можно проверить в живом демо.

Github
Проект, помогающий упрочнить использование redux в приложении react

Этот пакет из GitHub — рабочий проект, который использует только состояние и свойства для передачи данных. Основная цель проекта — улучшить веб-приложение, которое помогает пользователям заполнить заявку на ипотеку. В ходе проекта будут внесены изменения в компоненты, чтобы они работали с Redux. Также будет изменены файлы в папке src/components и файлы src/router.js, src/index.js и src/App.js для использования Redux.

Github
Учебный таймер, написанный в React

Этот пакет из GitHub представляет собой проект по разработке таймера для учебных занятий, выполненного с использованием React. Он был создан в рамках курса Fullstack Allura, предлагаемого программой Desenvolve-Grupo Boticario. Таймер позволяет установить определенное время для изучения и уведомляет пользователя о необходимости сделать перерыв.

Github
Игра Mario Jump, созданная с использованием React и Redux Toolkit

Mario Jump - бесконечная игра, вдохновленная известной игрой Google Chrome's T-Rex Dinosaur Game. Игра полностью построена с использованием ReactJS и Redux Toolkit. Особенности игры включают мобильную адаптивность, красивые анимации, быстрое управление, высокий счет, фоновую музыку Марио и звуковые эффекты прыжков и окончания игры. Автор проекта - Gilbert Hutapea, который предоставляет лицензию MIT License для использования программного обеспечения.

Github
Простой шаблон портфолио для разработчиков / дизайнеров, созданный с помощью React

Этот пакет включает в себя шаблон портфолио для специалистов в области информатики и кибербезопасности, созданный с использованием React. Чтобы начать использование, необходима установка git-репозитория, а затем выполнение команды установки yarn для проверки и сборки веб-сайта. Затем можно вносить изменения в содержимое страниц, указанное в файле src/content_option.js.

Github
Простое приложение React, которое сохраняет количество кликов в локальном хранилище

Этот пакет на гитхабе - простой проект счетчика на React. Для установки нужно использовать команды git clone для клонирования репозитория, cd для перехода в папку click-counter, npm i для установки зависимостей и npm run start для запуска проекта. Возможно добавление новых функций и обновление интерфейса и логики счетчика, и вклад в развитие проекта будет приветствоваться.

Github
Клонировать приложение Spotify с помощью Next.js и Супербаза

В данном пакете из GitHub представлено приложение-клон Spotify, которое демонстрирует навыки автора в современной веб-разработке. Оно объединяет передовые технологии, такие как Next.js, React.js, Tailwind CSS, Supabase, Stripe и TypeScript, чтобы предоставить пользователям захватывающий и центрированный на пользователе опыт стриминга музыки. Это приложение является результатом гармоничного сочетания элегантности и мощности, и оно представляет собой цифровую симфонию, которая захватывает пользователей, поднимая их опыт прослушивания музыки на новую высоту.

Github
Полнофункциональное приложение для викторин с открытым исходным кодом

Пакет REACT QUIZ - это полноценное открытое приложение для викторин на стеке MERN. Он предоставляет возможность регистрации и входа пользователей, выбора типа и уровня сложности вопросов, отсчета времени и автоматической остановки по истечении времени, а также отображения результатов ответов. Проект разработан с использованием React.js, React Vite, React Hooks, react-router-dom, Tailwind Css, React Icons, Framer Motion и Firebase для аутентификации и хранения данных. Пакет предоставляет скриншоты приложения и информацию об авторе, а также имеет лицензию MIT.

Github
Компонент иерархического дерева для React в Typescript

React Tree - это компонент древовидной структуры для React, написанный на TypeScript. Он поддерживает тематизацию для почти всех частей компонентов и может быть использован как в качестве неконтролируемого компонента, так и контролируемого компонента. Также он обладает большим набором функций, таких как стилизация контейнера, поддержка многоуровневого выбора, настраиваемые строки сообщений и рабочий API для контроля состояния. Он также поддерживает пользовательский рендеринг узлов и иконок, и имеет возможность кастомизации темы.


Github
Приложение со списком дел, использующее React

React-Todo-list - это приложение ToDo-список, разработанное мной для изучения и улучшения навыков работы с React. В технологическом стеке использовались React, HTML, CSS и JavaScript. В процессе работы над проектом я освоил применение React hooks, работу с пропсами, функциями обработки состояния данных и устранение ошибок. В приложении имеются скриншоты для наглядности.

Github
Приложение Todo, созданное с использованием React и Redux

Пакет "Todo App" - это приложение для управления списком дел. Для установки и запуска нужно воспользоваться командами "yarn install" или "yarn start". Проект можно легко задеплоить на Netlify или github-pages. В качестве инструментов использованы React, React Hooks Redux, Redux Persistent, Sass, что обеспечивает улучшенный интерфейс, сохранение состояния приложения и возможность расширения функционала. Проект размещен под лицензией MIT, и вы можете внести свой вклад, оставив комментарий или создав новый пулл-реквест.

Github
Веб-приложение для продуктов питания, использующее React JS и Tailwind CSS

Этот пакет из GitHub - веб-приложение для заказа еды, написанное на React JS и стилизованное с использованием Tailwind CSS. Для установки необходимых зависимостей следует выполнить команду npm install. Данные и изображения, используемые для имитации ответов API, находятся в файле src/data/data.js. В процессе создания данного приложения было использовано сочетание React и Tailwind, позволяющее быстро создавать веб-сайты. Также было добавлено немного дополнительного JavaScript с использованием метода фильтрации массива для фильтрации определенных типов продуктов и категорий цен.

Github
Веб-сайт, на котором вы можете сохранить просмотренное аниме, используя React и Postgresql

Проект AnimeSaver является веб-приложением, которое позволяет искать аниме и добавлять их в список. Вы также можете оставить комментарий и оценить аниме, а также редактировать или удалить их. Для запуска проекта необходимо установить Node.js, NPM и Docker, а затем клонировать репозиторий и выполнить команду "docker-compose up" в терминале. Приложение использует фреймворки NestJS и React, базу данных PostgreSQL, аутентификацию с помощью JWT, а также другие технологии и API.

Github
Платформа React share отслеживает или разделяет счета

TruPaid - это автоматизированная система для совместного использования расходов. С ее помощью согласовывать или разделять счета могут сожители, арендаторы и собственники жилья, а также пары. В проектной директории доступны следующие скрипты: yarn lint - запускает проверку типов файлов проекта на соответствие линтеру; yarn format - пытается исправить типы файлов проекта с использованием prettier; yarn start - запускает приложение в режиме разработки на http://localhost:3000; yarn test - запускает тестовый раннер в интерактивном режиме; yarn build - собирает приложение для развертывания в папку build. В пакете также присутствуют различные папки: api, assets, components, features, hooks, store, types и utils. Проект использует TypeScript, Redux Toolkit для управления состоянием, React Router для маршрутизации, Material-UI для стилизации, axios для выполнения HTTP-запросов и Storybook для визуализации и взаимодействия с пользовательскими компонентами.

Github
Невероятно простая система всплывающих уведомлений для React

Пакет "buttered-toast" представляет собой простую систему уведомлений (toast) для React. Размер пакета всего 894 байта (сжатый), без зависимостей и конфигурации. Для использования достаточно импортировать компоненты "ToastContextProvider" и "useToast", и затем вызвать функцию "show" с необходимым содержимым тоста. Пакет также предлагает настройку параметров по умолчанию и возможность создания собственного стиля для тостов.

Github
Пример проекта, показывающий, что ElysiaJS работает как следующий.Пользовательский сервер JS

Этот пакет включает в себя Bun, ElysiaJS и NextJS. В демонстрационном проекте показано, как ElysiaJS работает в качестве пользовательского сервера Next.JS с полной типовой безопасностью, подобной tRPC и ts-rest. Вы можете определять пути маршрутов (в отличие от tRPC), и не требуется дополнительный шаблонный код (в отличие от ts-rest контрактов). Все это работает на быстром рантайме bun, и достигается с помощью реактивных компонентов сервера (React Server Components), где вы можете получить доступ к глобальным объектам Bun (например, Bun.password, Bun.file). Поддерживается горячая перезагрузка модулей. Проект также может быть развернут на платформе Railway (nixpacks), где с помощью Nixpacks builder вы можете развернуть проект своим хэшем репозитория на GitHub всего одним щелчком. В будущем также планируется добавить поддержку Docker.

Github