Mixing React Components with HTML Blocks

Question

Something that's always confused me is how many React examples show everything as components. But's let's say I only need to include some simple HTML alongside my components, like:

class Homepage extends Component {
  render() {
    return (
      <Container>
        <Hero />
        <Features />
        <div className="copyright">Copyright Some Company Name.</div>
      </Container>
    );
  }
}

The div element will never be more than static text.

Should the <div> be moved into a pure component? Or is it ok to simplify the Homepage component by adding plain HTML this?

Answer 1

Sure it's ok. all in all it's HTML in the end. React components are set of html elements when you call the render function.

One rule of thumb i follow is: create a new component when you think a new responsibility is in order.

Answer 2

That div is a component just like any other, except it is a "primitive" one. There should be no problem mixing the primitive components from HTML with your own custom components.