I like to keep things simple so I put all my components are in src/components and my pages are in src/pages (suffixed with -Page). All API stuff is in src/api and I also have a src/utils for stuff that doesn't fit anywhere else.

It looks something like this:

src/
  api/
    auth.js
    user.js
  components/
    Header.js
    Header.css
  pages/
    LandingPage.js
    DashboardPage.js
  utils/
    registerServiceWorker.js

Recommended reading material: hackernoon.com/the-100-correct-way...

 

At work, we structure our app following the atomic design system. We’ve found it to be a great way to work and collaborate closely with designers and build reusable components. There’s minor deviation in parts but we mostly stick to that pattern. We literally have folders labeled, atoms, molecules, organisms, templates, and pages. It’s working great for us!

That coupled with styled components, and styled themeing makes our frontend development more logic/state/side effects focused and less on the “style” per se.

It’s still a WIP but both designers and developers are fans of it.

 

That is super cool. I am actually on a team at work in charge of test driving atomic design w/ pattern lab. It is a long process, but I am enjoying so far as well.

Last night I decided to try it out on my personal project and I like the structure so far. Breaking my components folder into atoms, molecules, organisms, and pages has offered me a lot of clarity. The only problem is deciding which category my existing modules fit into.

Are you using Pattern Lab or are you using another system to work with your designers?

Classic DEV Post from Jan 30

What are "HTML-CSS-JS" and "CSS-in-JS", anyway?

There's a lot of debate around these frontend strategies! There's not a consensus definition of what they even are. Let's fix that, and add some nuance!

Did somebody have a javascript project they needed help with?! :)

Thanks for visiting dev.to

A Beginner's Guide to dev.to