loading...

Organizing React

twitter logo ・1 min read

So, I have been dabbling around in React for a while now and I have been looking around for a standard way of organizing React components now. But I didn't couldn't find a standard way for this.

How do you guys structure your React Components ?
And can you explain its pros and cons ?

twitter logo DISCUSS (7)
markdown guide
 

For small projects Atomic Design seems like an overkill. I spent most time organizing my project with AD than actually developing it. It's great for big and complex UIs though.

In smaller projects I usually separate components in UI (presentational only) and containers (the ones with logic). A separate Redux store and reducers, actions, navigation and utils/helpers in separate folders always helps.

Here's a sample: github.com/guidovizoso/react-redux...
(The components are not separated in this example because it's just a boilerplate)

Hope this helps!

 

Thanks for the info!! Though, I haven't reached that level of complexity where I have to use Redux in my projects.

Kinda related to organizing, is extensive extending of components a bad idea ?

For example, I have a base Button Component and I make a RaisedButton component and I then make a RaisedLoadingButton Component and so on.

I am kinda having this wierd obsession with extending stuff like this and would like to know till what point this is like a fine practice.

 

What you can do there is create a base Button component and give it some props. For example title, raised, outline, color, txtColor, fontWeight, etc. Then you just do something like:

const Button = (title, raised, outline, color, txtColor, fontWeight) => {
    <button class={raised ? btn raised : btn}><span>{{title}}</span></button>
    // This is just a quick example, but you get the point, conditional rendering FTW
}
 

Hi guys! I've arrived here because I looking for how bad it is to use Atomic Design in React projects (Or any other frontend libs or platforms).
I have a little frontend project and I was trying to implement AD, but I lost most part of my time thinking about what is molecule or element.

So I prefer to build UI components more generic using Styled Components and use them with property "as" or just create another component extending from them.

 

I also need to know this. Looking forward on this.

 
 

Ooh.. Its the first time I heard about it. But from what I have researched so far, it seems awesome...

Though, I am a bit confused, like, what is exactly different from a template and a page in the Atomic Design Concept ?

How is the implementation done in a React/Preact perspective ?

And how do you structure the components in folders ?

Classic DEV Post from May 31 '19

Presentation Tips for Technical Talks

Presentation Tips for Technical Talks

Andrew Bastin profile image
I code because I think its fun....

dev.to now has dark theme. 🌝

Go to the "misc" section of your settings and select night theme

P.S. It's the best move you can make for your dev career.