I am struggling with atoms in atomic design. Why would I need to make a component for already estabilished HTML UI element? Isn't it redundant?
Lets say I have a button, in molecule instead of using the <button>Label</button> I would be force to use component <Button myOwnLabel="Label" /> inside which is just rendered the same old button.
I can't see the benefit of making another file. Can you help me see it?
Thank you.
There is nothing wrong with using <button> in React. I use it all the time for some small projects that do not require having complicated components for each element.
The benefit of atomic design orientation in React is to give you a consistent foundation for every element in your app.
For example, in your project, all buttons are blue, and every time someone clicks on them, an event is sent to Google Analytics. Using pure HTML elements, you will declare it as:
<button className="blue" onClick={sendEvent}>Text<button>
If you have 100 buttons, you will have to write this configuration 100 times.
Moreover, one day, you may decide that it is not useful to track clicks anymore, and you need to remove the default onClick event on 100 of them.
Then your designer says, let's change all buttons to orange, and you repeat the whole process again.
That's when using custom element comes in play. You can declare the above code in a separate <Button> component.
const Button = () => <button className="blue" onClick={sendEvent}>Text<button>
It appears as simple as <Button> everywhere else, but the actual content of the <Button> is dynamic. Any update will require you change the code inside the component only. For the above example, to achieve all the change requirements, you only need to change <Button> to
const Button = () => <button className="orange">Text<button>
and it will be reflected in all of its instances.
Hope this helps.