React+Scss folder structure

[Archaeologist03]

I’ve read few articles and react docs on this subject and maybe i missed something but in general there are two “main” types of folder/file structuring? Either having styles within component folder along with js file or have separate folder for components and other for styles, i kinda prefer second one…for now. But, on higher level is that basically it?

And if someone have some examples of good structured react app, i mean git repo of that project, that would be real insight.

[Lucasl]

For the most part that’s what I’ve seen as well. Another options is styled components which is gaining popularity and has a similar feel to scss but is used inside js files so you can use js rather than mixins.

Some examples I can think of:

• SCSS/React components in the same folders https://github.com/Vagr9K/gatsby-material-starter (components in src/components)
• CSS/React components in same folders https://github.com/fullstackreact/react-yelp-clone
• SCSS/React, scss being compiled into a Main.scss file, ideal for smaller sites but on a large scale you wouldn’t want people to have to download all styles if they are on a page that doesn’t need them https://github.com/codebushi/gatsby-starter-strata
• Styled Components, with small ones being inside the components and reused ones being refactored into a seperate styles folder https://github.com/wesbos/Advanced-React/tree/master/finished-application/frontend/components

[Archaeologist03]

Thank you for these. Those two getsby projects seems easiest to fallow to me, but i see how 3rd one would not be ideal for bigger projects. And styles components seems… i dont know, wasn’t having “html” in js enough… . Heh, im definitly going to give them a try soon.