大家好，我是Echa.
今天來(lái)分享 Github 上 8 個(gè)很棒的 React 項(xiàng)目，希望能通過(guò)學(xué)習(xí)這些項(xiàng)目的源碼，幫助大家更好地理解 React，編寫更優(yōu)雅的 React 代碼！
概覽：
- React Tetris： 俄羅斯方塊
- Kutt.it： URL 縮短器
- Win11 in React： Web 版 windows 11
- JoL-player： 視頻播放器
- Take Note： 筆記應(yīng)用
- Fiora： 聊天應(yīng)用
- Todoist clone： 克隆版 Todoist
- JIRA Clone： 克隆版 Jira
React Tetris 是一個(gè)使用 React、Redux、Immutable 制作的俄羅斯方塊游戲。它是一個(gè)非常不錯(cuò)的 React 練手項(xiàng)目，小小的“方塊”還是有很多的細(xì)節(jié)可以優(yōu)化和打磨。項(xiàng)目的官方介紹中還有一些作者開發(fā)這個(gè)項(xiàng)目時(shí)的一些想法（中文），值得借鑒。
Github：https://github.com/chvin/react-tetris
2. Kutt.it
Kutt 是一個(gè)現(xiàn)代的 URL 縮短器，支持自定義域。縮短網(wǎng)址、管理鏈接并查看點(diǎn)擊率統(tǒng)計(jì)信息。支持自定義域名，設(shè)置鏈接密碼和描述，縮短URL的私人統(tǒng)計(jì)信息，查看、編輯、刪除和管理鏈接，RESTful API等。使用Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、redis 等技術(shù)構(gòu)建。
Github：https://github.com/thedevs.NETwork/kutt
3. Win11 in React
制作這個(gè)開源項(xiàng)目的目的是希望使用 React、css (SCSS) 和 JS 等標(biāo)準(zhǔn) Web 技術(shù)在 Web 上復(fù)制 Windows 11 桌面體驗(yàn)。作者大概花了兩周的時(shí)間做出了這個(gè)網(wǎng)頁(yè)版的 Windows 11，在瀏覽器上就可以體驗(yàn) Windows 11 系統(tǒng)的操作。
Github：https://github.com/blueedgetechno/win11React
4. JoL-player
JoL-player 是一個(gè)簡(jiǎn)潔，美觀，功能強(qiáng)大的 React 播放器。它通過(guò)了開箱即用的高質(zhì)量 React 組件，使用 TypeScript 開發(fā)，提供完整的類型定義文件，支持國(guó)際化語(yǔ)言，強(qiáng)大的API和功能，并且支持React 18+版本。
Github：https://github.com/lgf196/JoL-player
5. Take Note
TakeNote 是一款 Web 筆記應(yīng)用，它是一個(gè)沒(méi)有數(shù)據(jù)庫(kù)的靜態(tài)站點(diǎn)，不會(huì)將筆記同步到云端。筆記會(huì)暫時(shí)保存在本地存儲(chǔ)中，可以以 zip 格式下載 Markdown 格式的所有筆記。該應(yīng)用支持搜索筆記、多光標(biāo)編輯、鏈接筆記、語(yǔ)法高亮、鍵盤快捷鍵、拖放操作、Markdown 預(yù)覽等功能。
TakeNote 使用 TypeScript、React、Redux、Node、Express、Codemirror、Webpack、Jest、Cypress、Feather Icons、ESLint 和 Mousetrap 等技術(shù)創(chuàng)建。
Github：https://github.com/taniarascia/takenote
6. Fiora
Fiora 是一個(gè)有趣的開源聊天應(yīng)用程序。它是基于Node.js、React和socket.io技術(shù)開發(fā)的。它包含了后端、前端、Android 和 IOS 應(yīng)用程序，支持 Windows / linux / macOS 系統(tǒng)。該應(yīng)用支持添加好友、群聊、設(shè)置主題、消息提醒、多種消息類型等。
Github：https://github.com/yinxin630/fiora
7. Todoist clone
Todoist clone 使用 create-react-App 作為基礎(chǔ)構(gòu)建，使用的技術(shù)是 React（自定義 Hooks、context）、Firebase 和 React 測(cè)試庫(kù)。除此之外，還使用 SCSS (CSS) 并遵循 BEM 命名方法來(lái)設(shè)置應(yīng)用程序的樣式。作者希望通過(guò)這個(gè)項(xiàng)目讓人們更好地理解React。
Github：https://github.com/karlhadwen/todoist
8. Jira Clone
JIRA 是一個(gè)項(xiàng)目與事務(wù)跟蹤工具，被廣泛應(yīng)用于缺陷跟蹤、客戶服務(wù)、需求收集、流程審批、任務(wù)跟蹤、項(xiàng)目跟蹤和敏捷管理等工作領(lǐng)域。而 Jira Clone 是使用 React 開發(fā)的 Jira 的簡(jiǎn)化版。與 Jira 一樣，該項(xiàng)目也提供交互式用戶界面，但代碼更簡(jiǎn)單。該項(xiàng)目是使用 React 以及 webpack、Node.js、ESLint、styled-components 和 cypress 構(gòu)建的。該應(yīng)用使用最新的 React 特性，例如帶有Hooks的函數(shù)組件。此外，該項(xiàng)目還使用了幾個(gè)自定義的輕量級(jí) UI 組件，包括模態(tài)框和日期選擇器等。
Github：https://github.com/oldboyxx/jira_clone
