Warn when rendering directly into document.body

This is in response to #3207 to address concerns regarding third-party
scripts and browser plugins potentially altering DOM nodes within
document.body, causing problems with reconciliation.

Closes #3211.

src/browser/ui/ReactMount.js

@@ -450,6 +450,14 @@ var ReactMount = {
       )
     );
 
+    warning(
+      container && container.tagName !== 'BODY',
+      '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.'
+    );
+
     var prevComponent = instancesByReactRootID[getReactRootID(container)];
 
     if (prevComponent) {

src/browser/ui/__tests__/ReactMount-test.js

@@ -144,4 +144,17 @@ describe('ReactMount', function() {
     ReactMount.render(<div />, container);
     expect(console.warn.mock.calls.length).toBe(0);
   });
+
+  it('should warn when mounting into document.body', function () {
+    var iFrame = document.createElement('iframe');
+    document.body.appendChild(iFrame);
+    spyOn(console, 'warn');
+
+    ReactMount.render(<div />, iFrame.contentDocument.body);
+
+    expect(console.warn.calls.length).toBe(1);
+    expect(console.warn.calls[0].args[0]).toContain(
+      'Rendering components directly into document.body is discouraged'
+    );
+  });
 });