Base components are... awesome?

Martín Callegari — Fri, 08 Jun 2018 03:07:59 +0000

I've been working with React for the past year and a half and I really like it. Now, I'm starting my path on Vue (amazing framework really, give it a shot). But there's something I dislike about the JS component approach: the "need" to build "base components" like Button, Input, Text, etc.

Let me explain

I know, you are probably like "What are you talking about? Base components are awesome". Yes, they could be awesome, but that's the thing. Base components are really important for an app that is under that paradigm but done wrong, well, it will be a really painful problem to deal with.

Options

Let's see a React base component for buttons:

const ButtonBase = props =>
  <button
    type={props.type}
    className={props.styles}
    onClick={props.handleClick}
    disabled={props.disabled}
  >
    {children}
  </button>

ButtonBase.defaultProps = {
  type: 'button',
  disabled: false
};

ButtonBase.propTypes = {
  type: PropTypes.string,
  disabled: PropTypes.bool,
  styles: PropTypes.string.isRequired,
  handleClick: PropTypes.function.isRequired
};

export default Button;

It's not really that bad, but it's not really complete, there will always be a use case or some scenario you will need to change the component's behavior.

But let's say you go for it, you don't care the extra work or the need to change it later on. Let's see how you use this component:

<ButtonBase styles="main-button" handleClick={someHandlingMethod}>
  Do something
</ButtonBase>

Wait! I think I saw this code before

<button type="button" className="main-button" onClick={someHandlingMethod}>
  Do something
</button>

The exact same thing can be accomplished with "native components". And I say native components because you have to remember that, in the case of React, JSX is just a syntactic sugar for those really ugly React.createElement functions. So actually you are just wrapping a function that React already knows. Same goes for texts, inputs and every native element that React already provides.

Is this wrong?

No, not at all. If you think it's worth your time, go for it. But it won't give you an extra helping hand in what you need and if you are working with a team, it may slow everyone down trying to get to a good component to work with.

Another approach

Why do you create a Base Button component? Because you have a lot of different buttons (buttons in this case, could be text, inputs, etc.), and you feel you are repeating code by using those native elements. Well, I already talked about how that is a wrong premise, so the only thing that is in question is, are those really "different buttons"?

I don't really think of different types of buttons, those are either button, submit or reset, so the difference is only in styles.

If you ask me, I always go for KISS. And the approach that I really like is using those native elements as if you are writing pure HTML and make components with CSS/SASS to maintain the idea of components, but at the same time, not needing to redefine the native ones.

%button-base {
  border-radius: 5px;
  height: $button-height;
  font-size: $font-normal;
  width: $button-width;
}

.main-button {
  @extend %button-base;
  background-color: $white;
  border: 1px solid $light-blue;
  color: $light-blue;
}

Those may not look as components right away, but with re-usability in mind, CSS/SASS is awesome and will serve you really good.

Conclusion?

I don't really think there's a conclusion. But I do think that Base components will take a good amount of time to get to a completion point that will suffice all your scenarios. If you don't have that much time, or like me, feel that those components are not really needed, you should avoid building them and explain why. Instead, I'd go for CSS/SASS components and keep the "native elements" React already give us.