要对使用 React 充满信心，您需要构建真实世界的项目。
但是，2024年哪些项目值得建设？
我整理了七个项目的清单，我认为这些项目非常适合成为一名自信的 React 开发人员，从简单到复杂的应用程序。
这将为你提供一些关于构建哪些应用程序的灵感。
我还将向您介绍我将用于构建每个项目的整个技术堆栈，以及如何逐步构建每个项目的摘要。
让我们开始吧！
🤖 ChatGPT AI 应用程序
随着 ChatGPT 变得越来越强大，您可以使用 ChatGPT API 构建令人印象深刻的应用程序。
这是一个很好的入门应用程序，因为对于大多数应用程序，您需要做的就是向 ChatGPT API 发送文本或图像，给它一些指示，它会向您发送回复。
您可以使用 ChatGPT API 来构建一个文本摘要器、一个翻译应用程序、一个解释代码片段作用的应用程序。可能性真的是无穷无尽的。
我构建的一个简单的 ChatGPT 驱动的 AI 应用程序是“绘制 UI”，您可以在其中绘制用户界面的快速模型，将其发送到 ChatGPT，它实际上会将根据您的屏幕截图生成的 HTML 发回！
我将使用 Next.js 以及 npm 包来构建此应用程序，它允许您在 React 应用程序中绘制图片。tldraw
接下来，将该屏幕截图发送到后端的 Next.js 路由处理程序，该处理程序使用 openai npm 包与 ChatGPT 通信，然后将 HTML 代码发回给您。
👨 💻 个人网站
如果您还没有准备好构建非常复杂的东西，那么个人网站是一个很好的起点。你可以用它来适应在 React 中使用 JSX 和 CSS。
了解如何创建基本组件、添加图像、链接到您的社交媒体资料等。当您开始构建更多项目时，您可以在您的网站上展示它们。
个人网站的伟大之处在于您可以根据需要扩展它。您可以添加自己的集成博客，或者您可以谈论您学到的东西或您目前正在做的事情。
为了建立你的个人网站，我建议使用Next.js因为它使构建静态呈现的单个页面变得如此容易，这对SEO有好处。
对于图像，您可以使用集成库。对于制作博客，我强烈建议使用 ContentLayer 包 ，您可以使用它以 markdown 或 MDX 的形式编写所有博客文章。next/image
ContentLayer 很棒，因为它使您的 Markdown 内容类型安全，因此您知道每篇博客文章包含哪些数据。这也是在 React 中开始使用 TypeScript 的好方法，尽管一开始它可能看起来很吓人。
💬 聊天应用程序
一个真正动态的 Web 应用程序将是一个聊天应用程序，您可能每天都会使用。构建您熟悉的应用程序是件好事，因为它可以让您很好地了解它由哪些部分组成。
聊天应用程序的组件很简单。您只需要一个消息区域、一个用于输入新消息的输入以及一个要与之聊天的人员列表。
这是一个很棒的项目，因为它可以像你喜欢的那样简单或复杂。为了构建这样的东西，我会使用 Vite 来创建 React 项目，并使用 Supabase 为后端提供支持。
使用Supabase，您不需要任何服务器端代码，并且它还为您提供完全免费的实时聊天功能。您可以添加身份验证以识别用户（使用Supabase Auth），并将所有创建的用户放在侧边栏中进行聊天。
然后，您可以为消息创建一个表格，并在有人输入某些文本时将它们发送到Supabase。为了进一步扩展它，您可以让他们可以使用Supabase Storage添加图像和视频。
最后，您可以使用订阅实时显示消息，具体取决于您正在聊天的用户。
💳 电子商务应用程序
我们将讨论的下一种类型的应用程序是电子商务应用程序。
电子商务应用程序可用于销售具有一次性购买功能的实体或数字产品。
购买后，您需要将其交付给客户。电子商务应用程序可能非常复杂，但不必在开始时就开始。你只需要用你的产品做一个基本的店面。
为他们提供带有描述的关联图像，以及购买按钮。您甚至不需要添加身份验证。为了构建这个，我会使用与 Stripe 集成Next.js来处理购买。
如果您销售的是实物产品，库存系统不必非常复杂。它可以像在数据库中有一个数字一样简单，每当有库存增加时就可以更新，每当有人购买时就可以减少。
🛒 在线市场
在线市场是电子商务应用程序的扩展。这有点复杂，因为您正在添加更多产品。
您还可以考虑添加额外的功能，例如评论，这些功能对于在线购物至关重要。
在这种情况下，挑战在于添加购物车。为了在拥有许多产品的网站上获得良好的用户体验，您希望允许客户将多个产品添加到他们的购物车中。
为了添加购物车，我会使用与以前相同的堆栈，Next.js 和 Stripe，来处理管理和购买产品。幸运的是，有一个名为 use-shopping-cart 的很棒的软件包，它与 Stripe 结账完美集成。
您可以使用它来制作一个完整的购物车，该购物车具有添加和删除商品的功能，以及开箱即用地清除购物车。
对于评论，您可以添加像 Supabase 这样的数据库层，或者您可以将评论外包给允许您集成评论的第三方服务，例如 Trustpilot。
🚚 SaaS 应用程序（软件即服务）
使用 React 进行在线销售的最终演变是 SaaS 应用程序。
在此应用程序中，您可以为客户提供对您所做的特定软件服务的访问权限，通常需要按月或按年支付订阅费。
您可以将 SaaS 应用程序创建为已构建的应用程序的付费版本，例如 AI 应用程序或聊天应用程序。
简而言之，如果你能构建一个用户愿意付费的应用程序，无论是为了提高生产力、为了娱乐，还是为了教育他们，那么制作 SaaS 应用程序所需要做的就是向这些客户收取使用它的费用。
SaaS 应用程序可以根据使用情况或在设定的时间段（例如一个月或一年）内向用户收费。
这可以在 Stripe 或 Paddle 等记录商家的帮助下完成，这使得税收更容易。他们俩都可以处理订阅。
我建议使用 Stripe Checkout 让客户管理他们的订阅，并在必要时取消订阅。
📱真实世界的应用克隆
最后，最雄心勃勃的项目是构建一个你真正喜欢或你每天使用的应用程序的克隆。
应用程序克隆非常困难，因为您通常会克隆大公司所基于的东西。然而，这样做是提升你作为 React 开发人员技能的好方法，因为你必须仔细考虑如何制作一个服务。
例如，如果你要克隆像YouTube这样的东西，你不仅要构建用户界面并让它看起来像YouTube的，而且你还需要YouTube的功能，如菜单、抽屉和通知，以及添加和查看视频、评论、喜欢等的能力。
如果我要构建一个 YouTube 克隆，我会使用 Supabase 或 MySQL 数据库（如 PlanetScale），以及 Next.js，并使用 Supabase 或 NextAuth 进行身份验证。
我会使用 TailwindCSS 和 Radix UI 构建用户界面。Radix 是一个库，它提供了简单（原始）组件，这些组件可以轻松设置样式，但功能齐全，可以为您节省大量时间。
为了上传视频和媒体，我会使用一个专门用于流媒体视频的平台，例如 Mux，它提供了一个很棒的开发人员 API。
为了存储图像和所有其他媒体和附件，我会使用Supabase Storage。
你走多远真的取决于你的雄心壮志，以及你是希望它成为你自己的企业，还是一个向潜在雇主炫耀的伟大投资组合项目。
