React App localhost:3000 logo not spinning

Question

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

Answer 1

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.

Answer 2

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.