Reactjs React App localhost:3000徽标未旋转

我第一次发帖。来了

我已安装Visual Studio代码，并希望创建我的第一个React应用程序。我通读了文档，使用了以下语法：

npx创建反应应用程序我的反应应用程序

也使用npm启动

我成功地编译了文件！终端中的消息。http:localhost3000页面将在新选项卡中打开。将显示React徽标。无论出于什么原因，React徽标对我来说都是静态图像。我编辑了页面P标签中的文本，它们会实时更新。Live Server扩展似乎也能正常工作

几乎每个视频教程都有这样的标志。我担心的是从一开始就没有正确地设置React甚至Visual Studio代码。我现在已经尝试卸载并重新安装3x。我得到了相同的静态图像

有什么想法，经历，甚至阴谋论吗？React标志会为你旋转吗？还是像我一样？每次我创建一个新的React应用程序时，有没有办法让它旋转？每次我的代码不起作用时（很可能对我的代码进行修改），我都会一直想着React徽标

节点版本14.16.0

---

npm 6.14.11

create react应用程序（CRA）的徽标旋转版本似乎已经很旧了，CRA软件包正在快速变化，因此您将看到一些差异

---

你的应用程序启动得很好，这就是你需要关心的一切。

因此，正如我在评论中所说的，不必担心动画徽标。只是一个SVG文件

您也可以创建自己的

此外，我还生成了一个新项目，我的徽标开始旋转

首先，检查是否有logo.svg文件，然后检查 你的App.css文件

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

此外，您需要将它们导入到App.js中，

---

.css和.svg都有，我也得到了相同的静态React徽标，下面是我如何修复它的（在Windows虚拟机上）

症状：

当您在上尝试教程时， Windows的动画效果设置可能会阻止React徽标旋转

试试（1）或（2）

（1） [如何修复并使react徽标旋转--通过更改Windows系统设置）

转到Windows的高级设置系统设置->性能选项， 选中“设置窗口内控件和元素的动画” （只要您检查并应用此设置，您就可以看到react徽标开始旋转。）

（2） [删除代码中受上述设置影响的部分]（从css代码内部修复）

从src/App.css中删除第10行“（首选简化运动：无首选项）”

有关详细信息：

---

看起来无论您的系统上有什么动画设置，方法2总是有效的。但是作为一个教程，您可能希望从一开始就避免对原始源代码进行更改。

我现在刚刚尝试过：npx create react app test，然后是cd test，Thread start。徽标正在为我旋转。CSS中的这一行是导致此问题的原因微调器：媒体（首选简化运动：无首选项）{.App logo{animation:App logo spin infinite 20s linear；}}@keyframes App logo spin{从{变换：旋转（0deg）；}到{变换：旋转（360deg）；}你的CSS中有吗？你好@Kevin，你为什么这么关心动画徽标？它只是一个动画文件：/Add as@DannyHobo Correct我默认在App.CSS中有这个代码。谢谢你指出哪个代码负责这个操作。@Aristole我关心的是一致性和节省时间。我只想确保我的etup与我所看到的其他人是平行的。尽管预期的结果并非如此。从精神上来说，我只想专注于代码。谢谢。谢谢亚里士多德。我尝试了你的链接代码，这很有帮助。也感谢你展示了将上述徽标和.css导入App.js的重要性。它的良好基础是我正在努力的或者。@KevinOrara很高兴听到这个消息。请记住，当您创建一个

.js

文件和一个

.css

文件来导入它时，否则将不会应用该样式。如果您想了解更多信息，并从某个地方开始，请检查我在Windows中通过“运行”对话框运行命令sysdm.cpl以获得性能选项。我注意到我的windows中的动画控件和元素已被选中。我已经运行了npx create react应用程序“my react app”很多次，每次我的react徽标都不会旋转：）。哦，至少到目前为止，对实际应用程序开发没有负面影响。您的选项2可能是正确的选择？