Skip to main content

Separation of Concerns

React is the antithesis of this principle. It has HTML, CSS, JavaScript, all in the same file.

What should we do about it?

Well don't think of separating things based on categories, separate them based on responsibilities.

Components are the building blocks of react. So separate them in terms of components. E.g.

Folder Structure
button
├── button.tsx
├── button.css
├── button.test.ts
├── button.types.ts
├── button.stories.tsx
└── index.ts
  • Where is the button component? → In the button directory
  • Where are the CSS styles for button component? → In the button directory
  • Where are the tests of button component? → In the button directory
  • Where are the storybook docs of button component? → In the button directory

You get the idea!

Additional Learning​