React 项目： 5 个值得学习的 React 应用示例
TMDb 电影搜索
🆕 升级版现已推出！
箱子👕👖📦
JavaScript 能带我们走多远？
React Slack 克隆
我第一次接触编程是在14岁，当时我正准备创建我的第一个创业项目。我完全不知道从何入手，最后选择了基于一个名为OpenCart的流行开源电商平台进行开发。经过长时间的努力和无数个不眠之夜，我终于发布了创业项目的第一个版本，用户可以在上面交易和出售二手DVD。几个版本之后，我借鉴了OpenCart代码库中的所有最佳实践，创建了一个定制平台。如果没有可以借鉴的范例，我根本不可能做到这一点。
在这篇博文中，我收集了 5 个使用 React 构建的项目示例，可以帮助每一位 React 初学者提升技能。有时候，教程节奏太慢或不够深入，而你可能更想探索一个“真实”的代码库。所有列出的项目都带有自定义后端或使用开放 API 获取数据，因此你无需使用模拟数据。祝你学习愉快！
TMDB 电影数据库
作为一名影迷，我经常在 IMDb 上查找影视作品或演员信息，但可惜的是，他们没有提供开放的 API。这时，电影数据库 (TMDb) 就派上了用场，它提供了一个非常棒的开源 API，包含了绝大多数电影和电视剧的信息。对于业余项目或电影爱好者来说，TMDb 都是一个很受欢迎的 API。Stephen Kempin的这个项目展示了如何基于这个 API 构建一个电影数据库应用程序，并使用 React 和 Twitter 的 typeahead.js 库来实现自动搜索建议功能。
响应式 React 电影数据库 (TMDb) 应用
电子商务入门
近年来，食品、剃须用品或服装的订阅服务变得非常流行。这款开源产品可以让你创建自己的订阅服务，而且它是全栈式的！（！！！）Crate 提供了一个使用 React 构建的前端，以及一个基于 Node.js 和 GraphQL 的后端。如果你渴望创办自己的公司，并且正在寻找学习如何模块化代码或集成前后端的优质资源，那么绝对应该看看这个代码库。他们甚至使用了StoryBook，因此你可以查看项目中使用的所有组件。
👕 👖 📦 这是一个使用 Node、Express、React、React Native、Redux 和 GraphQL 构建的示例 Web 和移动应用程序。它是 stitchfix.com / krate.in 的一个非常基础的复刻版（允许用户按月订阅时尚服装和配饰）。
🆕 升级版现已推出！
现已推出升级版，采用全栈单体仓库架构，基于事件驱动，高度可扩展，并使用 Node.js、React、Redis、MongoDB 和 Docker 构建。请访问github.com/atulmy/fullstack-event-driven-architecture查看详情。
箱子👕👖📦
每月订阅时尚服饰和配饰。
- 使用 Node、GraphQL、Express、Sequelize（MySQL）和 JWT 身份验证构建的API
- 使用 React 和 Redux 构建的Web 应用，支持服务端渲染 (SSR)，对搜索引擎友好。
- 使用 React Native 构建的移动（Android 和 iOS）原生应用
- 使用 ES6+ 编写，并使用 Babel 和 Webpack 打包。
- 采用 Adobe Experience Design 设计。点击此处预览。
特征
- 模块化且易于扩展的代码结构
- 重视开发者经验
- UI 组件位于单独的文件夹中，可以轻松替换为您喜欢的 UI 框架。
- 为 React Native 构建响应式 UI，以支持移动设备和平板电脑。
- 带有关联的 GraphQL schema
- 数据库迁移和数据填充
- 使用 GraphQL API 和 JSON Web Tokens 进行用户身份验证
- …
Apple Music 克隆版
你经常在 Apple Music、Spotify 或 Google 上听音乐吗？这个项目是第一个项目的克隆版，甚至还自带一个可用的后端。想自己搭建后端吗？这里有详细的教程。前端使用了 React，并结合了 Redux 和 Redux Thunk，为你提供了一个丰富的示例，帮助你快速上手 Redux 进行状态管理。目前项目还不支持 React Hooks，不妨把它当作一个挑战，看看你能不能重构一下 😎。
一个完全使用 React 和 Redux 构建的音乐流媒体服务。
由Tanner Villarete建造
欢迎在领英上关注我！我即将毕业 ;)
JavaScript 能带我们走多远？
结果证明，我做得相当不错。这个网页应用是我尝试模仿苹果iOS音乐应用的成果，我觉得我已经做得相当接近了！
点击此处查看实时演示
我大学四年级了，看到自己在编程的各个方面都取得了如此大的进步，并且还在不断进步，真是太棒了。
后端 API
API托管在树莓派上，并且是私有的（但如果您尝试访问仍然可以访问），以避免过载。如果您有兴趣构建自己的后端来接入此工具，以下是我的数据库和端点结构：
数据库
共有六列必填项：
name歌曲名称artist艺术家姓名album专辑名称track： 这…
Slack 克隆版
如果你在公司担任开发人员，那么你很可能一直在使用 Slack 作为沟通工具。还有什么比创建一个你每天都在使用的工具的克隆版本更好的学习方式呢？Luke Jackson开发的这个 Slack 克隆版本使用了 React 和热门产品ChatKit，让你可以轻松创建高级聊天应用程序。你可以申请 API 密钥免费开始使用。发现任何 bug 并愿意为开源项目做贡献吗？这个代码库里有一些适合初学者的开放 issue。
Hacker News 克隆版
Hacker News不仅是编程和技术新闻的绝佳来源，也是开发者们耳熟能详的经典平台，经常被用作展示全新前端框架或语言的演示平台。Clinton D'Annolfo的这个项目就采用了 React 和 GraphQL 作为前端框架，并搭配运行在 Node.js 和 GraphQL 上的服务器。此外，为了支持服务器端渲染 (SSR)，该项目还额外添加了Next.js。
使用 React 和 GraphQL，以通用 JavaScript 重写了 Hacker News 克隆版。
Hacker News 克隆 React/GraphQL
本项目是使用 React 和 GraphQL，通过通用 JavaScript 重写的 Hacker News 克隆版。它旨在作为一个示例或样板，帮助您使用生产就绪的技术构建项目。
在线演示
概述
特色
-
React - (用户界面框架)
-
GraphQL - (Web 数据 API)
-
Apollo - (GraphQL 客户端/服务器)
-
接下来——（路由、SSR、热模块重载、代码分割、构建工具使用 Webpack）
-
TypeScript - （静态类型）
-
Webpack - （模块打包器）
-
PostCSS - (CSS 处理)
-
Node.js - (Web 服务器)
-
Express - (Web 应用服务器)
-
护照 - （认证）
-
ESLint - （编码最佳实践/代码高亮显示）
-
Jest - （测试）
-
Docker - （容器部署）
-
可选 - Yarn 或 Pnpm 包管理器 - （更好的依赖项）
好处
前端
- 声明式用户界面 - (
react)
- 静态类型（
typescript）
- GraphQL 片段共置 - (
@apollo/client)
- 预取页面资源 - (
next)
服务器
你觉得这些项目怎么样？希望它们能帮助你提升 React 技能，别忘了留下你的反馈意见哦😄！
文章来源：https://dev.to/gethackteam/5-examples-of-react-applications-to-learn-from-275b
