如何像专业人士一样构建你的 React 作品集项目 - 第一部分

我猜猜：你已经学习 React 一段时间了。现在是时候创建一个高级 React 项目组合了。你正在寻找灵感。

问题是，你不能随便建一个项目。你的作品集有一个目的：

你的目标是找到一份工作。

不幸的是，您在旅途中会遇到一个主要障碍：招聘经理（大写字母）。

他们是做决定的守门人。他们邀请你去面试，或者把你的申请扔进垃圾桶。相信我，任何入门级职位的申请，他们都有成堆的申请要扔。

您需要让招聘经理相信您已经准备好接受这份工作。

证明这一点的最好方法就是像专业的 React 开发人员一样行事。

利用现实世界中专业开发团队使用的技术、库、技巧和工作流程构建你的作品集项目。你的新职业大门将为你敞开。

很简单。像专业开发人员一样行事……

等等，你怎么会知道这些？你以前从来没在真正的公司工作过，对吧？

别担心，我会支持你的。

与其他文章不同，我不会只是给你一份项目创意清单，然后就完事了。我希望你了解如何定制你的项目，从而给未来的雇主留下深刻印象。无论是本系列文章中的想法，还是你自己的想法。

您将在本系列中学到什么

本指南由三部分组成。

在第一部分中，您将学习如何像专业人士一样构建项目。我们将讨论专业工作流程、样式和应用程序逻辑等主题。

接下来的第二部分将重点介绍如何有效地展示你的项目。你为你的投资组合项目付出了心血和汗水。确保招聘经理不会错过重要的部分。

在第三部分，你将获得三个不常见的项目构想： Reddit Analytics、UI 工具包和错误监控工具。构建其中任何一个，都能打造出一份出色的 React 作品集。

我将在接下来的几天内在 dev.to 上发布剩余的两部分。如果您想立即阅读所有内容，可以访问profy.dev上的原始帖子。

第一部分：如何像专业人士一样构建你的 React 作品集项目

这个想法听起来很有说服力：如果你像专业人士一样构建你的投资组合项目，你未来的雇主将更有可能给你一个机会。

你会显得雄心勃勃。你会证明自己渴望学习和提升。这是初级开发人员最重要的特质之一。

不幸的是，这是一个进退两难的境地：除非你成为专业团队的一员，否则你不知道如何像专业人士一样工作。

幸运的是，我经历过这两种情况。我想在本章中与大家分享我的经验。

我们将重点关注最重要的领域：

像专业人士一样工作
样式
应用程序逻辑
Git

像专业人士一样工作

独自工作和在专业团队中工作有着巨大的差异。在团队中，你的同事依赖你的工作，就像你依赖他们的工作一样。这就是为什么你需要在更有条理和透明度的环境下工作。

先从一位独自开发项目的开发者的故事说起吧。这是我科技生涯的起步阶段。小心点，你可能会认出自己。

当我开始构建我的第一个项目时，我只有一个想法。比如说，为宠物主人打造一个 Airbnb（不是开玩笑，我真的做过这个）。

我思考了它应该具备的功能。用户应该能够创建和更新个人资料。并且应该有一个列表视图，显示所有可用的公寓。最好是可搜索的。

好吧。我进入了代码世界。毕竟这才是最有趣的部分，对吧？

很快，另一个有趣的功能就会浮现在我的脑海里。我就会分心，立刻开始动手。结果只剩下一堆半生不熟的代码。像臭名昭著的意大利面条一样，纠缠不清。

布局是另一种问题。我当然会参考 Airbnb 和类似的竞争对手的设计思路。然后我就开始写 CSS 了。

我会摆弄我的样式。我会逐像素地移动元素。我会在这里改变一些颜色，在那里增加一些文字大小。把它加粗，把它变成斜体。

却发现让一个网站看起来好看其实比想象的要难……

你看出问题了吗？没错，我会制定一个计划。但那只是一个粗略的计划，而且只存在于我的脑海里。我会在不必要的功能和 CSS 细节上浪费大量时间。而我心中那个很棒的 Web 应用看起来更像是……呃……

那么在专业开发团队工作与此相比如何？

专业的前端开发人员在开始编码之前会得到两样东西：

任务
设计。

在实际工作中，提出功能或设计并非开发人员的职责。通常，产品经理会决定要构建什么，而设计师则负责准备设计。

开发人员的工作就是将它们转换成可运行的代码。

好消息是，你可以像专业人士一样工作。从设计开始，然后创建任务，最后才开始编写代码。

首先，设计。

当然，你不会仅仅为了几个作品集项目就雇佣设计师。而且正如我所说，你也不应该自己设计。这不是你的工作职责。

那么从哪里可以得到设计呢？

Figma 社区是一个不错的起点。您可以找到许多专业的设计，并直接将其复制到您的免费 Figma 帐户中。您或许会找到自己喜欢的现成应用设计。如果没有，您可以使用其中一个 UI 工具包自行构建自定义设计。只需将元素拖放到位即可。

接下来，创建任务。

简而言之，这就是它的工作原理。

您将设计分解为更小的部分（即功能）。
为每个功能创建一个任务。您可以使用免费工具，例如GitHub 项目管理、ClickUp或Trello。
对于每个任务，你都要收集需求。这个功能应该做什么？用户如何与之交互？数据从哪里来？
如果任务太大，您可以将其分解为更小的子任务。

现在您可以开始编码了。

如果你以这种方式构建自己的工作，你将更接近真实的工作体验。你无需为应用程序的不同部分随意编写代码，而是开始像专业开发人员一样思考和工作。

这对于任何雇主来说都是令人印象深刻的。

如果这听起来太费劲，你可以看看本指南末尾“创意”章节中的 Reddit Analytics 应用。我已经为你准备好了这个项目，包括设计和任务。即使你自己投入工作，我也相信从长远来看，它也会给你带来回报。

现在您已经知道如何准备您的项目并像专业人士一样开展工作，让我们深入探讨更多技术主题。

样式

你可能会想使用像 Material UI 或 Bootstrap 这样的 UI 库。没错，这些都是很棒的库。如果你需要快速构建应用，它们会非常有用。例如，如果你在一家早期创业公司工作，或者作为自由职业者为客户构建网站。

但大多数开发团队的工作方式不同。

独特的品牌对于公司来说至关重要。正因如此，设计师会准备定制的设计和风格指南。至少对于应用程序面向用户的部分来说是这样。

正如我们在上一章中提到的，开发人员的工作就是将这些设计转化为代码。

因此，为了贴近实际生产环境，请编写自定义 CSS，而不是使用现成的 UI 库。编写 CSS 是一项更灵活的技能，你在任何工作中都会用到。

但是 UI 库不仅仅提供现成的元素。它们还能减轻你处理响应式设计的负担，从而简化你的工作。同样，这对于快速上手来说可能是一个不错的选择。

但你想证明自己能够在现实条件下胜任 React 开发者的工作。而如今，能够使用 CSS 构建响应式布局至关重要。

大多数情况下，让你的应用实现响应式设计并不难。假设你的设计只针对桌面端。请务必在不同的屏幕尺寸下测试你的应用，例如使用 Chrome 开发者工具的响应式模式。

除了编写自定义 CSS 并牢记响应性之外，我还有关于样式的最后一条建议：

不要使用全局类。

在审查初级 React 开发人员的作品集项目时，我经常看到全局 CSS 类。这让我对候选人的知识储备产生了怀疑。

问题在于全局类名不可扩展。一旦应用程序规模变大，命名冲突就会出现。你不得不使用更具体的名称。最终，你只能使用像BEM这样的命名约定。这太过时了！

好消息是，这个问题很容易解决。简单的解决方案是使用CSS Modules，它与 Create React App、Next.js 或 Gatsby 兼容，开箱即用。如果您想更进一步，可以看看像styled-components这样的现代 CSS-in-JS 库。您可能需要稍微调整一下应用的设置，但大多数情况下应该都有教程。

如果您想看一个例子，请看这里。

// don't use global classes like this
import './index.css';

const MyComponent = () => (
  // this will become class="box" in the HTML
  <div className="box" />
)

// but rather scoped classes with CSS Modules
import styles from './Box.module.css';

const MyComponent = () => (
  // this will become something like class="Box—box-3MbgH"
  <div className={styles.box} />
)

// or styled-components (even better imo)
import styled from 'styled-components';

const Box = styled.div`
  background: red;
`

const MyComponent = () => (
  // this will be similar to class="Box—box-3MbgH"
  <Box />
)

应用程序逻辑

应用程序逻辑（又名 JS 代码）是网站和 Web 应用程序之间的区别所在。

如果你计划成为一名真正的软件开发者，你需要证明自己能够构建的不仅仅是一个简单的静态网站。这也是我建议不要在作品集网站上浪费大量时间的原因之一。

任何实际应用程序都会涉及三个重要领域：路由、状态和数据。这些也是你应该证明自己技能的领域。另外，我想提一下自动化测试，因为它们在许多开发人员的日常生活中至关重要。

路由：你可以使用事实上的标准React Router。最好有一个带 URL 参数的路由。
状态：任何动态应用都依赖于状态。但这里无需赘述。自从 GraphQL 或React Query出现以来，我看到越来越多的应用程序放弃了像 Redux 这样的状态管理解决方案。所以在我看来，原生的 React Hooks useState、useReducer或useContext应该足够了。
数据：你的应用至少应该从 API 获取一些数据并进行渲染。理想情况下，用户可以动态触发请求。例如，通过应用过滤器或提交表单。你可以证明你理解数据流，能够构建数据结构，并且了解基本的 JS 数组函数，例如map、filter或reduce。
测试：自动化测试对于任何严肃的软件产品都至关重要。高级开发人员非常重视测试。与此同时，大多数初级开发人员根本没有任何测试经验。这可能是你的优势。如果你至少对部分代码进行测试，你将比其他候选人拥有巨大的优势。相信我，试试 React 测试库吧。在这里，你可以找到一份 React 应用测试的初学者指南。