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.
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:
constButton=(title,raised,outline,color,txtColor,fontWeight)=>{<buttonclass={raised?btnraised:btn}><span>{{title}}</span></button>// This is just a quick example, but you get the point, conditional rendering FTW}
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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: