Hi Janus,
thank you for your comment: I really appreciate it!
I can get your perplexity about the "overengineering" of the Text component.
Let me try to clarify your doubts.
The Text component in this context has too much implementation, it's true. Just two things:
This is a simple example;
This is a small application.
Having a component like this can bring some advantages.
Consistency
You have to think the this component is meant to be used and used and used... If you need to use it several times, then you must a have a consinstent component with the same size, the same font-family, the same color and so on. It's really hard to have this kind of consistency without using a component.
This means that, when you need to write something, to have texts which are consinstent you have to apply the same classes. Everytime. And this is not a smart approach neither stable, because it's very buggy (try to imagine what could happen writing the weight-medium class 50 times).
Automatic updates
Futhermore, with a reusable component, if you want to change a class or a default value, you just need to modify the component itself and the changes will be automatically reflected everywhere.
Having reusable components is very useful, especially in design systems.
Anyway, I want to give you a suggestion: do not put your focus on the Text's implementation; put it on the usage. The implementation is made only once, but the usage might be done n times.
I'm sorry, but I don't think your example makes sense.
Of course, reusable components are useful. Very much so.
But you are talking about making an entire component only for text elements.
In your post, you describe making a molecule that combines a label with an input. That's fine.
But you gain nothing from having the label as a generic text component with type=label over just writing <label class="input-field__label"/>.
Everything you said about changing the label in one place still applies.
And if you want to have consistent <p>'s you put a standard style for paragraphs in your stylesheet.
Your long example of five different classes implies that a <span> could have other classes. That would be exactly the same with a text component type=span.
So again, it's not actually simpler.
But of course, you should write your code however you see fit :-)
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.
Is there a particular reason for making a text component?
35 lines of code just to render a
<p>or<label>seems incredibly overcomplicated.Hi Janus,
thank you for your comment: I really appreciate it!
I can get your perplexity about the "overengineering" of the
Textcomponent.Let me try to clarify your doubts.
The
Textcomponent in this context has too much implementation, it's true. Just two things:Having a component like this can bring some advantages.
Consistency
You have to think the this component is meant to be used and used and used... If you need to use it several times, then you must a have a consinstent component with the same size, the same font-family, the same color and so on. It's really hard to have this kind of consistency without using a component.
Let me give you one example:
This means that, when you need to write something, to have texts which are consinstent you have to apply the same classes. Everytime. And this is not a smart approach neither stable, because it's very buggy (try to imagine what could happen writing the
weight-mediumclass 50 times).Automatic updates
Futhermore, with a reusable component, if you want to change a class or a default value, you just need to modify the component itself and the changes will be automatically reflected everywhere.
Having reusable components is very useful, especially in design systems.
Anyway, I want to give you a suggestion: do not put your focus on the
Text's implementation; put it on the usage. The implementation is made only once, but the usage might be done n times.I'm sorry, but I don't think your example makes sense.
Of course, reusable components are useful. Very much so.
But you are talking about making an entire component only for text elements.
In your post, you describe making a molecule that combines a label with an input. That's fine.
But you gain nothing from having the label as a generic text component with
type=labelover just writing<label class="input-field__label"/>.Everything you said about changing the label in one place still applies.
And if you want to have consistent
<p>'syou put a standard style for paragraphs in your stylesheet.Your long example of five different classes implies that a
<span>could have other classes. That would be exactly the same with a text componenttype=span.So again, it's not actually simpler.
But of course, you should write your code however you see fit :-)