DEV Community

Andrew Bastin
Andrew Bastin

Posted on


Organizing React

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 ?

Top comments (7)

guidovizoso profile image
Guido Vizoso

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:
(The components are not separated in this example because it's just a boilerplate)

Hope this helps!

andrewtheant profile image
Andrew Bastin

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.

guidovizoso profile image
Guido Vizoso

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
carloscne profile image
Carlos Queiroz

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.

bossajie profile image
Boss A

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

daniel100097 profile image
Daniel Volquardsen

Atomic Design :)

andrewtheant profile image
Andrew Bastin

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 ?

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React