How to incorporate semantic HTML into React?

Issue

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.

Solution

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.

Answered By - Juan Marco