React App localhost:3000 logo not spinning

user_15239285 0
Viewed 4306

first ever post from me. Here it goes.

I have installed Visual Studio Code and wanted to create my first React app. I read through the documentation, used Syntax:

npx create-react-app my-react-app

Also used npm start

I get the Compiled successfully! message in the terminal. The http:localhost3000 page opens in a new tab. The React logo is displayed. For what ever reason the React logo is a static image for me. I edited text in the page's P tags and they update in real time. The Live Server extension seems to work as well.

Just about every tutorial on video has that logo spinning. My concern is not having React or even Visual Studio Code setup correctly from the beginning. I've tried uninstalling and reinstalling 3x now. I get the same static image.

Any thoughts, experiences, or even conspiracy theories? Does the React logo spin for you? or static like mine? Is there any way I can make it spin every time I create a new React App? Every time my code is not working (do to my code most likely) I keep thinking about the React Logo.

node version 14.16.0 npm 6.14.11

visual-studio-code reactjs
5 Answers

I also got the same static React logo and here is how I fixed it (on Windows VM)

Symptom:

When you try the tutorial on https://reactjs.org/docs/create-a-new-react-app.html, an animation effect settings of Windows may prevent the React Logo from spinning,

try either (1) or (2)

(1) [How to fix and make the react logo spin -- by changing Windows system setting)

Go to Window's Advanced setting system setting -> Performance Options, Check "Animate controls and elements inside windows" (As soon as you check this setting and apply, you can see the react logo start spinning.)

(2) [remove the part that is affected in the code by the above setting] (fix from inside css code)

Remove line 10 " (prefers-reduced-motion: no-preference) " from src/App.css

for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Looks like method 2 always works no matter what animation settings you have on your system. But as a tutorial, you might want to avoid making changes to the original source code from the beginning.

user_160319530

Had the same problem and this worked:

In App.css, on line 10, delete the line containing " (prefers-reduced-motion: no-preference) " and the closing bracket 3 lines below it.

user_163459310

So as I said in the comments, no need to be concerned about the animated logo. Just an SVG file.

You can create your own as well Check here

Also, I generated a new project, and my logo spins.

First, check if you have the logo.svg file and then check your App.css file.

@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);
  }
}

Also, you need to have them imported on your App.js, both .css and .svg

user_76923520

Delete only part ": no-preference" from line 10. It should be "@media (prefers-reduced-motion)", then the logo is spinning (at least mine).

user_32745690
user_12516590
Related