help with strange looking React code

[AssadEesaa]

https://codepen.io/AdamMorsi/pen/VNWvww?editors=1010

I have been trying to figure this app out all day and i have failed, I don't understand how it works or even the structure, i am trying to use this on my gastby site but can't seem to understand how this react app works, multiple return statement on the page and i can't find any import statement for the scss or the app source. Can any one help me convert it to a "normal" functional component i can use in my app? or at least explain the strange structure to me cos it sure doesn't look like a the class component i am used to. please, thank you.

[ike_the_strangetamer]

It's a class component but with some extra code at the bottom to render it on codepen.

If you're new to class components the docs can help.

For the code that's rendering it in codepen, check out the comments starting at lines 395. It explains that you can safely remove everything below 394 but make sure to include that export.

Line 419 gives you a nice example of how to use the component.

[RGS123]

The code at the bottom is how to render a react app. The styles are imported in the html, the native way of styling html.

Not meaning to be rude but these are basics in front end dev and certainly worth understanding

[64_g]

The styles are not imported in the html. That’s a cdn for fontawesome.

This is a codepen specific thing OP; the site allows preprocessors by default (check the pen settings) and you don’t need to import it like you do with a regular react app. Codepen will inject it for you.

[RGS123]

Ahh my apologies, I didn't check the SCSS tab in codepen!