CODEWITHSUNDEEP
reactjsarchitecturesassredux
Eliya Cohen
Eliya Cohen

Reputation: 11498

React Core Layout components architectures

I'm using React Redux.

Let's say I have some "Core Components" such as Navbar / Header & Footer.

Each component has its own style (SCSS). So I was thinking about doing the architectures in two ways:

  1. Each component with its own style in the same folder.

    Pros: Sounds more modular.

    Cons:

    • I'll have to make a new directory for each component.
    • To make the imports clearer (and not like import CoreComp from 'CoreComp/CoreComp'), I'll have add for each component index.js file which will import the component, and it will make much more sense.

  1. Directory of components and separate directory for styles

    Cons: It sounds less modular than the first suggestion.

    Pros:

    • I don't have to make a folder for each component.
    • I don't need to make a index.js.

I'm not looking for a discussion about that, I just need to know if there's a popular convension for that.

Upvotes: 2

Views: 271

Answers (1)

yadhu
yadhu

Reputation: 15632

1. First of all, don't worry about creating folders. They don't cost you any bytes.

2. For each component, say we have a folder Component, write the component's code in Component/index.js and export default it.

So that you can import just like import Component from './Component';

3. Component's styles go inside Component/styles.scss.

4. Create sass mixins / functions / variables for common styles, and put it in common.scss in a common place. @import it and use wherever you want.

Advantages:

  • Easy code navigation
  • Easy debugging
  • Easy understanding of the file structure (Better organized file structure in my opinion)
  • Easy to organize unit test files as well.

This is what we usually follow in React.js projects.

(Of course like for anything, there will be some people who dismiss this, but I love it this way).

Upvotes: 4

Related Questions