撰写更典雅的 React 编码!

lxf2023-04-19 18:02:01

不断写作,加速成长!这个是我参加「AdminJS · 6 月更文考验」第 6 天,查看更多活动规则


今天就来共享 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 练习新项目,小小“格子”还是有很多小细节能够优化打磨抛光。工程项目的官方介绍中还有一些创作者开发设计这样的项目后的一些想法(汉语),值得学习。

撰写更典雅的 React 编码!

Github:github.com/chvin/react…

2. Kutt.it

Kutt 是一个现代化的 URL 减少器,适用自函数定义域。缩短网址、管理方法连接并查询点击量统计数据。适用自定网站域名,设定连接登陆密码和叙述,减少URL的私人统计数据,查询、编写、删掉及管理连接,RESTful API等。应用Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等新技术搭建。

撰写更典雅的 React 编码!

Github:github.com/thedevs-net…

3. Win11 in React

制做这一开源软件的目的在于期待应用 React、CSS (SCSS) 和 JS 等规范 Web 技术的应用 Web 上拷贝 Windows 11 桌面上感受。创作者大约花掉了两周的时间作出了这一电脑版网页的 Windows 11,在网页页面就可以享受到Windows 11系统软件的操作。

撰写更典雅的 React 编码!

Github:github.com/blueedgetec…

4. JoL-player

JoL-player 是一个简约,美观大方,功能强大 React 播放软件。它已通过开箱即用的高品质 React 部件,应用 TypeScript 开发设计,给予完整的定义方法文档,适用国际化语言,强悍的API和结构,同时支持React 18 版本号。

撰写更典雅的 React 编码!

Github:github.com/lgf196/JoL-…

5. Take Note

TakeNote 是一款 Web 笔记应用,它是一个并没有数据库静态数据网站,不容易将手记同步到云空间。手记会临时储存在本地存储中,可以通过 zip 文件格式免费下载 markdown 格式全部手记。该使用适用检索手记、多鼠标光标编写、连接手记、语法高亮、快捷键、拖拽实际操作、Markdown 浏览等服务。

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

撰写更典雅的 React 编码!

Github:github.com/taniarascia…

6. Fiora

Fiora 是一个有意思的开源系统聊天应用程序流程。这是根据Node.js、React和socket.io科研开发的。这其中包括了后面、前面、Android 和 iOS 应用软件,适用 Windows / Linux / macOS 系统软件。该使用适用加好友、微信群、设置主题、消息提示、多种多样消息类型等。

撰写更典雅的 React 编码!

Github:github.com/yinxin630/f…

7. Todoist clone

Todoist clone 应用 create-react-app 作为支撑搭建,所使用的理论是 React(自定 Hooks、context)、Firebase 和 React 测试库。此外,还应用 SCSS (CSS) 并遵照 BEM 命名方式来调整应用软件的样式。创作者希望用这样的项目使人们更好地了解React。

撰写更典雅的 React 编码!

Github:github.com/karlhadwen/…

8. Jira Clone

JIRA 是一个项目与事务管理追踪专用工具,广泛应用于缺点追踪、顾客服务、需求收集、流程审批、每日任务追踪、项目跟踪和灵巧等方面的工作行业。而 Jira Clone 是采用 React 研发的 Jira 的简易版。与 Jira 一样,此项目也提供互动式操作界面,但编码更方便。此项目是采用 React 及其 webpack、Node.js、ESLint、styled-components 和 cypress 搭建的。该应用使用最新 React 特点,比如含有Hooks的函数公式部件。除此之外,此项目还采用了好多个自定的轻量 UI 部件,包含模态框和日期选择符等。

撰写更典雅的 React 编码!

Github:github.com/oldboyxx/ji…