投资组合中需要的5个React项目?

您已经完成工作，现在对React库有了扎实的了解。

最重要的是，您对JavaScript有很好的了解，并在React代码中使用了最有用的功能。

您已经取得了很大的进步…但是现在您要做什么？

您如何弥合了解React基础知识和成为专业开发人员之间的鸿沟？

当许多开发人员到达学习React或其他任何JavaScript库的中间阶段时，就会遇到这个问题。他们知道大多数库本身以及有效使用它的JavaScript，但是他们不知道下一步该怎么做。

为什么要构建应用程序

在学习了React的基础知识之后，您需要使用已掌握的技能来轻松构建应用程序。这种做法是成为有效的React开发人员的核心-知道如何自行构建应用程序，并利用React生态系统中的正确工具来做到这一点。

但是，您应该使用React构建哪些应用程序以提升您作为开发人员的能力？

在本文中，我们将介绍在基本的todo应用之后您应该构建的5种不同类型的应用。构建应用程序的最大好处是，一旦部署了这些应用程序，便可以将它们链接到您的产品组合，以一种强大而直接的方式向雇主展示您的专业知识。

对于每种类型的应用程序，我都会介绍一些流行的示例，您可以将它们用作启发，为构建每种应用程序功能而推荐的工具，以及我使用React亲自制作的此类应用程序的简短演示。

如何使用React开始构建应用

与学习React本身不同，在React中您可以找到数十篇文章来深入研究任何相关概念，而构建应用程序的过程很大程度上是一种自我指导的活动，没有太多指导。如果您要开始自己构建应用程序，建议您搜索一些文章，这些文章可以教给您构建应用程序的基础知识，并深入研究它们提供的应用程序源代码。甚至读取代码本身的过程也将使您成为更好的开发人员。

如果这些示例看起来很难构建，请记住您作为React开发人员所知道的—将应用程序分解为可组合的组件。每个应用程序都必须逐段，逐个组件地构建。专注于一次构建一个功能。通过练习，您将更好地了解所需的功能所需的工具以及构建应用程序总体上的常见模式。

注意：在开始构建诸如此类的真实应用程序时，我有一个误解，就是我必须使用Node或Python构建整个后端/ API才能获得所需的功能。您不需要这样做。研究功能强大的无服务器技术，例如Firebase，AWS Amplify或Hasura，它们为您提供了一个开箱即用的完整后端，而无需您自己创建和部署。购买可提高工作效率并节省时间的工具。

构建社交媒体应用

如果我只推荐一个应用程序添加到您的投资组合中，那它将是一个社交媒体应用程序。 Twitter，Facebook和Instagram以及其他一些流行的应用程序都非常复杂，并包括数量不断增长的功能，以保持用户的参与度。最重要的是，这是您可能最了解其应如何运行的应用程序。

几乎所有社交媒体应用程序中都有许多共同的功能：用户使用文本和/或媒体文件撰写帖子的能力，这些帖子的实时供稿，使其他用户喜欢和评测这些帖子以及用户身份验证。一旦掌握了这些信息，就可以为每个用户添加个人资料，他们可以在其中个性化自己的帐户以及管理他们关注的用户。

应用示例：Instagram，Twitter，Snapchat，Reddit

使用技术：

• 创建React App或Next.js以创建帖子，喜欢和消息的动态UI
• Firebase，AWS Amplify或Hasura（使用带有订阅的GraphQL）获取实时数据
• 无服务器功能（例如AWS Lambda或Firebase功能）用于通知
• Cloudinary或Firebase存储，用于上传图片或视频

建立一个电子商务应用程序

选择一些您喜欢的网站，我保证至少有一个网站嵌入了一个电子商务应用程序，即使这只是一个很小的店面。电子商务应用无处不在，我敢打赌，您将被要求在开发人员的职业生涯中一次或一次构建。

建立一个令人印象深刻的大型电子商务平台（如Amazon）是很诱人的，但我建议您开发一些更小，更专注的产品。与其为所有人提供万物的市场，不如让您感兴趣的行业。例如，如果您喜欢家庭用品，则可以看看Crate＆Barrel或Williams-Sonoma为他们的站点建造了什么。

除产品外，电子商务应用程序还可以为消费者提供服务。如果它是本地提供的服务，则可以将交互式地图添加到应用程序，以使服务提供商和客户知道彼此的位置。诸如UberEats和Doordash之类的送餐应用程序需要记住订购食物的人员的位置。

无论出售什么产品，无论是物理的还是虚拟的，每个电子商务应用程序都将包含一些带有产品或服务详细信息的店面。如果用户可以一次购买多个产品，则应该有一个购物车，用户可以在其中管理他们要购买的产品。最后，每个电子商务应用程序都需要一个结帐流程，用户可以匿名购买其产品，也可以在对其进行身份验证后进行购买。

热门示例：Airbnb，Uber，UberEats，Doordash，Etsy，Udemy

利用的技术：

• 为店面和展示产品创建React App或Gatsby
• 带盘点的条带react-stripe-elements用于处理付款处理
• 像Netlify / AWS Lambda这样的无服务器功能来处理结帐流程
• 快如闪电的阿尔及利亚产品搜索
• Snipcart可轻松创建购物车和管理购物车产品

制作娱乐应用

这是所有类别中最广泛的类别。娱乐是什么意思？专注于某种媒体的应用。可以是电影，播客或音乐等。 Netflix，Audible和Soundcloud或Spotify分别是一些很好的例子。如果您将艺术品或设计归入此类，我们可以将Behance或Dribbble之类的网站添加到列表中。

该类别的有趣之处在于，许多娱乐应用程序都与社交媒体应用程序接壤。例如，像Tiktok这样的应用程序具有简短的，富有想象力的视频，是受到较高用户参与度的驱动。像YouTube这样的另一个应用程序则通过喜欢，评测和订阅来关注用户交互。

考虑一下您最感兴趣的媒体或娱乐类型，看看是否可以围绕它构建一个简单的平台，用户可以在其中登录并保存他们喜欢的内容。之后，研究添加社交元素，以便可以向该内容添加评测，例如它，并与平台上的其他用户共享。

热门示例：Youtube，Netflix，Audible，Spotify，Tiktok

利用的技术：

• 创建React App，Next.js或Gatsby以创建应用程序UI
• npm包react-player用于播放媒体
• Cloudinary或Firebase存储用于媒体上传
• 通过名称搜索媒体（即音轨，视频，电影等）的阿尔戈利亚

构建消息传递应用

消息传递应用程序非常庞大。您可能在手机上拥有免费的消息传递服务（如WhatsApp或Viber）作为应用程序，或者内置于社交媒体平台（如Facebook Messenger）中的应用程序。带有即时消息传递功能的对讲机等服务也可用于Web应用程序，因此公司可以为其用户提供即时客户支持。

任何消息传递应用程序都将包含与两个或多个人的对话，实时发送消息。与社交媒体应用程序类似，我建议使用Firebase或Hasura之类的服务，该服务通过WebSockets传输数据以使消息立即显示在对话中。

大多数消息传递应用程序都在移动设备或平板电脑上。如果这不是您的第一个应用程序克隆，那么这是一个绝佳的机会，可以超越Web并使用React Native构建移动应用程序。更好的是，您可以与React Native Web之类的软件包同时构建Web和移动消息传递应用程序。

热门示例：WhatsApp，Viber，Discord，Messenger，Slack

利用的技术：

• React Native或React Native Web可以构建为移动应用程序或混合应用程序（Web +移动版）
• Firebase，AWS Amplify或Hasura（使用GraphQL订阅）实时发送消息
• Cloudinary或Firebase存储，用于发送包含图像或视频内容的消息
• npm软件包emoji-mart，提供了一个类似于Slack的光滑表情符号选择器，供用户包含在其消息中

构建一个生产力应用程序

考虑到那里有太多关于基本生产力应用程序的教程，这可能是最简单的应用程序类型。当我提到生产力应用程序时，是指笔记应用程序，用于管理团队的应用程序和任务列表。一般来说，任何可以帮助您完成特定任务或提高生产力的事物。

首先构建生产力应用程序的好处在于，由于许多功能相对简单，因此它为应用程序构建提供了很好的介绍。您可以从简单的内容开始，例如使用文本编辑器轻松编写带有markdown的格式化文本，然后在其上扩展。然后添加将文本另存为计算机上文件的功能。之后，一项功能可以将该标记导出为HTML以编写格式化的电子邮件。

要开始构建生产力应用程序，请询问该应用程序可能具有哪些功能，以使您的日程安排变得更轻松，然后从那里开始。

热门示例：Todoist，概念，事物等。

利用的技术：

• 为Web创建React App或为移动设备创建React Native
• npm包react-markdown可以在您的应用程序UI中显示markdown
• npm包react-codemirror2用于在笔记中编写代码
• npm包react-draggable可通过单击并拖动来重新排序列表内容

下一步是什么？

如果您问自己：“为什么我必须自己做这个？为什么没有更好的指导来构建这样的真实React应用？”

现在有。

我很高兴宣布一个全新的系列，名为React12的超级实用，沉浸式价格。

每个月，我们将逐步介绍如何使用React从设置到部署来构建12个真实的应用程序克隆。

它将包含您所有喜欢的应用程序（提示：本文中的许多应用程序），包括Instagram，Twitter和YouTube，以及另外9个应用程序。

您现在可以从React12.io开始。

行动要快。下一门价格即将开始

祝您在应用构建过程中一切顺利，我将在下一篇文章中与您见面。