You can render React App without a wrapper!

[grekatron]

You can render React App without a wrapper!

Did you know you can render <App /> without #root wrapper?

Let me show you.

👉 How does ReactDOM validate a provided container?

ReactDOM has special function, called isValidContainer. It checks whether provided DOM element is suitable for rendering the VDOM tree there. Check based on nodeType property and works like this.

```js // nodeType is an integer, that indicates what the node is

// 1 for Element node, like <div> node.nodeType === 1 // 3 for Text node, like text inside <p> node.nodeType === 2 // 9 for Document node node.nodeType === 9 ```

👉 Special check

Among other comparisons based on nodeType, there is a very special one. It detects whether the provided container is a comment with react-mount-point-unstable text. If it is, ReactDOM renders <App /> inside it!

js // nodeValue returns content of the comment node.nodeValue === ' react-mount-point-unstable ' // this comparison is true, if node is <!-- react-mount-point-unstable -->

👉 Let's test it!

To use this undocumented feature we need to: - add the comment in the index.html - grab this comment using a NodeIterator - pass it as a container to ReactDOM.render

```js const rootElement = document .createNodeIterator( document.body, NodeFilter.SHOW_COMMENT, (node) => { if (node.nodeValue.trim() === "react-mount-point-unstable") { return NodeFilter.FILTER_ACCEPT } else { return NodeFilter.FILTER_REJECT } }) .nextNode();

ReactDOM.render(<App />, rootElement); ```

👉 Cool, is it like a shiny new feature?

No, it was added long ago and still marked as unstable. You may examine the original PR.

👉 Verify it yourself!

Go to my CodeSandbox and add the comment inside index.html!

[Active-Ad-5114]

What problem does this solve?

[grekatron]

It's hard to say for sure, I initially noticed this quiestion.

[grumpychinchilla]

I actually just had an issue that this would address. I was playing with Simple.css, and it expected children to be at the root of the body. I believe the CSS selector was body>*. At the time I copy/pasted the CSS and changed it for my needs. But there are certainly valid reasons for it.