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?

It is ok writing plain HTML

imkost
– imkost

2017-04-27 18:00:51 +00:00
Commented Apr 27, 2017 at 18:00 — imkost
– imkost, Commented Apr 27, 2017 at 18:00
Looks fine to me.

jmargolisvt
– jmargolisvt

2017-04-27 18:01:00 +00:00
Commented Apr 27, 2017 at 18:01 — jmargolisvt
– jmargolisvt, Commented Apr 27, 2017 at 18:01
It depends on if you want to reuse this block or not.

Yury Tarabanko
– Yury Tarabanko

2017-04-27 18:03:20 +00:00
Commented Apr 27, 2017 at 18:03 — Yury Tarabanko
– Yury Tarabanko, Commented Apr 27, 2017 at 18:03

Sagiv b.g · Accepted Answer · 2017-04-27 18:01:44Z

2

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.

answered Apr 27, 2017 at 18:01

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nbkhope · Accepted Answer · 2017-04-27 18:04:00Z

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.

answered Apr 27, 2017 at 18:04

nbkhope

7,5144 gold badges44 silver badges59 bronze badges

Collectives™ on Stack Overflow

Mixing React Components with HTML Blocks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related