大家好，我是若川。持續組織了近一年的源碼共讀活動，感興趣的可以?點此加我微信ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信進群。
今天來分享 Github 上 8 個很棒的 React 項目，希望能通過學習這些項目源碼，幫助大家更好地理解 React，編寫更優雅的 React 代碼！
概覽：
React Tetris： 俄羅斯方塊
Kutt.it： URL 縮短器
Win11 in React： Web 版 Windows 11
JoL-player： 視頻播放器
Take Note： 筆記應用
Fiora： 聊天應用
Todoist clone： 克隆版 Todoist
Jira Clone： 克隆版 Jira
1. React Tetris
React Tetris 是一個使用 React、Redux、Immutable 制作的俄羅斯方塊游戲。它是一個非常不錯的 React 練手項目，小小的“方塊”還是有很多的細節可以優化和打磨。項目的官方介紹中還有一些作者開發這個項目時的一些想法（中文），值得借鑒。
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 等技術構建。
Github：https://github.com/thedevs-network/kutt
3. Win11 in React
制作這個開源項目的目的是希望使用 React、CSS (SCSS) 和 JS 等標準 Web 技術在 Web 上復制 Windows 11 桌面體驗。作者大概花了兩周的時間做出了這個網頁版的 Windows 11，在瀏覽器上就可以體驗 Windows 11 系統的操作。
Github：https://github.com/blueedgetechno/win11React
4. JoL-player
JoL-player 是一個簡潔，美觀，功能強大的 React 播放器。它通過了開箱即用的高質量 React 組件，使用 TypeScript 開發，提供完整的類型定義文件，支持國際化語言，強大的API和功能，并且支持React 18+版本。
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 等技術創建。
Github：https://github.com/taniarascia/takenote
6. Fiora
Fiora 是一個有趣的開源聊天應用程序。它是基于Node.js、React和socket.io技術開發的。它包含了后端、前端、Android 和 iOS 應用程序，支持 Windows / Linux / macOS 系統。該應用支持添加好友、群聊、設置主題、消息提醒、多種消息類型等。
Github：https://github.com/yinxin630/fiora
7. Todoist clone
Todoist clone 使用 create-react-app 作為基礎構建，使用的技術是 React（自定義 Hooks、context）、Firebase 和 React 測試庫。除此之外，還使用 SCSS (CSS) 并遵循 BEM 命名方法來設置應用程序的樣式。作者希望通過這個項目讓人們更好地理解React。
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 組件，包括模態框和日期選擇器等。
Github：https://github.com/oldboyxx/jira_clone
·················?若川簡介?·················
你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經堅持寫了8年，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助4000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。
掃碼加我微信 ruochuan12、拉你進源碼共讀群
今日話題
目前建有江西|湖南|湖北?籍 前端群，想進群的可以加我微信 ruochuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持
