我将分享我在软件开发学习中对_React_学习过程的反思，包括我的最终项目 "神奇宝贝配对卡"。
在这期间我学到了什么？
在完成了我的Vanilla JavaScript项目之后，是时候继续前进了。在这个新的学习阶段，我完全专注于可以说是当今最流行的用于构建用户界面的开源JavaScript库。 ReactJS.它 从_Node包管理器_ 和_React_的介绍开始_。紧接着，它深入到每一个React必知的概念，如_组件、JSX、道具、状态、事件处理程序、受控（和不受控）表单、 组件 生命周期 和 异步React。 此外_，_ 我还 ，简要地学习了React的内部结构，如_Babel_、Webpack_和_The Virtual DOM。 最后但并非最不重要的是，我了解了_客户端路由_ ，并通过完成12个React编码挑战来加强我的知识。这一次特别有趣和具有挑战性：https://github.com/MinesJA/westworld-command-center-react。
一开始，从使用vanilla JavaScript过渡到React对我来说是个难题，因为我必须从直接操作_DOM_到现在使用props和state来定义组件的行为。我倾向于直接使用_vanilla JavaScript_来修改_DOM_，而不是利用_React_的功能。然而，更早的时候，我克服了这堵墙，并开始看到摆在我面前的神奇的React声明式方法。我试图快速进入编码挑战，因为我确信它们是掌握所有我学到的理论概念的主要途径，而且我是非常正确的。
我的项目：一个叫做神奇宝贝配对卡的游戏应用
我做的这个项目的要求如下。
- 该应用程序必须有一个HTML页面来渲染反应应用程序。
- 它必须使用多个组件，以保持代码的良好组织性。
- 它必须通过使用_react-router npm包_包括客户端路由_。_
- 纳入API数据。
- 该应用程序必须使用JSON服务器作为模拟的后端来持久化一些数据。
- 该应用程序将有一些最小的风格。
结构和功能
我的组件结构
我的应用程序包括从一副总共151张卡片中随机抽取的口袋妖怪卡片样本。它们可以是10张、20张或30张，取决于所选择的难度等级。这些抽取的卡片中的每一张都必须有一张相同的神奇宝贝的匹配卡片，而且所有的卡片都隐藏着神奇宝贝的形象。用户选择一张牌来显示图像，然后再选择另一张牌。如果所选的两张牌是一对匹配的牌（包含相同的图像），两张牌将一直显示匹配的神奇宝贝图像。否则，两张卡将把两张图像隐藏过去，并再次尝试，直到遇到更多的匹配对。
该应用程序的主页面
为了获取神奇宝贝的图片，我使用了一个免费的第三方API，名为 PokeApi.由于这个原因，我不需要在本地存储外部图片。
在游戏过程中，用户将有机会在任何时候重新启动它或改变难度（当然，它也会重新启动游戏）。用户还可以实时看到他们到目前为止所走的棋数。当玩家最终找到所有匹配的对子时，会弹出一个显示总步数的信息，用户将有一个可选的机会来评论游戏，并给出从零到五星的评价。这些信息通过POST请求被存储在一个模拟的JSON服务器中。
在所有卡片匹配后填写评论
除了游戏，该应用程序还有两条附加路线。
在第一条附加路线中，用户可以看到所有已经完成游戏的用户的评论。这些评论是按时间排序的，先显示最近的评论；但是，用户可以修改时间顺序，先显示最古老的评论。此外，用户可以根据星星的数量过滤评论。每条评论都显示用户的名字，评论发布的日期，评级，选择的难度，以及匹配所有对子所需的步数。显示的另一个特征是平均评分，这是不言自明的。
评论路线
第二个附加途径是联系表。在那里，用户可以填写一个表格，要求提供姓名和电话号码（这些是可选字段）以及电子邮件和关注的信息（必选字段）。一旦信息被提交，这将通过一个POST请求存储在模拟的JSON服务器中。
联系路线
样式设计
在风格设计方面，我使用了一个组合 React Bootstrap 和 CSS。 如果你不知道React Bootstrap，简而言之，这是最古老和著名的React库之一，用于UI基础。它与React配合得很好，因为它也能与组件配合。我的应用程序的布局和大部分组件的样式都依赖于React Bootstrap，特别是那些包含表单、菜单和评论的组件。我主要使用CSS来显示隐藏的和打开的神奇宝贝卡片，甲板和打开神奇宝贝图片时的动画。值得一提的是，我使用了一些来自 字体的威严 ，如星星、游戏控制（主页）、电子邮件和电话联系，以及重新启动功能。
挑战
在我的应用程序的开发过程中，我面临着许多挑战，但我认为最重要的是。
- 游戏逻辑。我 必须考虑一些情况，以使游戏发挥作用。在我看来，其中最相关的是如何识别，以及当卡片匹配或不匹配时该怎么做，还有每次卡片不匹配时用户可用的时间，让他们记住显示的图像的位置。
- 避免bug。有 一些情况可能会发生潜在的bug。一些值得一提的bug是。如果用户在已经点击了那张卡之后又点击了同一张卡，如何识别虽然是同一张神奇宝贝，但这是一个无效的动作，因为该卡已经打开了。如果用户试图在短时间内选择两张以上的牌，可能会发生另一个错误。换句话说，如何在用户选择了第二张牌的时候防止其他牌的选择（禁用或防止点击监听器），如果它们不匹配，就等待它们再次隐藏。在我的开发过程中，这是最具有挑战性的部分。
- 异步的JavasScript/React。在我学习JavaScript和React的过程中，我认为最难掌握的概念是异步编程。在某些时候，在获取小精灵图像时，我不得不处理待定的承诺。在其他情况下，我不得不应用_useEffect来避免_在状态变化时_"_落后一步"。我还有很长的路要走，但由于这个项目，我对异步编程有了更好的理解。
总而言之，我对我的_React_之旅感到非常满意。在面对漫长的编码时间和无数的挑战之后，我为这个加强我的JavaScript和React技能的成就感到自豪。我想展示一下这个项目，当然，我也愿意寻找改进。
这里是我的项目的资源库：https://github.com/CodeHunt101/pokemon-matching-cards-project-phase-2
这是已部署的版本：https://codehunt101.github.io/pokemon-matching-cards-project-phase-2
口袋妖怪配对卡。我的ReactJS应用项目最初发表在《Nerd For Tech》杂志上，人们通过强调和回应这个故事来继续对话。
