Clearer warning when replacing React-rendered children with a new root component

[sophiebits]

Suppose you have:

var TaskHeader = React.createClass({
    render: function() {
        return <div className="task-header-mid-container">
            <img />
            <h2>I'm a task!</h2>
        </div>;
    }
});

React.renderComponent(<TaskHeader />, $(".task-header-container")[0]);

and then you intend to run

React.renderComponent(<ADifferentTaskHeader />, $(".task-header-container")[0]);

to replace the header but accidentally run

React.renderComponent(<ADifferentTaskHeader />, $(".task-header-mid-container")[0]);

instead.

You should get an error or warning because you're blowing away the React-rendered contents of .task-header-mid-container, but none is given. You actually get the server-rendering checksum warning, but that's more confusing than anything and we should have an explicit warning for this, much like the one you get when calling setProps on a non-root component.

[sophiebits]

@crm416 I know you were looking at #1858 – maybe you'd be interested in looking at this too.

[syranide]

Good first bug?

[charliermarsh]

It's been a while, but I think I covered this in #2065.

[gaearon]

Fixed by #2065.