React.js Plugins | To Watch | RU
8 subscribers
317 photos
317 links
Плагины, пакеты и примеры на React.js
Download Telegram
Простая реализация игры в крестики-нолики с использованием React

Данный пакет находится на GitHub и представляет собой простую реализацию игры "Крестики-нолики" с использованием React, анимации маршрутов с помощью React Router v4 и Styled Components, а также ImmutableJS, GraphQL, Apollo, Jest, Storybook и немного магии. Для начала работы необходимо установить пакет с помощью команды "yarn install" и запустить его с помощью команды "yarn start". Затем откройте браузер и перейдите по адресу 0.0.0.0:8090. В планах на ближайшее будущее разработчика добавить еще больше технологий, таких как Flow, GraphQL Subscription, SSR, а также реализацию React Native. Он также просит пользователей связаться с ним, если его код не соответствует лучшим практикам программирования на стеке React, и просит поставить ему звезду, если его код помог.

Github
Приложение со списком дел, созданное по заданному дизайну с использованием React

Этот проект Todo List App - это решение для одного из челленджей от Devchallenges.io. Это приложение позволяет пользователям создавать и управлять списками дел. Оно создано с использованием библиотеки React и React-Icons для добавления значков в интерфейс.

Github
Приложение React Hooks для расчета ИМТ человека

Данный пакет включает в себя приложение на React Hooks для расчета индекса массы тела (BMI) человека. Оно позволяет хранить данные за последние 7 дней с помощью LocalStorage. Создано с использованием create-react-app. Важное улучшение в пакете - удаление зависимостей от модуля Materialize-CSS и исправление проблемы, при которой график переставал работать при наведении на старые точки.

Github
Компонент react form wizard с проверкой и индикатором выполнения

Этот пакет включает в себя компонент React Form Wizard, который позволяет создавать визарды форм с валидацией и прогресс-баром без использования внешних зависимостей. В компоненте можно задать форму как круглой или квадратной формы, выбрать цвет вкладок и прогресс-бара, а также указать текст кнопок "Next", "Back" и "Finish". Каждая вкладка содержит заголовок, иконку и контент, которые могут быть настроены в соответствии с требованиями проекта.

Github | Демо
Музыкальный веб-сайт Lofi, созданный с использованием React.js

В этом пакете из Github представлен проект Lofi Music Website, разработанный с использованием React.js. Он предоставляет возможность наслаждаться прослушиванием музыки в стиле лофай пользователям, создавая приятную и расслабляющую атмосферу. Веб-сайт имеет минималистичный и привлекательный дизайн, способствующий созданию успокаивающей обстановки. Функционал включает музыкальный плеер с возможностью воспроизведения, паузы, пропуска треков и регулировки громкости. Для установки проекта необходимо клонировать репозиторий, установить зависимости с помощью yarn install, запустить сервер разработки с помощью yarn start и открыть веб-сайт в браузере.

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

Этот пакет из GitHub представляет собой простое приложение Todo List, построенное с использованием React. Он позволяет пользователям добавлять, редактировать и удалять задачи, отмечать задачи как выполненные и фильтровать задачи в зависимости от их статуса выполнения. В приложении есть возможность добавления, редактирования и удаления задач, а также отметки задач как выполненных, фильтрации задач и отображения общего количества задач и количества выполненных задач. Для установки приложения необходимо склонировать репозиторий, установить зависимости и запустить приложение. В качестве API используется JSONPlaceholder API для получения и обновления задач. Если вы хотите внести свой вклад в проект, вам следует форкнуть репозиторий, создать новую ветку, внести изменения и отправить pull request.

Github
Airbnb website Clone using React

Пакет GitHub Airbnb Clone - это проект разработки клона Airbnb, основанный на учебнике FreeCodeCamp. Цель состоит в том, чтобы попрактиковаться и глубже понять концепции React. Значительные изменения были внесены в исходную кодовую базу, чтобы использовать функциональность каждого компонента и улучшить результаты обучения. Во время создания проекта автор изучил основы React, развил практические навыки в реализации компонентов, управлении состоянием, маршрутизации и обработке событий, решении проблем и поиске решений посредством исследований и постоянной практики.

Github
Музыкальное веб-приложение, созданное с использованием React и Deezer API

Этот пакет на GitHub представляет музыкальное веб-приложение, которое позволяет воспроизводить, сохранять и исследовать песни, артистов, альбомы, плейлисты и радио на основе Deezer API. Оно построено с использованием Next.js, Redux & Redux Persist, SWR и Wavesurfer.js. Приложение имеет красивый адаптивный интерфейс, вдохновленный работой Max Dobzhansky и доступно по адресу http://localhost:3000 после установки и запуска.

Github | Демо
Веб-приложение, которое предоставляет информацию о погоде в режиме реального времени для данного местоположения

Этот пакет на GitHub представляет собой простое приложение погоды, созданное с использованием React. Оно предоставляет информацию о погоде в режиме реального времени для заданного местоположения. Основные функции включают получение данных о погоде из API, отображение текущих погодных условий, настройку поиска по местоположению и поддержку различных единиц измерения. В разработке использовались следующие технологии: React, Axios, Bootstrap, OpenWeather API, Material UI, I18next, Gsap, Antd, React-icons и react-player.

Github
Космический веб-сайт, созданный с использованием React и Tailwind CSS

Этот проект Space Website - одностраничное приложение, созданное с использованием React и Tailwind CSS. Оно представляет собой информацию о космосе и позволяет пользователям исследовать его чудеса. В пакете предоставляется возможность ознакомиться с демонстрационной версией приложения, а также описываются его ключевые особенности, включая адаптивный дизайн, космическую тематику, информацию о ракетах и космической эксплуатации, интерактивное меню навигации и футер с космическим фоном. Открытые для вклада предложения по улучшению проекта приветствуются, а сам проект распространяется под лицензией MIT.

Github
Приложение React QR Code с флажком

Данный пакет из GitHub включает в себя три основных компонента: checkbox-qr, Stack и Vite. Checkbox-qr - это библиотека для создания и использования элементов с помощью флажка QR-кодов. Stack - это инструмент для построения и разработки современных веб-приложений, который включает в себя Vite - инструмент для сборки кода и локального сервера. Также в пакет входят React - библиотека для разработки пользовательских интерфейсов и styled-components - библиотека для стилизации компонентов React.

Github | Демо
Демонстрационное приложение с предлагаемым автозаполнением в React

Этот проект - демонстрация использования "suggest pattern" в React. В нем используются следующие технологии: Vite v4.3.9, React v18.2.0, TypeScript v5.0.2 и ESLint v8.38.0. Чтобы начать работу с проектом, необходимо выполнить команду "npm install" и запустить проект с помощью команды "npm run dev". Проект распространяется под лицензией MIT до 2023 года.

Github
Все мета-теги SEO, которые могут вам понадобиться, в одном компоненте React

Пакет "metadatah" представляет собой компонент React, в котором собраны все необходимые метатеги для поисковой оптимизации (SEO). Основная мотивация создания этого пакета заключается в том, чтобы избежать необходимости копировать метатеги из одного компонента в другой при публикации статьи в интернете, особенно в социальных сетях.

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

PaymentHealthyMe - это веб-приложение электронной коммерции, предоставляющее продавцам веганской пищи уникальную платформу для продажи их здорового и эстетичного питания своим целевым потребителям. Приложение построено с использованием ReactJS, Nodejs, expressjs, Mongodb-atlas, аутентификации auth0 и платежного шлюза Razorpay, что обеспечивает плавный и безопасный опыт электронной коммерции. Вместе с такими функциями, как поиск, фильтрация, сортировка, списки продуктов, корзина и отслеживание заказов, HealthyMe предоставляет комплексное решение для продавцов пищи, чтобы продавать свои здоровые и привлекательные продукты своим целевым потребителям. Это приложение также мобильно отзывчиво, полностью масштабируемо и настраиваемо, позволяя удовлетворить уникальные потребности продавцов и их целевой аудитории.

Github
Приложение с коротким URL-адресом, созданное с использованием Next.js

Пакет из GitHub представляет собой приложение для создания коротких URL-адресов на основе Next.js. Пользователи могут вводить длинные веб-адреса и генерировать короткие URL-адреса, что делает их более удобными для передачи ссылок. В приложении доступны такие функции, как укорачивание URL-адресов, перенаправление на первоначальные веб-адреса, просмотр базовой аналитики и регистрация и аутентификация пользователей. Для запуска приложения локально необходимо склонировать репозиторий, установить зависимости и перейти по указанной ссылке. Контрибьюторы также приветствуются и могут вносить свои предложения и правки в репозиторий.

Github
Клон пользовательского интерфейса TikTok, созданный с использованием React

Этот пакет Github - TikTok UI Clone - является веб-приложением, разработанным для воссоздания пользовательского интерфейса приложения TikTok. Он создан с использованием React.js, CSS и JSX и позволяет пользователям просматривать и просматривать видео в стиле TikTok в знакомом и интерактивном интерфейсе. Основные функции включают просмотр видео в стиле TikTok, плавное и отзывчивое воспроизведение видео, простой и понятный интерфейс с интуитивной навигацией, бесконечную прокрутку для плавного обнаружения видео и возможность ставить лайки, оставлять комментарии и делиться видео. Для установки и использования клонированного интерфейса TikTok UI следуйте инструкциям в репозитории.

Github
Реагируйте на приложение Todo с помощью localStorage

React Todo App - это приложение для создания списка задач с использованием React. В приложении можно добавлять задачи и удалять их по клику на кнопку. Кроме того, все задачи автоматически сохраняются в локальное хранилище при изменении состояния приложения. Доступна демонстрация приложения по [ссылке](https://arberlisaj.github.io/react-todo-app/).

Github
Список расходов, созданный с помощью React и TypeScript

Пакет "React Expense List" представляет собой приложение для учета расходов. Оно позволяет добавлять расходы, удалять их и фильтровать по категориям. В приложении также реализовано валидация формы с использованием Zod. На странице проекта доступен скриншот работы приложения и демонстрация в реальном времени.

Github
Универсальный компонент React, обеспечивающий функциональность нижнего листа

React Stateful Bottom Sheet - это универсальный пакет npm, который предоставляет компонент нижнего списка со состоянием для ваших приложений React. Он легко вписывается в ваш проект, повышая взаимодействие и отзывчивость пользователей. Он поддерживает различные настройки и может изменяться в размере в зависимости от интерактивного перемещения пользователя вверх и вниз. Встроенное управление состоянием позволяет открывать или закрывать нижний список, обеспечивая гладкую работу. Компонент также поддерживает плавные анимации и переходы с помощью библиотеки framer-motion, а интеграция с TypeScript улучшает безопасность типов и опыт разработчика.

Github
Быстрый анализ и отладка кода с помощью ChatGPT в вашем браузере

Пакет CodeSage — это программный инструмент, разработанный для значительного сокращения времени, затрачиваемого разработчиками на кодирование и отладку. Он включает в себя встроенный редактор и компилятор, позволяющие разработчикам анализировать и оптимизировать код, отлавливать ошибки, проверять безопасность и оценивать качество и сложность кода. Он также охватывает различные сегменты рынка, включая крупные технологические компании, стартапы с ограниченными ресурсами и учебные заведения, и предлагает ряд улучшений и инноваций, таких как интеграция с пакетными менеджерами и возможность предварительного просмотра HTML и React-кода.

Github