在本系列中，您将学习如何使React和Redux控件成为一组SVG元素来创建游戏。通过本系列获得的知识还将允许您创建由React和Redux编排的其他类型的动画，而不仅仅是游戏。您可以在下面的GitHub存储库中找到本文开发的最终代码：外星人回家-第1部分反应游戏：外星人，回家！你将在这个系列中开发的游戏叫做外星人，回家！这个游戏的想法很简单，你将有一个大炮，并将不得不杀死飞碟试图入侵地球。要杀死这些飞碟，你必须指向并点击SVG画布，让你的大炮射击。如果你很好奇，你可以在这里找到最后的游戏。但是不要玩太多，你还有工作要做！先决条件作为本系列文章的先决条件，您将需要一些关于web开发（主要是JavaScript）的知识，以及具有节点.js安装了NPM。您不必对JavaScript编程语言或React、Redux和SVG的工作原理有深入的了解。但是，如果你这样做，你将有更容易的时间来掌握不同的主题，以及它们是如何结合在一起的。尽管如此，本系列文章还提供了相关文章、帖子和文档的链接，这些文章、帖子和文档对值得更多关注的主题提供了更好的解释。启动前尽管上一节没有提到任何关于Git的内容，但是这是一个很好的工具。所有的专业开发人员在开发时都使用Git（或其他版本控制系统，如Mercurial或SVN），甚至是pet项目。为什么你要开始创建一个项目而不备份它？你甚至不用付钱。你可以使用像GitHub这样的服务（最好的！）或者BitBucket（老实说，还不错）并将代码保存到值得信赖的云基础设施中。除了确保代码的安全性之外，类似的工具还有助于掌握开发过程。例如，如果您正在使用Git，并且您创建了一个新的缺陷版本的应用程序，那么只需几个命令就可以轻松地返回到以前的代码。另一个很大的优点是您可以遵循本系列的每一部分，并分别提交在这些部分上开发的代码。这将使您能够轻松地看到这些部分提出的更改，从而使您的生活更轻松，同时通过本教程进行学习。所以，帮你自己安装Git。另外，在GitHub上创建一个帐户（如果您还没有）和一个存储库来保存您的项目。然后，在完成每个部分之后，将更改提交到此存储库。哦，别忘了推动这些改变。使用Create React App引导React项目使用React、Redux和SVG创建游戏的第一件事是使用createreact app引导项目。正如你可能知道的（如果你不知道也没关系），createreact app是一个开源工具，由Facebook维护，它可以帮助开发人员在react中立即开始开发。有节点.js而NPM安装在本地（后者必须是5.2或更高版本），您甚至可以使用create react app而不必安装它：#使用npx将下载（如果需要）#创建react应用程序并执行它回家npx外星人创建应用程序#将目录更改为新项目cd外星人回家此工具将创建类似于以下结构的结构：|-节点_模块|-公开|- 图标文件|- 索引.html|- manifest.json文件|-src公司|- 应用程序.css|- 应用程序js|- App.test.js版|- 索引.css|- 索引.js|- 徽标.svg|-r注册服务工作者.js|-git.忽略|- 包.json|-包装-锁定.json|- 自述文件.mdcreatereact应用程序工具很流行，有很好的文档记录，并且得到了社区的良好支持。因此，如果您有兴趣了解它的详细信息，可以查看官方的create react app GitHub存储库及其用户指南。现在，你要做的就是去掉一些你不需要的东西。例如，可以删除以下文件：应用程序.css：应用程序组件很重要，但样式定义将委托给其他组件；App.test.js版：测试可能会在另一篇文章中讨论，但您暂时不会使用它；徽标.svg：您不会在本游戏中使用React的徽标；如果您尝试执行项目，移除这些文件可能会产生错误。这很容易通过从./src中删除两个import语句来解决/应用程序js文件：//从/src中删除两行/应用程序js从""导入徽标/徽标.svg';导入'/应用程序.css';通过将render（）方法重构为：// ... 导入语句和类定义渲染（）{返回(

我们将用React、Redux和SVG创建一个很棒的游戏！在

);}// ... 右括号和导出语句别忘了把你的文件提交给Git！安装Redux和PropTypes在引导React项目并从中删除无用的文件之后，您将需要安装并配置Redux，使其成为应用程序上唯一的真实源。您还需要安装PropTypes，因为这个工具有助于避免常见错误。这两种工具都可以在一个命令中安装：npm i redux react redux prop类型如您所见，上面的命令包含第三个NPM包：react redux。虽然可以直接使用Redux和React，但不建议这样做。react-redux包进行了一些性能优化，手动处理会很麻烦。配置Redux和使用PropTypes有了这些包，您就可以配置应用程序使用Redux。这个过程很简单，您需要创建一个容器组件、一个表示组件和一个reducer。容器组件和表示组件之间的区别在于第一个简单地将表示组件连接到Redux。您将创建的第三个元素reducer是Redux存储中的核心组件。此类组件负责获取由应用程序中发生的事件触发的操作，并根据这些操作应用函数来更改状态。如果您不熟悉这些概念，可以阅读本文以获得关于表示和容器组件的更好的解释，并且可以通过这个实用的Redux教程来了解操作、reducer和存储。尽管强烈建议您学习这些概念，但是您仍然可以在不阅读这些概念的情况下继续阅读本系列文章。最好从创建reducer开始，因为这个元素不依赖于其他元素（实际上，它是另一种情况）。为了保持组织，您可以在src目录中创建一个名为reducers的新目录，并在其中添加一个名为索引.js. 此文件可以包含以下源代码：常量初始状态={信息：`集成React和Redux很容易，不是吗？`,};函数减缩器（状态=初始状态）{返回状态；}导出默认减速器；现在，你的reducer将简单地初始化应用程序的状态，告诉你很容易集成React和Redux。很快，您将开始在这个文件中定义和处理操作。接下来，您可以重构App组件以向用户显示此消息。当你安装了道具类型，现在是开始使用它的好时机。为此，请打开./src/应用程序js文件并将其内容替换为以下内容：导入React，{Component}来自'React'；从"prop types"导入PropTypes；类应用程序扩展组件{渲染（）{返回(