Github上8个很棒的React项目

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以 点此加我微信ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。

今天来分享 Github 上 8 个很棒的 React 项目，希望能通过学习这些项目源码，帮助大家更好地理解 React，编写更优雅的 React 代码！

概览：

  1. React Tetris： 俄罗斯方块

  2. Kutt.it： URL 缩短器

  3. Win11 in React： Web 版 Windows 11

  4. JoL-player： 视频播放器

  5. Take Note： 笔记应用

  6. Fiora： 聊天应用

  7. Todoist clone： 克隆版 Todoist

  8. Jira Clone： 克隆版 Jira

1. React Tetris

React Tetris 是一个使用 React、Redux、Immutable 制作的俄罗斯方块游戏。它是一个非常不错的 React 练手项目，小小的“方块”还是有很多的细节可以优化和打磨。项目的官方介绍中还有一些作者开发这个项目时的一些想法（中文），值得借鉴。

d993bcacadcf04f9ef55d281c422bfc4.gif

Github：https://github.com/chvin/react-tetris

2. Kutt.it

Kutt 是一个现代的 URL 缩短器，支持自定义域。缩短网址、管理链接并查看点击率统计信息。支持自定义域名，设置链接密码和描述，缩短URL的私人统计信息，查看、编辑、删除和管理链接，RESTful API等。使用Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等技术构建。

69a894388777785ece8a76680d14e915.png

Github：https://github.com/thedevs-network/kutt

3. Win11 in React

制作这个开源项目的目的是希望使用 React、CSS (SCSS) 和 JS 等标准 Web 技术在 Web 上复制 Windows 11 桌面体验。作者大概花了两周的时间做出了这个网页版的 Windows 11，在浏览器上就可以体验 Windows 11 系统的操作。

fc9a6deb9bb5ef4d1c524ad3ec1d6347.png

Github：https://github.com/blueedgetechno/win11React

4. JoL-player

JoL-player 是一个简洁，美观，功能强大的 React 播放器。它通过了开箱即用的高质量 React 组件，使用 TypeScript 开发，提供完整的类型定义文件，支持国际化语言，强大的API和功能，并且支持React 18+版本。

1bbe461b74a3e184efeaad7b00d5e1fc.png

Github：https://github.com/lgf196/JoL-player

5. Take Note

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

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

f61ddc48d309212104df73e720ca754a.png

Github：https://github.com/taniarascia/takenote

6. Fiora

Fiora 是一个有趣的开源聊天应用程序。它是基于Node.js、React和socket.io技术开发的。它包含了后端、前端、Android 和 iOS 应用程序，支持 Windows / Linux / macOS 系统。该应用支持添加好友、群聊、设置主题、消息提醒、多种消息类型等。

f54a07248439af37a8951f1a1c32303d.png

Github：https://github.com/yinxin630/fiora

7. Todoist clone

Todoist clone 使用 create-react-app 作为基础构建，使用的技术是 React（自定义 Hooks、context）、Firebase 和 React 测试库。除此之外，还使用 SCSS (CSS) 并遵循 BEM 命名方法来设置应用程序的样式。作者希望通过这个项目让人们更好地理解React。

6b8ec42cd8fae71f5c398f26ee0d2087.png

Github：https://github.com/karlhadwen/todoist

8. Jira Clone

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

8b61bdf21547687b9bfb4a9af9046014.png

Github：https://github.com/oldboyxx/jira_clone

689ebf96e8b5aace680db269c18a28d3.gif

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经坚持写了8年，点击查看年度总结。
同时，最近组织了源码共读活动，帮助4000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。

014d0580e95e192118f49ca3cb45c521.png

扫码加我微信 ruochuan12、拉你进源码共读群

今日话题

目前建有江西|湖南|湖北 籍 前端群，想进群的可以加我微信 ruochuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

屏幕广播系统_如何设计系统，而不是屏幕

屏幕广播系统_如何设计系统，而不是屏幕

屏幕广播系统重点 (Top highlight)Over the past several decades, rapid advances in technology have dramatically enhanced the digital customer experience and their expectations. In the face of these heightened customer expectations, the role of the Interactio…
阅读更多...
Umi 4 发布啦

Umi 4 发布啦

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以 点此加我微信ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…
阅读更多...
Win32汇编--加载菜单资源

Win32汇编--加载菜单资源

基本上的窗口都会有一个菜单,现在就来看看Win32汇编中是如何加载菜单的: 1>在工程中添加新的菜单资源 2>双击新添加的菜单资源进行编辑 3>菜单栏:Make->Compile RC来编译资源文件 4>导出资源中的ID号并写到数据段的.const中 5>下面是完整的源代码供参考:(工程…
阅读更多...
Futura：从纳粹主义到月球-甚至更远

Futura：从纳粹主义到月球-甚至更远

Reading the title of this article, the first thing that will come to mind for some is the funny expression of Buzz Lightyear — the Disney character — when he stretches his arms outwards and utters the famous phrase “To infinity and beyond!” before jump…
阅读更多...
如何碎片化时间高效学习前端~

如何碎片化时间高效学习前端~

前端技术日新月异，发展迅速，作为一个与时俱进的前端工程师，需要不断的学习。这里强烈推荐几个前端开发工程师必备的优质公众号，希望对你有所帮助。大家可以像我一样，利用碎片时间阅读这些公众号的文章。前端从进阶到入…
阅读更多...
爬取淘宝定价需要多久时间_如何对设计工作进行定价—停止收​​取时间并专注于价值

爬取淘宝定价需要多久时间_如何对设计工作进行定价—停止收​​取时间并专注于价值

爬取淘宝定价需要多久时间Pricing creative work is a new concept for most freelancers who are starting their business. We are used to being paid for our time, either by an hourly wage or an annual salary. It makes it simple to quantify how much value we thin…
阅读更多...
OEA 框架中集成的 RDLC 报表介绍

OEA 框架中集成的 RDLC 报表介绍

之前 OEA 一直用着一个 Delphi 开发的报表，所以两年来我一直就想在 OEA 中构建一个纯 .NET 的报表模块，但是一想到要开发复杂的报表引擎和设计器就觉得麻烦。所以这事一直拖着。最近开始研究一些成熟的报表引擎，经过对比，还是发现…
阅读更多...
昆虫繁殖_“专为昆虫而生” –好奇！

昆虫繁殖_“专为昆虫而生” –好奇！

昆虫繁殖重点 (Top highlight)The industry is changing towards a more agile approach and jacks of one trade can go extinct sooner than we think.该 行业正在发生变化 朝着更加灵活的方法和一个贸易的插Kong可以去灭绝快于我们的想法。 I’ve read a quote in a book r…
阅读更多...
ECMAScript 2022 正式发布，有哪些新特性？

ECMAScript 2022 正式发布，有哪些新特性？

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以 点此加我微信ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…
阅读更多...
字母框如何影响UI内容的理解

字母框如何影响UI内容的理解

What is your earliest memory of reading? Mine’s reading comics. I preferred films over books, I still do, but I seemed to have a fascination for comics. The experience of reading a comic, to me, was somewhere between watching a film and reading a novel, …
阅读更多...
Vue2.7 本周发布？支持组合式 API、setup、css v-bind

Vue2.7 本周发布？支持组合式 API、setup、css v-bind

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以 点此加我微信ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…
阅读更多...
马上7月，诚邀新老朋友参加近5000人的源码共读活动！

马上7月，诚邀新老朋友参加近5000人的源码共读活动！

大家好，我是若川。最近有不少新朋友关注我。诚邀各位新老读者朋友参加源码共读活动。活动介绍可以点击文末的阅读原文。https://juejin.cn/post/7079706017579139102很多人关注我的公众号是因为我写了一系列源码文章，想参与源码共读活动。虽然现在有近50…
阅读更多...
hashmap 从头到尾_如何从头到尾设计一个简单的复古徽标

hashmap 从头到尾_如何从头到尾设计一个简单的复古徽标

hashmap 从头到尾在纸上素描粗糙的概念 (Sketch rough concepts on paper) Start by sketching out a few ideas for your logo on paper. These don’t have to be detailed drawings. Instead, it’s about getting your ideas out quickly. In this early stage, you can ex…
阅读更多...
Vue 2.7 正式发布，代号为 Naruto

Vue 2.7 正式发布，代号为 Naruto

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以 点此加我微信ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…
阅读更多...
js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？

js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？

js设置css色相旋转Hue rotation is often an easy way to change the appearance of a plot or figure without the need to create a new colour bar. However, when dealing with colourblindness, it is important to ensure that the spacing between colours is sufficien…
阅读更多...
ux设计中的各种地图_在UX设计中使用阿拉伯语

ux设计中的各种地图_在UX设计中使用阿拉伯语

ux设计中的各种地图Last year I got to work on an app that was ultimately going to be deployed globally in every market and every language including RTL (Right-to-Left) languages — with a specific focus on Arabic.去年，我开始致力于开发一个应用程序…
阅读更多...
如何为前端项目一键自动添加eslint和prettier的支持

如何为前端项目一键自动添加eslint和prettier的支持

本文来自读者那个曾经的少年回来了 写的源码共读35期笔记文章，授权投稿，写的真好。本文参加了由公众号若川视野 发起的每周源码共读活动，点此加我微信 ruochuan12 了解详情一起参与。本文属于源码共读第35期 | 为 vite 项目自动添加 eslint 和…
阅读更多...
极端原理_为极端而设计

极端原理_为极端而设计

极端原理*You can also read this article in German here.*您也可以 在此处 阅读 德语文章 。 In this article I’m going to draw on the Design thinking concept of designing for extreme users and I will argue that designing for extreme users can be considered a…
阅读更多...
当CV工程师碰到了拷贝粘贴的需求——useClipboard的使用及源码解析

当CV工程师碰到了拷贝粘贴的需求——useClipboard的使用及源码解析

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以 点此加我微信ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。…
阅读更多...
ux和ui_从UI切换到UX设计

ux和ui_从UI切换到UX设计

ux和uiI still remember those days, when I was a soon-to-be graphic design graduate who started to question what my future will be. At that time, I realized that I loved graphic design, but I wasn’t sure if I enjoyed doing it. Creating logos, posters, broc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023