What is react-empty: *?

Question

react-empty

<div data-reactroot>
<!-- react-empty: 3 -->
<!-- react-empty: 26 -->
</div>

What is this node ? Why can it render to a React Component ? How to do like this?

Answer 1

This is actually part of React's internal support for things like null:

// A perfectly valid component
() => null

// Also a perfectly valid component
const MyComponent = React.createClass({
  render() {
    if (this.props.hidden) return null;
    return <p>My component implementation</p>;
  }
});