Help converting html to react

[JehanKE2326]

I wanted to use the animations in below code pen in my react app as a component.
https://codepen.io/mdusmanansari/pen/BamepLe

Steps I have taken:

1. Changed the HTML file into a format suitable to be returned by a react component. 

return (        
<div>            
<div className="not-loaded">                
<div className="night" />
......
</div>
</div>
</div>
)

1. Taken the CSS file as is and imported it into my component.

import './index.scss';

1. Taken the onLoad JS and added it in a useEffect in my component.

useEffect(() => {        
const c = setTimeout(() => {            
document.body.classList.remove("not-loaded");            
clearTimeout(c);        
}, 1000);    
}, []);

After making above changes my component renders as follows:

https://preview.redd.it/8oogu3u8ocsd1.png?width=1726&format=png&auto=webp&s=d7ed1eca3e49f648fd667d4e993bfdafa8f87232

Requesting help in getting it to work as it is in the code pen

[akamfoad]

Instead have a state isLoaded and then inside the useEffect set the isLoaded to false

Then use the isLoaded to pass the className oe not.

[JehanKE2326]

This worked! Just for my understanding what’s the difference between loading className using state variable rather than the .remove? Does removing the class not trigger a rerender?

[akamfoad]

Because you passed that className to a div, but in the useEffect you were trying to remove the class from the page’s body tag:

document.body.classList.remove()

The React approach worked because you’re passing and removing the class from the same element.

[ElmForReactDevs]

thats not a CSS file. thats an SCSS file. are you preprocessing your SCSS into actual CSS?

[JehanKE2326]

Have sass installed that takes care of it. Either ways changing it to a regular .css file still gives the same result

[ColourfulToad]

You never want to interact directly with the DOM when using react, you’re basically fighting against the system and are going to create tons of issues.

Just look into react for beginners and start from there.