React.Fragment and Semantic HTML

  • HTML is the backbone of the web and the code you write should be semantic.
  • You can’t do this – – You have to wrap the headings in a containing element – – Because of the necessary containing element, I’ve peeped a lot of code in the last year that when rendered looks like this: – – Because the components that rendered the above HTML…
  • We often ignore the generated HTML in favour of the cute component display we get with React Developer Tools.
  • One of the features that React 16 gave us was the ability to render an array of components without a containing element.
  • But… it doesn’t feel like HTML, and I don’t want to have to put all my elements in an array just to get them to render!

HTML is the backbone of the web and the code you write should be semantic. Writing React is not an excuse to forget this.

HTML is the backbone of the web and the code you write should be semantic.

If you write semantic HTML, It’s easier to read and ascertain developer intent. Take a look at the following semantic and unsemantic examples:

No thank you

It’s also more accessible. Screenreaders read through elements and feed back the structure of the page to the person using the device. It’s more useful to hear that there is a with a igation element, than a containing a bunch of nchors.

In recent years, we’ve fallen in love with React.js. React methodology involves writing self contained components that look like HTML but is actually JSX (to over-simplify, it’s writing HTML tags in JavaScript).

Prior to React version 16, each component could only display a single element (that could contain other elements).

You can’t do this

You have to wrap the headings in a containing element

Because of the necessary containing element, I’ve peeped a lot of code in the last year that when rendered looks like this:

Because the components that rendered the above HTML are built in isolation, it’s very easy for us to just wrap our elements in a and forget about it. We often ignore the generated HTML in favour…

React.Fragment and Semantic HTML