React: Replace <body> content

Created on 16 Aug 2018  路  5Comments  路  Source: facebook/react

Do you want to request a feature or report a bug?
feature

What is the current behavior?
When I use render() to replace the body content I got a warning message:
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
But if I'm creating a whole website, according to:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
It is better to have the <header> <main> <footer> elements, and these elements are said to be better directly under body

For example, it says:
<main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements.

So I think this is a common case to replace the whole content of the <body>

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?
Maybe remove the warning?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react-dom": "^16.3.0",

picture ffcactus
❤2 👍2 🎉1

Most helpful comment

Is there any way to come up with semantic HTML structure in React !?

_without any side effect !_

<body id="root">
  <header></header>
  <main></main>
  <footer></footer>
</body>
picture mostafaabobakr7 on 24 Dec 2018
❤1 😕1 👍1

All 5 comments

I'd take these recommendations with a grain of salt. A single wrapping div won't make any meaningful difference in this case.

Rendering directly into body is fragile because third-party scripts like Google Web Fonts or many browser extensions put stuff there. So your app will just break in some cases. The warning is there for a good reason.

If you absolutely must follow that recommendation, you can make your HTML like this

<body>
  <main id="app">
  </main>
</body>

Then render your React app into the main element.

gaearon picture gaearon on 16 Aug 2018

Thanks
But I also would like to render <header> and <footer>. So I'd better put them inside <main> ?

ffcactus picture ffcactus on 16 Aug 2018
❤1 👍1

You can make your root component render 

function App() {
  return (
    <React.Fragment>
      <header />
      <footer />
    </React.Fragment>
  );
}

then they'll get appended to main (Fragment doesn't show up in DOM).

gaearon picture gaearon on 16 Aug 2018
😕1

Is there any way to come up with semantic HTML structure in React !?

_without any side effect !_

<body id="root">
  <header></header>
  <main></main>
  <footer></footer>
</body>
mostafaabobakr7 picture mostafaabobakr7 on 24 Dec 2018
❤1 😕1 👍1

@mostafaabobakr7 div does not affect your semantic. You may use it safely to fix styling or behaviour holes.

<body>
  <div id="root">
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</body>
TrySound picture TrySound on 25 Dec 2018
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

trusktr picture trusktr  路  3Comments
tleunen picture tleunen  路  3Comments
huxiaoqi567 picture huxiaoqi567  路  3Comments
jimfb picture jimfb  路  3Comments
bloodyowl picture bloodyowl  路  3Comments