Should I compose every HTML that repeats?

Question

One of the main advantages I understood in using Vue.js/React is to define a component and be able to reuse it where necessary. Taking this into account, I have a web application that several times I have to put a html to make a button on the screen. Example:

<button type="button" class="btn btn-primary">Excluir</button>

As I repeat this button several times, I thought of creating a jam, example <btn-excluir></btn-excluir> so I can reuse it every time. Except I don’t see any gain in componentizing it, I can write the html every time.

I can only see some gain in componentizing something, when this component has some reactive effect, some rule and etc.

Then I got this doubt, I must compose all html that repeats or I better compose only html that has something more complex, like reactivity, some ajax and etc ?

Answer 1

This issue goes far beyond programming.

When we think of componentization in the Front-end, we are talking about a good practice that will yes benefit you in some way, ie the ideal today is that a scalable application, use a componentization process, both in UI how much in Front-end. This will make it much easier in the long run, both in maintenance and in team engagement.

But we also have to think about the level of componentization you’re talking about. Imagine the Back-end, you isolate the connection with the data flock to re-use in various places, ie any change in class, will reflect for everyone, but if somewhere someone has not used this "component", side effects will arise.

On the front will happen the same thing, but the chance of breaking is much greater, because it would be very easy for me to use a <button> HTML and not using a <Button> (component) that someone had already created.

So there needs to be a compliance in this implementation, where the whole team is aligned to use and create components, all using an organization methodology (usually a atomic design), in some cases even centralizing everything in a UI Kit. So keep in mind that componentization, when taken seriously is something complex where all html repeating is componentized YES.

Answer 2

Directly Not, you should not compose all HTML repeating. The advantage of using componentization is to separate the application into blocks, these blocks are not exclusively repeating codes, but rather a repeating set of codes.

---

An example of a good application of a component:

function MeuComponenteForm(props) {
    return (
        <form id="formQueRepete" action={props.action}>
            <input type="text placeholder={props.placeholder}/>
        </form>
    )
}

You could have Forms on different routes from your page, what would change between them would be, for example, the action and placeholder of the Html tags, in which case you would compose your form not to repeat, in the action and in the placeholders you would send through props, as in the code below:

Including the form in other components:

<MeuComponenteForm action="actionEspecífico" placeholder="placeHolderEspecifico"/>

<MeuComponenteForm action="outroAction" placeholder="outroPlaceHolder"/>

<MeuComponenteForm action="aindaOutroAction" placeholder="aindaOutroPlaceHolder"/>

Note that you componentized a code block (whole form) and you are controlling its contents through props.

---

An example of a bad application of a component:

function MeuComponente(props){
   return (
      <button>{props.valorBotao}</button>

   )
}

When calling this component into another component, it would be that way:

<MeuComponente valorbotao="CliqueEmMim"/>

Note that it would not be a good application because the only thing different is the text inside the button, there is no need to compose it because the text I can write in a single line:

<button>Um botão</button>