CODEWITHSUNDEEP
htmlreactjs
martindzejky
martindzejky

Reputation: 396

What should be a React Component and what should be just an HTML?

I'm prototyping the new homepage for my personal website. I made the following pen: Homepage on React #1.

I want the website to use React, not necessarily because it will benefit from it but primarily because I want to learn React.

If you take a look at the pen, you can see a lot of components looking just like this:

/**
 * The main title.
 */
const Title = () => <h1 className="Title">Chuckeles</h1>;

or this:

/**
 * The row component. Places items, you guessed it, in a row.
 */
class Row extends React.Component {

  render() {
    return <div className="Row">{ this.props.children }</div>;
  };

};

These components don't do anything special. They just hide the underlying HTML. My question is this. Should I have components like these? Or should I just use the HTML tag, for instance in case of the Title component, use

<h1 className="Title">Chuckeles</h1>

directly?

Upvotes: 3

Views: 1126

Answers (3)

hazardous
hazardous

Reputation: 10837

What you have mentioned here are typically referred to as either Dumb components or stateless functions. They are perfectly fine and should be always preferred over static html so long as there's a re-use/enhancement possibility.

Upvotes: 0

Bert Goethals
Bert Goethals

Reputation: 7887

It might seem that these "small" components are a waste of space, but they are not.

Imagine tomorrow one of the designers wants to change the class of your Titles. If it is just one component, it can be changed there, and there won't be any "hunt" to find all the usage for it. While if you had inlined it everywhere this would be a nightmare.

The basic idea is to make your "lowest level" components contain HTML, they do the "dirty" work (DOM, style), Your higher components should do composition and logic.

I try not to mix HTML type tag and other components in one component. This makes it so that I have a lot of small HTML components, but they are very easy to maintain, and I get a nice separation of business components, and presentation components.

Upvotes: 3

Florim Maxhuni
Florim Maxhuni

Reputation: 1421

You can go that approach but I prefer the props to spread it like:

 return <div {..this.props}>{ this.props.children }</div>;

and then the div you can reuse also in other places.

Upvotes: 0

Related Questions