-1

I am currently working on html markup in react environment. What I'm curious about is, my code looks like this.

<body>
 <div id="root">
    <div>
      <Header>
      <Section>
      <Footer>
    </div>
 </div>
</body>

It is impossible to have header and section inside a div tag.
So I changed body id="root" but it gives me an error.

Is there no way to change div id="root" div to body ?

index.tsx 

ReactDOM.render(
 
    <BrowserRouter>
    <App />
    </BrowserRouter>,

  document.getElementById('root')
);
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
skksks
  • 53
  • 1
  • 2
  • 8
  • 2
    What do you mean with "It is impossible to have header and section inside a div tag."? There's nothing technically impossible about it. – AKX Nov 30 '21 at 08:14
  • @AKX It's technically possible, but looking at the html standard it's wrong. – skksks Nov 30 '21 at 08:28
  • 1
    `Header` and `Section` are React components, not semantic HTML tags, so what you say is impossible is unclear in this context. – Drew Reese Nov 30 '21 at 08:29
  • @DrewReese So there is no way? If you look at the homepage made in the react environment, it is not visible in the `
    ` Chrome developer tools.     – skksks Nov 30 '21 at 08:42
  • No way for what? I'm not sure I follow that comment. I view the React apps I work on in the browser dev tools all day long. – Drew Reese Nov 30 '21 at 08:43
  • @DrewReese Then, if you deploy as a file built with webpack, it won't be hidden, right?As you can see, the ‘react official guideline page’ is also made of divs. – skksks Nov 30 '21 at 08:46
  • @skksks The MDN says permissible parents for `
    ` are "Any element that accepts flow content. Note that a
    element must not be a descendant of an
    ,
    or another
    element." and "Any element that accepts flow content. Note that a
    element must not be a descendant of an
    element." for `
    `. `
    ` accepts flow content.
     – AKX Nov 30 '21 at 09:04

1 Answers1

2

You can render your React app into document.body, but there is an increased risk of collisions with other code which might manipulate that element. See this GitHub issue: https://github.com/facebook/create-react-app/issues/1568

Regarding nested elements: you can use those elements inside a <div>, but make sure to close them:

<div>
  <header></header>
  <section></section>
  <footer></footer>
</div>
jsejcksn
  • 27,667
  • 4
  • 38
  • 62