推荐10个不错的React开源项目

news2024/11/20 12:27:59

1,Kutt.it

Kutt是一个现代的URL缩短器,支持自定义域,可以用来缩短网址、管理链接并查看点击率统计信息。Kutt支持自定义域名,设置链接密码和描述,缩短URL的私人统计信息,查看、编辑、删除和管理链接,RESTful API等。

Kutt使用了Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等技术构建,是一个不错的学习React的开源项目。
在这里插入图片描述

项目链接:https://github.com/thedevs-network/kutt

2,Win11 in React

Win11 in React是一个使用 React、CSS (SCSS) 和 JS 等标准 Web 技术开发的复制 Windows 11 桌面体验的React项目。让开发者可以在浏览器上就可以体验 Windows 11 操作系统的魅力。
在这里插入图片描述

项目链接:https://github.com/blueedgetechno/win11React

3,JoL-player

JoL-player是一个简洁、美观、功能强大的React播放器,主要使用了React + TypeScript技术进行开发,提供完整的类型定义文件,支持国际化语言,同时还支持HLS(.m3u8)和H264视频格式,是一款短小精悍的React播放器。

在这里插入图片描述

项目链接:https://github.com/lgf196/JoL-player

4,Take Note

TakeNote是一款Web笔记应用,是一个没有数据库的静态站点,不会将笔记同步到云端。笔记会暂时保存在本地存储中,可以以 zip 格式下载 markdown 格式的所有笔记。该应用支持搜索笔记、多光标编辑、链接笔记、语法高亮、键盘快捷键、拖放操作、Markdown 预览等功能。

TakeNote 使用 TypeScript、React、Redux、Node、Express、Codemirror、Webpack、Jest、Cypress、Feather Icons、ESLint 和 Mousetrap 等技术创建。

在这里插入图片描述

项目链接:https://github.com/taniarascia/takenote

5,Fiora

Fiora是一个使用Node.js、React和socket.io技术开发的开源聊天应用程序。项目代码包含了后端、前端、Android 和 iOS 应用程序,同时支持在Windows / Linux / macOS 系统上运行。功能上Fiora提供了最基本的添加好友、群聊、设置主题、消息提醒、多种消息类型等,可以用它来学习socket和跨端开发。

在这里插入图片描述

项目链接:https://github.com/yinxin630/fiora

6,Todoist clone

Todoist clone 是一款使用 create-react-app 方式构建的用于测试React技术栈的开源项目,使用到的技术有React(自定义 Hooks、context)、Firebase 和 React 测试库。除此之外,还使用 SCSS (CSS) 并遵循 BEM 命名方法来设置应用程序的样式,是一款不错的学习React知识的技术库。

在这里插入图片描述

项目链接:https://github.com/karlhadwen/todoist

7,Jira Clone

JIRA 是一个项目与事务跟踪工具,被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。而Jira Clone 是使用React开发的Jira的简化版,提供了一些最基本的功能。与 Jira 一样,该项目也提供交互式用户界面,但代码更简单。技术上,该项目是使用 React 以及 webpack、Node.js、ESLint、styled-components 和 cypress 构建的。该应用使用最新的 React 特性,例如带有Hooks的函数组件。此外,该项目还使用了几个自定义的轻量级 UI 组件,包括模态框和日期选择器等。

在这里插入图片描述

项目链接:https://github.com/oldboyxx/jira_clone

8,react-netease-music

react-netease-music是一个基于 React+TypeScript 的高仿网易云 Mac 客户端播放器。用到的技术有React Hook、CSS Modules、Webpack、Graphql 等技术,而播放的数据使用的是NeteaseCloudMusicApi。

功能上,该项目实现了登录/登出、发现页、每日歌曲推荐页、全部歌单页、最新音乐页、歌单详情页、音乐播放详情页、播放记录、搜索、创建和收藏的歌单列表等功能。
在这里插入图片描述

项目链接:https://github.com/uniquemo/react-netease-music

9,stackoverflow-clone

Stack Overflow是一个与程序相关的IT技术问答网站,用户可以在网站免费提交问题,浏览问题,索引相关内容。stackoverflow-clone是 Stackoverflow 的一个简化版的全栈克隆开源项目,使用了 ReactJs、NextJs、Storybook、PostCSS、NodeJs、Express、MongoDB、Mongoose 等技术实现。
在这里插入图片描述

项目链接:https://github.com/salihozdemir/stackoverflow-clone

10,spotify-clone-client

Spotify是国外的一个正版流媒体音乐服务平台,提供免费和付费的音乐服务。spotify-clone-client是一个 Spotify Web 播放器的前端克隆项目,使用 React、react-router-dom、axios 等技术实现。

在这里插入图片描述

项目链接:https://github.com/JL978/spotify-clone-client

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/29128.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LPWA物联网通信

物联网LPWA是物联网中的无线通信技术之一。 根据物联网无线通信技术的覆盖距离,大致可分为两类:一类是短距离通信技术,包括蓝牙(蓝牙);NFC,Zigbee、WIFI、NFC,主要用于室内智能家庭、消费电子等场景;另一种…

C++异常

21 C异常 21.1 什么时候会发生异常 1.打开一个不存在的文件 2.请求存储空间失败 3.数组越界等等 21.2 使用abort()函数 1.包含在cstdlib头文件中,包含在std命名空间中 2.当调用abort()函数时,会引发异常并中断程序(Visual Studio 2019);…

【PlasticSCM Could Edition】新版本云托管浅试 (与踩一些坑)

【PlasticSCM Could Edition】新版本云托管浅试前言尝试对比前言 UnityHub 3.3.0-c7 中,下载了一个 2021LST 的版本,毕竟为了做毕设,用 2020LST 的感觉老了点… 然后新建了一个项目,勾选使用 版本控制 ,但是报错 那先…

【附源码】计算机毕业设计JAVA药品管理系统

【附源码】计算机毕业设计JAVA药品管理系统 目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: JAVA mybati…

STM32CubeMX学习笔记(48)——USB接口使用(MSC基于外部Flash模拟U盘)

一、USB简介 USB(Universal Serial BUS)通用串行总线,是一个外部总线标准,用于规范电脑与外部设备的连接和通讯。是应用在 PC 领域的接口技术。USB 接口支持设备的即插即用和热插拔功能。USB 是在 1994 年底由英特尔、康柏、IBM、…

HTTP —— HTTP 响应详解, 构造 HTTP 请求

JavaEE传送门JavaEE 【前端】JavaScript —— WebAPI HTTP —— HTTP 协议中的细节(超详细!!) 目录HTTP 响应详解认识 "状态码"状态码小结认识响应 "报头" headerContent-Type认识响应 "正文" body构造 HTTP 请求form 表单ajaxpostmanHTTP 响应…

API接口怎么使用(教你使用api接口获取数据)

API是应用程序的开发接口,在开发程序的时候,我们有些功能可能不需要从到到位去研发,我们可以拿现有的开发出来的功能模块来使用,而这个功能模块,就叫做库(libary)。比如说:要实现数据传输的安全&#xff0c…

【Linux】常见指令汇总

每个优秀的人,都有一段沉默的时光。 那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。 文章目录一、xshell的介绍操作系统1.1 xshell1.2 操作系统二、Linux下基本指令2.1 ls(显示当前目录下的文件列表&#xff…

【IVIF:引入注意力机制:GAN:双鉴别器】

AttentionFGAN: Infrared and Visible Image Fusion Using Attention-Based Generative Adversarial Networks ( AttentionFGAN:使用基于注意的生成对抗网络进行红外和可见光图像融合) 在本论文中,我们将多尺度注意机制集成到GAN…

redis优化与一些问题

文章目录优化采用SSD硬盘-提升磁盘读写的速度控制 redis 的内存在10G以内,防止fork耗时太长fork 注意事项设置内存淘汰策略vm.overcommit_memory1尽可能地使用 hash 哈希存储参数调优swapinessulimitTCP backlog客户端缓冲优化碎片优化问题缓存与数据库数据不一致将…

换个地方写helloworld

1、Linux中I/O讲解 今天,我们重新学习C语言的基础,特别是I/O口的讲解。 所谓标准 I/O 库则是标准 C 库中用于文件 I/O 操作(譬如读文件、写文件等)相关的一系列库函数的集合,通常标准 I/O 库函数相关的函数定义都在头…

实时输出Java8 HashMap数据结构

看过 Java 8 HashMap 源码的知道底层数据结构是数组、链表和红黑树实现的,从Debug调试或者序列化输出的都是K,V值,没法直观的看到上述的数据结构,为了直观的看到数据结构存储方面的变化,本文通过动图演示HashMap的结构变化。 为了…

【6 - 完结】Sql Server - 郝斌(identity、视图、事务、索引、存储过程、触发器、游标、TL_SQL)

课程地址:数据库 SQLServer 视频教程全集(99P)| 22 小时从入门到精通_哔哩哔哩_bilibili ​ 目录 identity(主键自动增长,用户不需要为identity修饰的主键赋值) 用法 如何重新设置identity字段的值 如…

从React源码来学hooks是不是更香呢

本文将讲解 hooks 的执行过程以及常用的 hooks 的源码。 hooks 相关数据结构 要理解 hooks 的执行过程,首先想要大家对 hooks 相关的数据结构有所了解,便于后面大家顺畅地阅读代码。 Hook 每一个 hooks 方法都会生成一个类型为 Hook 的对象&#xff…

wpf布局学习二 wpf xaml 与android xml界面对比, C++图片旋转与缩放好复杂放弃

弄不明白的事&#xff0c;还是不要去做。 没懂清楚原理&#xff0c;不要尝试去修改。浪费时间。 wpf布局学习二 <Window x:Class"WpfM20UpdateFW.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://sch…

使用adb shell 命令接收串口发送过来的16进制数据 或者 发送16进制数据

首先执行 adb root Adb shell 找到你要发送或者接收串口数据的设备 如果我们再android设备上调试串口的时候&#xff0c;有时我们需要使用adb shell命令&#xff0c;假设我们使用串口发送的数据是16进制&#xff0c;那么使用cat 这个设备节点&#xff0c;有可能显示的是乱码例…

第6章 循环神经网络

系列文章目录 第1章 绪论 第2章 机器学习概述 第3章 线性模型 第4章 前馈神经网络 第5章 卷积神经网络 第6章 循环神经网络 第7章 网络优化与正则化 第8章 注意力机制与外部记忆 第9章 无监督学习 第10章 模型独立的学习方式 第11章 概率图模型 第12章 深度信念网络 第13章 深…

新相微在科创板过会:计划募资约15亿元,2022年业绩开始下滑

11月22日&#xff0c;上海证券交易所科创板披露的信息显示&#xff0c;上海新相微电子股份有限公司&#xff08;下称“新相微”&#xff09;获得上市委会议通过。据贝多财经了解&#xff0c;新相微于2022年6月28日在科创板递交招股书。 本次冲刺科创板上市&#xff0c;新相微计…

企业架构LB-服务器的负载均衡之LVS实现

01_学习目标和内容 02_LVS介绍和ipvsadm管理工具安装 03_LVS常见工作方式和调度算法介绍 04_需要知道的几个概念名词 05_LVS-NAT方式实现的流程原理 06_配置NAT模式准备工作 在centos中建立网卡配置信息 07_NAT模型RS真实服务器的网关配置 08_NAT模型DR调度服务器规则和转发配…

2010年数学二真题复盘

高数部分 选择题 第一题 思路分析:本要主要考察间断点的概念与极限运算. ☆首先无穷间断点属于第二类间断点,则至少有一个点不存在,要么没定义,要么就是在某个点的左极限或者右极限上趋于无穷,可以先化简,找一些分母趋于0的,那么就是无穷间断点了。 第二题 思路分…