How to incorporate semantic HTML into React?

Question

I'm pretty new to react and just want to get off on the right foot before I get deep into it and have to go back and change everything.

I'm wondering how to handle semantic html in react. Things like <header>, <nav>, <aside>, etc. I know these tags are important for accessibility reasons among other things, and I'd like to have that same kind of structure in my react app. I'm just not sure how to go about it. In reading online about it I see that <fragment> might be something I should use, but it doesn't seem to achieve the accessibility part of semantic html that I'd like to have.

How do you go about incorporating semantic html into react? And a possible second question, how does it work with components? If I have multiple components that each have a <header> or something, how does react compile that? Would I have a <header> and <footer> within each component? Or would my navbar component just be enclosed within <header> and my footer component would just be enclosed within <footer> and everything else would have its own <main>? At this point I feel like I'm overthinking it, but when I try to get started actually writing I get stuck.

Answer 1

It looks like you are indeed overthinking things. React allows you to build and compose components using any type of valid HTML elements (semantic or not).

It's good practice to build accessible websites. With that in mind, you can have all sorts of semantics elements divided into components. These components can be Class components or Functional components (if you're using React Hooks they're all functional components).

Here's a quick example:

class App extends React.Component {
  state = {
    name: 'Amazing Startup'
  }
  
  render() {
    return(
      <React.Fragment>
        <Header name={this.state.name}/>
        <Main />
        <Footer />
      </React.Fragment>
    )
  }
}


function Header({ name }) {
  return (
    <header>
      <h1>Hello! We are {name}</h1>
    </header>
  )
}

function Main() {
  return (
    <main>
      <p>Important stuff goes here..</p>
    </main>
  )
}

function Footer() {
  return (
    <footer>
      <p>Made with React - 1 Hacker Way Menlo Park, CA 94025</p>
    </footer>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

body {
  font-family: sans-serif;
   min-height: 100vh;
   margin: 0;
}

#root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
}

header {
  font-size: 0.8rem;
  background-color: deepskyblue;
  padding: 0.5rem;
}

main {
  background-color: limegreen;
  padding: 0.5rem;
}

footer {
  background-color: orange;
  padding: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

It's worth noting that you can definitely place all the required HTML elements inside a single component. However, it's nice to separate functionality, this in turn teaches you how to compose components, which is one of their main design principles.

Answer 2

all supported html attributes

JSX supports all html tags. All normal html semantics apply in react JSX.

Fragment

The React.Fragment component lets you return multiple elements in a render() method without creating an additional DOM element

Correct react JSX syntax is each react component returns a single node, typically achieved like

render (
  <div>
    { /* multiple children */ }
  </div>
);

but this injects basically a useless div into the DOM. Fragment allows the following which won't pollute the DOM.

render (
  <Fragment>
    { /* multiple children */ }
  </Fragment>
);