利用这 3 个 React 项目构想打造出色的作品集 - 第 3 部分

在本系列的第 1 部分中，我们了解了如何像真实团队中的专业开发人员一样工作来构建令人印象深刻的投资组合项目。

简而言之，这个想法就是：你用结构化的方法构建你的项目。你从设计开始，创建任务，然后才开始编写代码。你使用真实公司也在使用的工具、工作流程和库。你编写自定义的响应式 CSS。你的应用包含状态和业务逻辑。你编写简洁而描述性的 Git 提交信息并在分支上工作。

如果你真的想脱颖而出，可以使用 React 测试库编写自动化测试。这会让你远远领先于一般的初级候选人。

在第二部分中，我解释了如何向招聘经理展示你的项目。使用项目的 README 文件，确保审核人员看到他们需要看到的内容。让他们了解你的思维过程和决策。这样，你就能给人留下专业的印象，并在此过程中证明你的沟通能力。

现在到了本系列的第 3 部分了。

为您的投资组合做出项目创意反应

现在，您知道如何构建并展示一个令人印象深刻的作品集项目了。您只需要知道要构建什么。

本指南旨在模拟真实的工作环境。因此，你需要一个与实际生产环境类似的应用。

待办事项或天气应用显然不够用。社交媒体应用确实更复杂一些。但真的吗？你真的想再开发一个这样的应用吗？

理想情况下，你的作品集应该与其他候选人的作品有所不同。只要足够独特，就能引起评审员的注意。

你需要选择一个足够复杂的项目来证明你的技能。同时，项目规模要足够小，能够在几周内完成。

最后，如果能有现成的设计就太好了。这样你就能模仿专业的工作流程，不用再浪费时间摆弄布局了。

这份适用于您的投资组合的 React 项目创意列表正好提供了这一点。

所有这些项目都是商业用例，因为它们被许多科技公司使用：

• UI工具包
• 分析应用程序
• 错误跟踪工具。

UI工具包

UI 工具包是一组可重复使用的组件，例如按钮、输入、卡片、模式等等。

我知道这听起来不太吸引人。但很多公司都会创建自己的自定义 UI 库。所以这个项目非常接近专业前端开发人员的工作。

通过构建 UI 工具包，您可以证明您了解现代和专业的 UI 开发。

说实话，看起来可能比实际容易。根据我的经验，你可能需要花费大量时间来为每个动态状态设置正确的样式。

为了显得更专业，你可以

1. 使用此 Chrome 扩展程序使你的 CSS 像素完美
2. 使用Storybook之类的工具记录组件。

使用 Storybook 不仅能让你看起来像个专业人士，还能大幅提升你的开发者体验。而且，正如你在其主页上看到的，你会看到 Airbnb、Lyft、Auth0 或 Salesforce 等巨头的身影。

获取方式： 您可以在 Figma 上找到出色的 UI 套件。

所需时间： 1周

难度：中等

特征

• 静态和交互式组件
• 许多不同的动态状态

您将学到什么

• 像专业团队一样进行设计
• 高级 CSS
• 使用 Storybook 进行 UI 文档

Reddit 分析

借助 Reddit Analytics，用户可以找到在子版块上发帖的最佳时机。子版块就像小众论坛，深受营销人员的喜爱，可以用来推广他们的内容。

因此，希望更多人看到其博客文章的营销团队或个人可以使用此应用程序。

简而言之，用户可以输入一个 subreddit 的名称。然后，应用程序从 Reddit API 获取相应的数据并将其显示在热图中。

如果您还不熟悉专业工作流程，那么这是一个理想的起点。

我已经在Profy.dev上为你准备好了这个项目。它包含 Figma 中的设计和 ClickUp 中的任务。你将学习和练习世界各地许多专业团队使用的工作流程，包括使用功能分支和拉取请求。

除此之外，你还能通过代码审查获得改进代码的技巧。你还可以将自己的代码与专业的实现进行比较。

这个项目的目标不仅是练习你的编程技能，还能让你体验成为一名专业开发人员的感受。这将为你的求职带来巨大的优势。

获取位置： 您可以在这里找到包括设计和任务在内的整个项目。

所需时间： 2 - 4周

难度：高级

特征

• 静态营销页面
• 用于数据可视化的热图和表格

您将学到什么

• 像专业团队一样处理设计和任务
• 高级 CSS 和样式组件
• 数据获取和转换
• 使用 React Testing Library 编写集成测试
• 使用功能分支和拉取请求的专业 Git 工作流程

错误跟踪工具

每个严肃的软件产品都会使用像Sentry（上面的截图）或Rollbar这样的错误跟踪工具。

其基本功能是报告网站上预期和意外的错误。用户可以在仪表板上查看这些错误的数量、时间和原因。

简而言之，它的工作原理如下：

1. 用户将一个小型 JS 库导入到他们的代码中。
2. 当网站的 JS 出现错误时，该库会将其发送到后端并存储在数据库中。
3. 错误跟踪工具有一个前端，用户可以在仪表板中查看所有错误数据。

作为一个作品集项目，这套精简的功能应该足够了。由于它是任何生产应用程序堆栈中必不可少的工具，你不仅可以证明自己的技术能力，还能展现出对专业软件开发的良好理解。

为了让您的工作更轻松，请专注于构建前端和 JS 库。您可以使用AWS Amplify、Nhost或Hasura等服务快速构建后端。

获取方式：很遗憾，我没有完整的设计。不过你可以在 Figma 上找到一个不错的仪表板设计。

所需时间： 3 - 6周

难度：困难

特征

• 单独的错误跟踪库或 npm 包
• 带有图表和表格的仪表板

您将学到什么

• 构建和发布 JS 库（例如在 npm 上）
• 通过 API 发送和获取数据
• 高级 CSS 和数据可视化

总结

我希望通过本系列，您可以获得构建出众专业的 React 作品集项目所需的一切。

以下是我们在这三个部分中涵盖的所有重要方面的最终总结：

• 工作流程：根据设计和任务编写代码。
• 样式：编写自定义和响应式 CSS，使用样式组件或 CSS 模块。
• 逻辑：你的应用应该包含多个页面、有状态，并且能够通过 API 获取数据。我强烈建议至少对部分代码进行自动化测试。
• Git：编写清晰的提交信息。最好使用分支和拉取请求。
• 演示：使用 README 文件引导审阅者了解你的项目。请务必指出最相关的部分（例如，上面列表中的每一项）。
• 想法：UI 工具包是一个很好的起点，市面上有很多免费的设计。Profy.dev上的 Reddit Analytics让你有机会学习专业的 React 开发，同时构建一个优秀的作品集项目。最后，同样重要的是，克隆一个错误跟踪工具是一个雄心勃勃但又充满乐趣的项目。

插图基于drawkit.io