From 14863c9a8722281b6bf1d0d9fc7b95b44e189354 Mon Sep 17 00:00:00 2001
From: Sasha Aickin <xander76@yahoo.com>
Date: Sun, 26 Mar 2017 20:51:40 -0700
Subject: [PATCH 1/4] Adding SSR test for form fields.

---
 scripts/fiber/tests-failing.txt               |  36 ++
 scripts/fiber/tests-passing-except-dev.txt    |  30 +
 scripts/fiber/tests-passing.txt               |  57 +-
 .../ReactDOMServerIntegration-test.js         | 562 +++++++++++++++++-
 4 files changed, 670 insertions(+), 15 deletions(-)

diff --git a/scripts/fiber/tests-failing.txt b/scripts/fiber/tests-failing.txt
index b99355d063..3bd47469ac 100644
--- a/scripts/fiber/tests-failing.txt
+++ b/scripts/fiber/tests-failing.txt
@@ -102,6 +102,42 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders >,<, and & as single child with client render on top of good server markup
 * renders >,<, and & as multiple children with server string render
 * renders >,<, and & as multiple children with client render on top of good server markup
+* renders an input with a value and an onChange with client render on top of good server markup
+* renders an input with a value and readOnly with client render on top of good server markup
+* renders an input with a value and no onChange/readOnly with client render on top of good server markup
+* renders an input with a defaultValue with client render on top of good server markup
+* renders an input value overriding defaultValue with client render on top of good server markup
+* renders an input value overriding defaultValue no matter the prop order with client render on top of good server markup
+* renders a checkbox that is checked with an onChange with client render on top of good server markup
+* renders a checkbox that is checked with readOnly with client render on top of good server markup
+* renders a checkbox that is checked and no onChange/readOnly with client render on top of good server markup
+* renders a checkbox with defaultChecked with client render on top of good server markup
+* renders a checkbox checked overriding defaultChecked with client render on top of good server markup
+* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of good server markup
+* renders a textarea with a value and an onChange with client render on top of good server markup
+* renders a textarea with a value and readOnly with client render on top of good server markup
+* renders a textarea with a value and no onChange/readOnly with client render on top of good server markup
+* renders a textarea with a defaultValue with client render on top of good server markup
+* renders a textarea value overriding defaultValue with client render on top of good server markup
+* renders a textarea value overriding defaultValue no matter the prop order with client render on top of good server markup
+* renders a select with a value and an onChange with client render on top of good server markup
+* renders a select with a value and readOnly with client render on top of good server markup
+* renders a select with a multiple values and an onChange with client render on top of good server markup
+* renders a select with a multiple values and readOnly with client render on top of good server markup
+* renders a select with a value and no onChange/readOnly with client render on top of good server markup
+* renders a select with a defaultValue with client render on top of good server markup
+* renders a select value overriding defaultValue with client render on top of good server markup
+* renders a select value overriding defaultValue no matter the prop order with client render on top of good server markup
+* renders a controlled text input with client render on top of good server markup
+* renders a controlled textarea with client render on top of good server markup
+* renders a controlled checkbox with client render on top of good server markup
+* renders a controlled select with client render on top of good server markup
+* should not blow away user-entered text on successful reconnect to an uncontrolled input
+* should not blow away user-entered text on successful reconnect to a controlled input
+* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
+* should not blow away user-entered text on successful reconnect to a controlled checkbox
+* should not blow away user-selected value on successful reconnect to an uncontrolled select
+* should not blow away user-selected value on successful reconnect to an controlled select
 * renders class child with context with client render on top of good server markup
 * renders stateless child with context with client render on top of good server markup
 * renders class child without context with client render on top of good server markup
diff --git a/scripts/fiber/tests-passing-except-dev.txt b/scripts/fiber/tests-passing-except-dev.txt
index 5b7ce16d92..203bd2f0e5 100644
--- a/scripts/fiber/tests-passing-except-dev.txt
+++ b/scripts/fiber/tests-passing-except-dev.txt
@@ -95,6 +95,36 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * throws when rendering an undefined component with client render on top of bad server markup
 * throws when rendering a number component with clean client render
 * throws when rendering a number component with client render on top of bad server markup
+* renders an input with a value and an onChange with client render on top of bad server markup
+* renders an input with a value and readOnly with client render on top of bad server markup
+* renders an input with a value and no onChange/readOnly with client render on top of bad server markup
+* renders an input with a defaultValue with client render on top of bad server markup
+* renders an input value overriding defaultValue with client render on top of bad server markup
+* renders an input value overriding defaultValue no matter the prop order with client render on top of bad server markup
+* renders a checkbox that is checked with an onChange with client render on top of bad server markup
+* renders a checkbox that is checked with readOnly with client render on top of bad server markup
+* renders a checkbox that is checked and no onChange/readOnly with client render on top of bad server markup
+* renders a checkbox with defaultChecked with client render on top of bad server markup
+* renders a checkbox checked overriding defaultChecked with client render on top of bad server markup
+* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of bad server markup
+* renders a textarea with a value and an onChange with client render on top of bad server markup
+* renders a textarea with a value and readOnly with client render on top of bad server markup
+* renders a textarea with a value and no onChange/readOnly with client render on top of bad server markup
+* renders a textarea with a defaultValue with client render on top of bad server markup
+* renders a textarea value overriding defaultValue with client render on top of bad server markup
+* renders a textarea value overriding defaultValue no matter the prop order with client render on top of bad server markup
+* renders a select with a value and an onChange with client render on top of bad server markup
+* renders a select with a value and readOnly with client render on top of bad server markup
+* renders a select with a multiple values and an onChange with client render on top of bad server markup
+* renders a select with a multiple values and readOnly with client render on top of bad server markup
+* renders a select with a value and no onChange/readOnly with client render on top of bad server markup
+* renders a select with a defaultValue with client render on top of bad server markup
+* renders a select value overriding defaultValue with client render on top of bad server markup
+* renders a select value overriding defaultValue no matter the prop order with client render on top of bad server markup
+* renders a controlled text input with client render on top of bad server markup
+* renders a controlled textarea with client render on top of bad server markup
+* renders a controlled checkbox with client render on top of bad server markup
+* renders a controlled select with client render on top of bad server markup
 * renders class child with context with client render on top of bad server markup
 * renders stateless child with context with client render on top of bad server markup
 * renders class child without context with client render on top of bad server markup
diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt
index 05ca4a1b2b..79e243d664 100644
--- a/scripts/fiber/tests-passing.txt
+++ b/scripts/fiber/tests-passing.txt
@@ -1154,6 +1154,62 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * throws when rendering string with server string render
 * throws when rendering string with clean client render
 * throws when rendering string with client render on top of bad server markup
+* renders an input with a value and an onChange with server string render
+* renders an input with a value and an onChange with clean client render
+* renders an input with a value and readOnly with server string render
+* renders an input with a value and readOnly with clean client render
+* renders an input with a value and no onChange/readOnly with server string render
+* renders an input with a value and no onChange/readOnly with clean client render
+* renders an input with a defaultValue with server string render
+* renders an input with a defaultValue with clean client render
+* renders an input value overriding defaultValue with server string render
+* renders an input value overriding defaultValue with clean client render
+* renders an input value overriding defaultValue no matter the prop order with server string render
+* renders an input value overriding defaultValue no matter the prop order with clean client render
+* renders a checkbox that is checked with an onChange with server string render
+* renders a checkbox that is checked with an onChange with clean client render
+* renders a checkbox that is checked with readOnly with server string render
+* renders a checkbox that is checked with readOnly with clean client render
+* renders a checkbox that is checked and no onChange/readOnly with server string render
+* renders a checkbox that is checked and no onChange/readOnly with clean client render
+* renders a checkbox with defaultChecked with server string render
+* renders a checkbox with defaultChecked with clean client render
+* renders a checkbox checked overriding defaultChecked with server string render
+* renders a checkbox checked overriding defaultChecked with clean client render
+* renders a checkbox checked overriding defaultChecked no matter the prop order with server string render
+* renders a checkbox checked overriding defaultChecked no matter the prop order with clean client render
+* renders a textarea with a value and an onChange with server string render
+* renders a textarea with a value and an onChange with clean client render
+* renders a textarea with a value and readOnly with server string render
+* renders a textarea with a value and readOnly with clean client render
+* renders a textarea with a value and no onChange/readOnly with server string render
+* renders a textarea with a value and no onChange/readOnly with clean client render
+* renders a textarea with a defaultValue with server string render
+* renders a textarea with a defaultValue with clean client render
+* renders a textarea value overriding defaultValue with server string render
+* renders a textarea value overriding defaultValue with clean client render
+* renders a textarea value overriding defaultValue no matter the prop order with server string render
+* renders a textarea value overriding defaultValue no matter the prop order with clean client render
+* renders a select with a value and an onChange with server string render
+* renders a select with a value and an onChange with clean client render
+* renders a select with a value and readOnly with server string render
+* renders a select with a value and readOnly with clean client render
+* renders a select with a multiple values and an onChange with server string render
+* renders a select with a multiple values and an onChange with clean client render
+* renders a select with a multiple values and readOnly with server string render
+* renders a select with a multiple values and readOnly with clean client render
+* renders a select with a value and no onChange/readOnly with server string render
+* renders a select with a value and no onChange/readOnly with clean client render
+* renders a select with a defaultValue with server string render
+* renders a select with a defaultValue with clean client render
+* renders a select value overriding defaultValue with server string render
+* renders a select value overriding defaultValue with clean client render
+* renders a select value overriding defaultValue no matter the prop order with server string render
+* renders a select value overriding defaultValue no matter the prop order with clean client render
+* renders a controlled text input with clean client render
+* renders a controlled textarea with clean client render
+* renders a controlled checkbox with clean client render
+* renders a controlled select with clean client render
 * renders class child with context with server string render
 * renders class child with context with clean client render
 * renders stateless child with context with server string render
@@ -1193,7 +1249,6 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * should reconnect Pure Component to Bare Element
 * should reconnect Bare Element to Bare Element
 * should reconnect a div with a number and string version of number
-* should reconnect if component trees differ but resulting markup is the same
 
 src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
 * updates a mounted text component in place
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index 2eda9c38fc..403254c66f 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -16,6 +16,7 @@ let React;
 let ReactDOM;
 let ReactDOMServer;
 let ReactDOMFeatureFlags;
+let ReactTestUtils;
 
 // Helper functions for rendering tests
 // ====================================
@@ -209,6 +210,7 @@ function resetModules() {
   ReactDOM = require('ReactDOM');
   ReactDOMServer = require('ReactDOMServer');
   ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+  ReactTestUtils = require('ReactTestUtils');
   ExecutionEnvironment = require('ExecutionEnvironment');
 }
 
@@ -1022,6 +1024,552 @@ describe('ReactDOMServerIntegration', () => {
     });
   });
 
+  describe('form controls', function() {
+    describe('inputs', function() {
+      itRenders('an input with a value and an onChange', async render => {
+        const e = await render(<input value="foo" onChange={() => {}} />);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders('an input with a value and readOnly', async render => {
+        const e = await render(<input value="foo" readOnly={true} />);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders(
+        'an input with a value and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that value without
+          // onChange or readOnly is a mistake.
+          const e = await render(<input value="foo" />, 1);
+          expect(e.value).toBe('foo');
+        },
+      );
+
+      itRenders('an input with a defaultValue', async render => {
+        const e = await render(<input defaultValue="foo" />);
+        expect(e.value).toBe('foo');
+        expect(e.getAttribute('defaultValue')).toBe(null);
+      });
+
+      itRenders('an input value overriding defaultValue', async render => {
+        const e = await render(
+          <input value="foo" defaultValue="bar" readOnly={true} />,
+          1,
+        );
+        expect(e.value).toBe('foo');
+        expect(e.getAttribute('defaultValue')).toBe(null);
+      });
+
+      itRenders(
+        'an input value overriding defaultValue no matter the prop order',
+        async render => {
+          const e = await render(
+            <input defaultValue="bar" value="foo" readOnly={true} />,
+            1,
+          );
+          expect(e.value).toBe('foo');
+          expect(e.getAttribute('defaultValue')).toBe(null);
+        },
+      );
+    });
+
+    describe('checkboxes', function() {
+      itRenders('a checkbox that is checked with an onChange', async render => {
+        const e = await render(
+          <input type="checkbox" checked={true} onChange={() => {}} />,
+        );
+        expect(e.checked).toBe(true);
+      });
+
+      itRenders('a checkbox that is checked with readOnly', async render => {
+        const e = await render(
+          <input type="checkbox" checked={true} readOnly={true} />,
+        );
+        expect(e.checked).toBe(true);
+      });
+
+      itRenders(
+        'a checkbox that is checked and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that checked without
+          // onChange or readOnly is a mistake.
+          const e = await render(<input type="checkbox" checked={true} />, 1);
+          expect(e.checked).toBe(true);
+        },
+      );
+
+      itRenders('a checkbox with defaultChecked', async render => {
+        const e = await render(<input type="checkbox" defaultChecked={true} />);
+        expect(e.checked).toBe(true);
+        expect(e.getAttribute('defaultChecked')).toBe(null);
+      });
+
+      itRenders(
+        'a checkbox checked overriding defaultChecked',
+        async render => {
+          const e = await render(
+            <input
+              type="checkbox"
+              checked={true}
+              defaultChecked={false}
+              readOnly={true}
+            />,
+            1,
+          );
+          expect(e.checked).toBe(true);
+          expect(e.getAttribute('defaultChecked')).toBe(null);
+        },
+      );
+
+      itRenders(
+        'a checkbox checked overriding defaultChecked no matter the prop order',
+        async render => {
+          const e = await render(
+            <input
+              type="checkbox"
+              defaultChecked={false}
+              checked={true}
+              readOnly={true}
+            />,
+            1,
+          );
+          expect(e.checked).toBe(true);
+          expect(e.getAttribute('defaultChecked')).toBe(null);
+        },
+      );
+    });
+
+    describe('textareas', function() {
+      // textareas
+      // ---------
+      itRenders('a textarea with a value and an onChange', async render => {
+        const e = await render(<textarea value="foo" onChange={() => {}} />);
+        // textarea DOM elements don't have a value **attribute**, the text is
+        // a child of the element and accessible via the .value **property**.
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders('a textarea with a value and readOnly', async render => {
+        const e = await render(<textarea value="foo" readOnly={true} />);
+        // textarea DOM elements don't have a value **attribute**, the text is
+        // a child of the element and accessible via the .value **property**.
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders(
+        'a textarea with a value and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that value without
+          // onChange or readOnly is a mistake.
+          const e = await render(<textarea value="foo" />, 1);
+          expect(e.getAttribute('value')).toBe(null);
+          expect(e.value).toBe('foo');
+        },
+      );
+
+      itRenders('a textarea with a defaultValue', async render => {
+        const e = await render(<textarea defaultValue="foo" />);
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.getAttribute('defaultValue')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders('a textarea value overriding defaultValue', async render => {
+        const e = await render(
+          <textarea value="foo" defaultValue="bar" readOnly={true} />,
+          1,
+        );
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.getAttribute('defaultValue')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders(
+        'a textarea value overriding defaultValue no matter the prop order',
+        async render => {
+          const e = await render(
+            <textarea defaultValue="bar" value="foo" readOnly={true} />,
+            1,
+          );
+          expect(e.getAttribute('value')).toBe(null);
+          expect(e.getAttribute('defaultValue')).toBe(null);
+          expect(e.value).toBe('foo');
+        },
+      );
+    });
+
+    describe('selects', function() {
+      var options;
+      beforeEach(function() {
+        options = [
+          <option key={1} value="foo" id="foo">Foo</option>,
+          <option key={2} value="bar" id="bar">Bar</option>,
+          <option key={3} value="baz" id="baz">Baz</option>,
+        ];
+      });
+
+      // a helper function to test the selected value of a <select> element.
+      // takes in a <select> DOM element (element) and a value or array of
+      // values that should be selected (selected).
+      const expectSelectValue = (element, selected) => {
+        if (!Array.isArray(selected)) {
+          selected = [selected];
+        }
+        // the select DOM element shouldn't ever have a value or defaultValue
+        // attribute; that is not how select values are expressed in the DOM.
+        expect(element.getAttribute('value')).toBe(null);
+        expect(element.getAttribute('defaultValue')).toBe(null);
+
+        ['foo', 'bar', 'baz'].forEach(value => {
+          const expectedValue = selected.indexOf(value) !== -1;
+          var option = element.querySelector(`#${value}`);
+          expect(option.selected).toBe(expectedValue);
+        });
+      };
+
+      itRenders('a select with a value and an onChange', async render => {
+        const e = await render(
+          <select value="bar" onChange={() => {}}>{options}</select>,
+        );
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders('a select with a value and readOnly', async render => {
+        const e = await render(
+          <select value="bar" readOnly={true}>{options}</select>,
+        );
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders(
+        'a select with a multiple values and an onChange',
+        async render => {
+          const e = await render(
+            <select value={['bar', 'baz']} multiple={true} onChange={() => {}}>
+              {options}
+            </select>,
+          );
+          expectSelectValue(e, ['bar', 'baz']);
+        },
+      );
+
+      itRenders(
+        'a select with a multiple values and readOnly',
+        async render => {
+          const e = await render(
+            <select value={['bar', 'baz']} multiple={true} readOnly={true}>
+              {options}
+            </select>,
+          );
+          expectSelectValue(e, ['bar', 'baz']);
+        },
+      );
+
+      itRenders(
+        'a select with a value and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that value without
+          // onChange or readOnly is a mistake.
+          const e = await render(<select value="bar">{options}</select>, 1);
+          expectSelectValue(e, 'bar');
+        },
+      );
+
+      itRenders('a select with a defaultValue', async render => {
+        const e = await render(<select defaultValue="bar">{options}</select>);
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders('a select value overriding defaultValue', async render => {
+        const e = await render(
+          <select value="bar" defaultValue="baz" readOnly={true}>
+            {options}
+          </select>,
+          1,
+        );
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders(
+        'a select value overriding defaultValue no matter the prop order',
+        async render => {
+          const e = await render(
+            <select defaultValue="baz" value="bar" readOnly={true}>
+              {options}
+            </select>,
+            1,
+          );
+          expectSelectValue(e, 'bar');
+        },
+      );
+    });
+
+    describe('user interaction', function() {
+      let ControlledInput,
+        ControlledTextArea,
+        ControlledCheckbox,
+        ControlledSelect;
+      beforeEach(() => {
+        ControlledInput = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: 'Hello'};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.value});
+          }
+          render() {
+            return (
+              <input
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}
+              />
+            );
+          }
+        };
+        ControlledTextArea = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: 'Hello'};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.value});
+          }
+          render() {
+            return (
+              <textarea
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}
+              />
+            );
+          }
+        };
+        ControlledCheckbox = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: true};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.checked});
+          }
+          render() {
+            return (
+              <input
+                type="checkbox"
+                checked={this.state.value}
+                onChange={this.handleChange.bind(this)}
+              />
+            );
+          }
+        };
+        ControlledSelect = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: 'Hello'};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.value});
+          }
+          render() {
+            return (
+              <select
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}>
+                <option key="1" value="Hello">Hello</option>
+                <option key="2" value="Goodbye">Goodbye</option>
+              </select>
+            );
+          }
+        };
+      });
+
+      describe('user interaction with controlled inputs', function() {
+        itClientRenders('a controlled text input', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledInput onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.value).toBe('Hello');
+
+          // simulate a user typing.
+          e.value = 'Goodbye';
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.value).toBe('Goodbye');
+        });
+
+        itClientRenders('a controlled textarea', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledTextArea onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.value).toBe('Hello');
+
+          // simulate a user typing.
+          e.value = 'Goodbye';
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.value).toBe('Goodbye');
+        });
+
+        itClientRenders('a controlled checkbox', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledCheckbox onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.checked).toBe(true);
+
+          // simulate a user typing.
+          e.checked = false;
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.checked).toBe(false);
+        });
+
+        itClientRenders('a controlled select', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledSelect onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.value).toBe('Hello');
+
+          // simulate a user typing.
+          e.value = 'Goodbye';
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.value).toBe('Goodbye');
+        });
+      });
+
+      describe('user interaction with inputs before client render', function() {
+        // renders the element and changes the value **before** the client
+        // code has a chance to render; this simulates what happens when a
+        // user starts to interact with a server-rendered form before
+        // ReactDOM.render is called. the client render should NOT blow away
+        // the changes the user has made.
+        const testUserInteractionBeforeClientRender = async (
+          element,
+          initialValue = 'Hello',
+          changedValue = 'Goodbye',
+          valueKey = 'value',
+        ) => {
+          const field = await serverRender(element);
+          expect(field[valueKey]).toBe(initialValue);
+
+          // simulate a user typing in the field **before** client-side reconnect happens.
+          field[valueKey] = changedValue;
+
+          resetModules();
+          // client render on top of the server markup.
+          const clientField = await renderIntoDom(element, field.parentNode);
+          // verify that the input field was not replaced.
+          // Note that we cannot use expect(clientField).toBe(field) because
+          // of jest bug #1772
+          expect(clientField === field).toBe(true);
+          // confirm that the client render has not changed what the user typed.
+          expect(clientField[valueKey]).toBe(changedValue);
+        };
+
+        it('should not blow away user-entered text on successful reconnect to an uncontrolled input', () =>
+          testUserInteractionBeforeClientRender(
+            <input defaultValue="Hello" />,
+          ));
+
+        it('should not blow away user-entered text on successful reconnect to a controlled input', async () => {
+          let changeCount = 0;
+          await testUserInteractionBeforeClientRender(
+            <ControlledInput onChange={() => changeCount++} />,
+          );
+          // note that there's a strong argument to be made that the DOM revival
+          // algorithm should notice that the user has changed the value and fire
+          // an onChange. however, it does not now, so that's what this tests.
+          expect(changeCount).toBe(0);
+        });
+
+        it('should not blow away user-entered text on successful reconnect to an uncontrolled checkbox', () =>
+          testUserInteractionBeforeClientRender(
+            <input type="checkbox" defaultChecked={true} />,
+            true,
+            false,
+            'checked',
+          ));
+
+        it('should not blow away user-entered text on successful reconnect to a controlled checkbox', async () => {
+          let changeCount = 0;
+          await testUserInteractionBeforeClientRender(
+            <ControlledCheckbox onChange={() => changeCount++} />,
+            true,
+            false,
+            'checked',
+          );
+          expect(changeCount).toBe(0);
+        });
+
+        // skipping this test because React 15 does the wrong thing. it blows
+        // away the user's typing in the textarea.
+        xit(
+          'should not blow away user-entered text on successful reconnect to an uncontrolled textarea',
+          () =>
+            testUserInteractionBeforeClientRender(
+              <textarea defaultValue="Hello" />,
+            ),
+        );
+
+        // skipping this test because React 15 does the wrong thing. it blows
+        // away the user's typing in the textarea.
+        xit(
+          'should not blow away user-entered text on successful reconnect to a controlled textarea',
+          async () => {
+            let changeCount = 0;
+            await testUserInteractionBeforeClientRender(
+              <ControlledTextArea onChange={() => changeCount++} />,
+            );
+            expect(changeCount).toBe(0);
+          },
+        );
+
+        it('should not blow away user-selected value on successful reconnect to an uncontrolled select', () =>
+          testUserInteractionBeforeClientRender(
+            <select defaultValue="Hello">
+              <option key="1" value="Hello">Hello</option>
+              <option key="2" value="Goodbye">Goodbye</option>
+            </select>,
+          ));
+
+        it('should not blow away user-selected value on successful reconnect to an controlled select', async () => {
+          let changeCount = 0;
+          await testUserInteractionBeforeClientRender(
+            <ControlledSelect onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+        });
+      });
+    });
+  });
+
   describe('context', function() {
     let PurpleContext, RedContext;
     beforeEach(() => {
@@ -1442,20 +1990,6 @@ describe('ReactDOMServerIntegration', () => {
 
       it('can distinguish an empty component from an empty text component', () =>
         expectMarkupMismatch(<div><EmptyComponent /></div>, <div>{''}</div>));
-
-      it('should reconnect if component trees differ but resulting markup is the same', () => {
-        class Component1 extends React.Component {
-          render() {
-            return <span id="foobar" />;
-          }
-        }
-        class Component2 extends React.Component {
-          render() {
-            return <span id="foobar" />;
-          }
-        }
-        return expectMarkupMatch(<Component1 />, <Component2 />);
-      });
     });
 
     // Markup Mismatches: misc

From a734aecc983bc484845ce2a34c2fe4bbd0f16b18 Mon Sep 17 00:00:00 2001
From: Sasha Aickin <xander76@yahoo.com>
Date: Fri, 31 Mar 2017 14:49:03 -0700
Subject: [PATCH 2/4] Response to code review comment
 https://github.com/facebook/react/pull/9264#discussion_r108974871 . Thanks,
 @spicyj!

---
 .../dom/shared/__tests__/ReactDOMServerIntegration-test.js    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index 403254c66f..af29b8d5ac 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -1043,12 +1043,14 @@ describe('ReactDOMServerIntegration', () => {
           // onChange or readOnly is a mistake.
           const e = await render(<input value="foo" />, 1);
           expect(e.value).toBe('foo');
+          expect(e.getAttribute('value')).toBe('foo');
         },
       );
 
       itRenders('an input with a defaultValue', async render => {
         const e = await render(<input defaultValue="foo" />);
         expect(e.value).toBe('foo');
+        expect(e.getAttribute('value')).toBe('foo');
         expect(e.getAttribute('defaultValue')).toBe(null);
       });
 
@@ -1058,6 +1060,7 @@ describe('ReactDOMServerIntegration', () => {
           1,
         );
         expect(e.value).toBe('foo');
+        expect(e.getAttribute('value')).toBe('foo');
         expect(e.getAttribute('defaultValue')).toBe(null);
       });
 
@@ -1069,6 +1072,7 @@ describe('ReactDOMServerIntegration', () => {
             1,
           );
           expect(e.value).toBe('foo');
+          expect(e.getAttribute('value')).toBe('foo');
           expect(e.getAttribute('defaultValue')).toBe(null);
         },
       );

From d9915db43bcb9683fc5658d15c98f2b2065bd502 Mon Sep 17 00:00:00 2001
From: Andrey Marchenko <tom910ru@gmail.com>
Date: Sat, 1 Apr 2017 01:31:52 +0300
Subject: [PATCH 3/4] Deleting a specific style name float for ie8 (#9311)

* Deleting a specific style name float for ie8

* Remove unnecessary condition
---
 src/renderers/dom/shared/CSSPropertyOperations.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js
index d23c5b6be4..a7a70ed895 100644
--- a/src/renderers/dom/shared/CSSPropertyOperations.js
+++ b/src/renderers/dom/shared/CSSPropertyOperations.js
@@ -30,7 +30,6 @@ var processStyleName = memoizeStringOnly(function(styleName) {
 });
 
 var hasShorthandPropertyBug = false;
-var styleFloatAccessor = 'cssFloat';
 if (ExecutionEnvironment.canUseDOM) {
   var tempStyle = document.createElement('div').style;
   try {
@@ -39,10 +38,6 @@ if (ExecutionEnvironment.canUseDOM) {
   } catch (e) {
     hasShorthandPropertyBug = true;
   }
-  // IE8 only supports accessing cssFloat (standard) as styleFloat
-  if (document.documentElement.style.cssFloat === undefined) {
-    styleFloatAccessor = 'styleFloat';
-  }
 }
 
 if (__DEV__) {
@@ -215,8 +210,8 @@ var CSSPropertyOperations = {
         styles[styleName],
         component,
       );
-      if (styleName === 'float' || styleName === 'cssFloat') {
-        styleName = styleFloatAccessor;
+      if (styleName === 'float') {
+        styleName = 'cssFloat';
       }
       if (styleValue) {
         style[styleName] = styleValue;

From 4a37718e4ed56f1893abb19f59ec91a861000803 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 3 Apr 2017 20:32:02 +0100
Subject: [PATCH 4/4] Remove examples/ folder (#9323)

---
 .eslintignore                                 |   1 -
 .flowconfig                                   |   1 -
 .gitignore                                    |   2 -
 docs/contributing/how-to-contribute.md        |   2 +-
 docs/docs/web-components.md                   |   2 -
 examples/README.md                            |   5 -
 examples/basic-click-counter/index.html       |  54 -----
 examples/basic-commonjs/.babelrc              |   3 -
 examples/basic-commonjs/README.md             |   9 -
 examples/basic-commonjs/index.html            |  37 ----
 examples/basic-commonjs/index.js              |  24 ---
 examples/basic-commonjs/package.json          |  19 --
 examples/basic-jsx-external/example.js        |  19 --
 examples/basic-jsx-external/index.html        |  37 ----
 examples/basic-jsx-harmony/index.html         |  49 -----
 examples/basic-jsx-precompile/example.js      |  19 --
 examples/basic-jsx-precompile/index.html      |  40 ----
 examples/basic-jsx/index.html                 |  49 -----
 examples/basic/index.html                     |  52 -----
 examples/fiber/debugger/.env                  |   1 -
 examples/jquery-bootstrap/css/example.css     |   3 -
 examples/jquery-bootstrap/index.html          |  20 --
 examples/jquery-bootstrap/js/app.js           | 139 -------------
 examples/jquery-mobile/README.md              |   6 -
 examples/jquery-mobile/index.html             |  19 --
 examples/jquery-mobile/js/app.js              | 191 ------------------
 examples/quadratic/example.js                 |  59 ------
 examples/quadratic/index.html                 |  31 ---
 examples/shared/css/base.css                  |  62 ------
 examples/transitions/index.html               |  81 --------
 examples/transitions/transition.css           |  44 ----
 examples/webcomponents/index.html             |  65 ------
 fixtures/fiber-debugger/.env                  |   1 +
 .../fiber-debugger}/.gitignore                |   0
 .../fiber-debugger}/README.md                 |   0
 .../fiber-debugger}/package.json              |   0
 .../fiber-debugger}/public/favicon.ico        | Bin
 .../fiber-debugger}/public/index.html         |   0
 .../fiber-debugger}/src/App.js                |   0
 .../fiber-debugger}/src/Editor.js             |   0
 .../fiber-debugger}/src/Fibers.js             |   0
 .../fiber-debugger}/src/describeFibers.js     |   0
 .../fiber-debugger}/src/index.css             |   0
 .../fiber-debugger}/src/index.js              |   0
 .../fiber-debugger}/yarn.lock                 |   0
 .../fiber-triangle}/index.html                |   0
 fixtures/packaging/babel-standalone.html      |  14 ++
 47 files changed, 16 insertions(+), 1144 deletions(-)
 delete mode 100644 examples/README.md
 delete mode 100644 examples/basic-click-counter/index.html
 delete mode 100644 examples/basic-commonjs/.babelrc
 delete mode 100644 examples/basic-commonjs/README.md
 delete mode 100644 examples/basic-commonjs/index.html
 delete mode 100644 examples/basic-commonjs/index.js
 delete mode 100644 examples/basic-commonjs/package.json
 delete mode 100644 examples/basic-jsx-external/example.js
 delete mode 100644 examples/basic-jsx-external/index.html
 delete mode 100644 examples/basic-jsx-harmony/index.html
 delete mode 100644 examples/basic-jsx-precompile/example.js
 delete mode 100644 examples/basic-jsx-precompile/index.html
 delete mode 100644 examples/basic-jsx/index.html
 delete mode 100644 examples/basic/index.html
 delete mode 100644 examples/fiber/debugger/.env
 delete mode 100644 examples/jquery-bootstrap/css/example.css
 delete mode 100644 examples/jquery-bootstrap/index.html
 delete mode 100644 examples/jquery-bootstrap/js/app.js
 delete mode 100644 examples/jquery-mobile/README.md
 delete mode 100644 examples/jquery-mobile/index.html
 delete mode 100644 examples/jquery-mobile/js/app.js
 delete mode 100644 examples/quadratic/example.js
 delete mode 100644 examples/quadratic/index.html
 delete mode 100644 examples/shared/css/base.css
 delete mode 100644 examples/transitions/index.html
 delete mode 100644 examples/transitions/transition.css
 delete mode 100644 examples/webcomponents/index.html
 create mode 100644 fixtures/fiber-debugger/.env
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/.gitignore (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/README.md (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/package.json (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/public/favicon.ico (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/public/index.html (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/src/App.js (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/src/Editor.js (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/src/Fibers.js (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/src/describeFibers.js (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/src/index.css (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/src/index.js (100%)
 rename {examples/fiber/debugger => fixtures/fiber-debugger}/yarn.lock (100%)
 rename {examples/fiber => fixtures/fiber-triangle}/index.html (100%)
 create mode 100644 fixtures/packaging/babel-standalone.html

diff --git a/.eslintignore b/.eslintignore
index 2256716533..c9866f87df 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -9,7 +9,6 @@ docs/_site/
 docs/vendor/bundle/
 # This should be more like examples/**/thirdparty/** but
 # we should fix https://github.com/facebook/esprima/pull/85 first
-examples/
 fixtures/
 # Ignore built files.
 build/
diff --git a/.flowconfig b/.flowconfig
index 4c85601032..15f21d00b2 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,6 +1,5 @@
 [ignore]
 
-<PROJECT_ROOT>/examples/.*
 <PROJECT_ROOT>/fixtures/.*
 <PROJECT_ROOT>/build/.*
 <PROJECT_ROOT>/.*/node_modules/y18n/.*
diff --git a/.gitignore b/.gitignore
index 18dfb23662..035106e399 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,8 +17,6 @@ docs/.sass-cache
 docs/js/*
 docs/downloads/*.zip
 docs/vendor/bundle
-examples/shared/*.js
-examples/**/bundle.js
 fixtures/dom/public/react-dom.js
 fixtures/dom/public/react.js
 test/the-files-to-test.generated.js
diff --git a/docs/contributing/how-to-contribute.md b/docs/contributing/how-to-contribute.md
index 6613a3c74b..ff2180e0db 100644
--- a/docs/contributing/how-to-contribute.md
+++ b/docs/contributing/how-to-contribute.md
@@ -115,7 +115,7 @@ We recommend running `npm test` (or its variations above) to make sure you don't
 
 First, run `npm run build`. This will produce pre-built bundles in `build` folder, as well as prepare npm packages inside `build/packages`.
 
-The easiest way to try your changes is to open and modify `examples/basic/index.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes. Please make sure to rollback any unintentional changes in `examples` before sending a pull request.
+The easiest way to try your changes is to run `npm run build` and then open `fixtures/packaging/globals.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes.
 
 If you want to try your changes in your existing React project, you may copy `build/react.js`, `build/react-dom.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder:
 
diff --git a/docs/docs/web-components.md b/docs/docs/web-components.md
index 4063db0e1c..1012ea795b 100644
--- a/docs/docs/web-components.md
+++ b/docs/docs/web-components.md
@@ -56,5 +56,3 @@ const proto = Object.create(HTMLElement.prototype, {
 });
 document.registerElement('x-search', {prototype: proto});
 ```
-
-You can also check out this [complete Web Components example on GitHub](https://github.com/facebook/react/tree/master/examples/webcomponents).
diff --git a/examples/README.md b/examples/README.md
deleted file mode 100644
index 53d7a6445b..0000000000
--- a/examples/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# React Examples
-
-Here are some small React demos. Some use [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration.
-
-For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/examples/react-backbone/).
diff --git a/examples/basic-click-counter/index.html b/examples/basic-click-counter/index.html
deleted file mode 100644
index 3c8e9c8e8f..0000000000
--- a/examples/basic-click-counter/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Click Counter Example with JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Click Counter Example with JSX</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="https://github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX and transformed in the browser.</p>
-    <p>This example uses events and state to track clicks and update the rendered output.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script type="text/babel">
-      var Counter = React.createClass({
-        getInitialState: function () {
-          return { count: 0 };
-        },
-        handleClick: function () {
-          this.setState({
-            count: this.state.count + 1,
-          });
-        },
-        render: function () {
-          return (
-            <button onClick={this.handleClick}>
-              Click me! Number of clicks: {this.state.count}
-            </button>
-          );
-        }
-      });
-      ReactDOM.render(
-        <Counter />,
-        document.getElementById('container')
-      );
-    </script>
-  </body>
-</html>
diff --git a/examples/basic-commonjs/.babelrc b/examples/basic-commonjs/.babelrc
deleted file mode 100644
index 0578679419..0000000000
--- a/examples/basic-commonjs/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["react", "es2015"]
-}
diff --git a/examples/basic-commonjs/README.md b/examples/basic-commonjs/README.md
deleted file mode 100644
index 87025c46e2..0000000000
--- a/examples/basic-commonjs/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Basic example of using React with Browserify
-
-Run `npm install` in the directory to install React from npm. Then run:
-
-```sh
-npm start
-```
-
-to produce `bundle.js` with example code and React.
diff --git a/examples/basic-commonjs/index.html b/examples/basic-commonjs/index.html
deleted file mode 100644
index 0b6c023c3f..0000000000
--- a/examples/basic-commonjs/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic CommonJS Example with Browserify</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic CommonJS Example with Browserify</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="https://github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a CommonJS module and precompiled to vanilla JS by navigating to the example
-      directory
-      <pre>cd /path/to/react/examples/example-name</pre>
-      and running
-      <pre>npm start</pre>
-      <br>
-      (don't forget to install first) 
-      <pre>npm install</pre>
-      <br>
-    </p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="bundle.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-commonjs/index.js b/examples/basic-commonjs/index.js
deleted file mode 100644
index ef90bbb89c..0000000000
--- a/examples/basic-commonjs/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-
-var ExampleApplication = React.createClass({
-  render: function() {
-    var elapsed = Math.round(this.props.elapsed  / 100);
-    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-    var message =
-      'React has been successfully running for ' + seconds + ' seconds.';
-
-    return <p>{message}</p>;
-  }
-});
-
-var start = new Date().getTime();
-
-setInterval(function() {
-  ReactDOM.render(
-    <ExampleApplication elapsed={new Date().getTime() - start} />,
-    document.getElementById('container')
-  );
-}, 50);
diff --git a/examples/basic-commonjs/package.json b/examples/basic-commonjs/package.json
deleted file mode 100644
index e42eb80de4..0000000000
--- a/examples/basic-commonjs/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "react-basic-commonjs-example",
-  "description": "Basic example of using React with CommonJS",
-  "private": true,
-  "main": "index.js",
-  "dependencies": {
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babelify": "^7.3.0",
-    "browserify": "^13.0.0",
-    "react": "^15.0.2",
-    "react-dom": "^15.0.2",
-    "watchify": "^3.7.0"
-  },
-  "scripts": {
-    "build": "browserify ./index.js -t babelify -o bundle.js",
-    "start": "watchify ./index.js -v -t babelify -o bundle.js"
-  }
-}
diff --git a/examples/basic-jsx-external/example.js b/examples/basic-jsx-external/example.js
deleted file mode 100644
index 7d9911eb6c..0000000000
--- a/examples/basic-jsx-external/example.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var ExampleApplication = React.createClass({
-  render: function() {
-    var elapsed = Math.round(this.props.elapsed  / 100);
-    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-    var message =
-      'React has been successfully running for ' + seconds + ' seconds.';
-
-    return <p>{message}</p>;
-  }
-});
-
-var start = new Date().getTime();
-
-setInterval(function() {
-  ReactDOM.render(
-    <ExampleApplication elapsed={new Date().getTime() - start} />,
-    document.getElementById('container')
-  );
-}, 50);
diff --git a/examples/basic-jsx-external/index.html b/examples/basic-jsx-external/index.html
deleted file mode 100644
index 7dd70346cb..0000000000
--- a/examples/basic-jsx-external/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Example with External JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-
-  <body>
-    <h1>Basic Example with External JSX</h1>
-    <div id="container">
-      <p>
-        If you can see this, React is <strong>not</strong> working right. This is probably because you&apos;re viewing
-        this on your file system instead of a web server.<br>
-        Try navigating to the React root
-        <pre>
-          cd /path/to/react
-        </pre>
-        and running
-        <pre>
-          python -m SimpleHTTPServer
-        </pre>
-        and going to <a href="http://localhost:8000/examples/basic-jsx-external/">http://localhost:8000/examples/basic-jsx-external/</a>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a separate file and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script type="text/babel" src="example.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-jsx-harmony/index.html b/examples/basic-jsx-harmony/index.html
deleted file mode 100644
index 608fefa21d..0000000000
--- a/examples/basic-jsx-harmony/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Example with JSX and ES6 features</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with JSX and ES6 features</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="https://github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX with Harmony (ES6) syntax and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script type="text/babel">
-      class ExampleApplication extends React.Component {
-        render() {
-          var elapsed = Math.round(this.props.elapsed  / 100);
-          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-          var message =
-            `React has been successfully running for ${seconds} seconds.`;
-
-          return <p>{message}</p>;
-        }
-      }
-      var start = new Date().getTime();
-      setInterval(() => {
-        ReactDOM.render(
-          <ExampleApplication elapsed={new Date().getTime() - start} />,
-          document.getElementById('container')
-        );
-      }, 50);
-    </script>
-  </body>
-</html>
diff --git a/examples/basic-jsx-precompile/example.js b/examples/basic-jsx-precompile/example.js
deleted file mode 100644
index 7d9911eb6c..0000000000
--- a/examples/basic-jsx-precompile/example.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var ExampleApplication = React.createClass({
-  render: function() {
-    var elapsed = Math.round(this.props.elapsed  / 100);
-    var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-    var message =
-      'React has been successfully running for ' + seconds + ' seconds.';
-
-    return <p>{message}</p>;
-  }
-});
-
-var start = new Date().getTime();
-
-setInterval(function() {
-  ReactDOM.render(
-    <ExampleApplication elapsed={new Date().getTime() - start} />,
-    document.getElementById('container')
-  );
-}, 50);
diff --git a/examples/basic-jsx-precompile/index.html b/examples/basic-jsx-precompile/index.html
deleted file mode 100644
index 88720b6a01..0000000000
--- a/examples/basic-jsx-precompile/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Example with Precompiled JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with Precompiled JSX</h1>
-    <div id="container">
-      <p>
-        If you can see this, React is <strong>not</strong> running. Try running:
-      </p>
-      <pre>npm install -g babel-cli
-cd examples/basic-jsx-precompile/
-npm install babel-preset-react
-babel example.js --presets react --out-dir=build</pre>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
-
-    <p><i>With Babel lower than 6.0</i></p>
-    <pre>npm install -g babel
-cd examples/basic-jsx-precompile/
-babel example.js --out-dir=build</pre>
-
-	<p><i>With Babel 6.0 or higher</i></p>
-    <pre>npm install -g babel-cli
-cd examples/basic-jsx-precompile/
-npm install babel-preset-react
-babel example.js --presets react --out-dir=build</pre>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="build/example.js"></script>
-  </body>
-</html>
diff --git a/examples/basic-jsx/index.html b/examples/basic-jsx/index.html
deleted file mode 100644
index 19fb195e3f..0000000000
--- a/examples/basic-jsx/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Example with JSX</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with JSX</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="https://github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script type="text/babel">
-      var ExampleApplication = React.createClass({
-        render: function() {
-          var elapsed = Math.round(this.props.elapsed  / 100);
-          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-          var message =
-            'React has been successfully running for ' + seconds + ' seconds.';
-
-          return <p>{message}</p>;
-        }
-      });
-      var start = new Date().getTime();
-      setInterval(function() {
-        ReactDOM.render(
-          <ExampleApplication elapsed={new Date().getTime() - start} />,
-          document.getElementById('container')
-        );
-      }, 50);
-    </script>
-  </body>
-</html>
diff --git a/examples/basic/index.html b/examples/basic/index.html
deleted file mode 100644
index 9fc1fb3c30..0000000000
--- a/examples/basic/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Example</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="https://github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written in vanilla JavaScript (without JSX) and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script>
-      var ExampleApplication = React.createClass({
-        render: function() {
-          var elapsed = Math.round(this.props.elapsed  / 100);
-          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
-          var message =
-            'React has been successfully running for ' + seconds + ' seconds.';
-
-          return React.DOM.p(null, message);
-        }
-      });
-
-      // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
-      var ExampleApplicationFactory = React.createFactory(ExampleApplication);
-
-      var start = new Date().getTime();
-      setInterval(function() {
-        ReactDOM.render(
-          ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
-          document.getElementById('container')
-        );
-      }, 50);
-    </script>
-  </body>
-</html>
diff --git a/examples/fiber/debugger/.env b/examples/fiber/debugger/.env
deleted file mode 100644
index 9d12ed5867..0000000000
--- a/examples/fiber/debugger/.env
+++ /dev/null
@@ -1 +0,0 @@
-NODE_PATH=../../../build/packages
\ No newline at end of file
diff --git a/examples/jquery-bootstrap/css/example.css b/examples/jquery-bootstrap/css/example.css
deleted file mode 100644
index d40f2fbd05..0000000000
--- a/examples/jquery-bootstrap/css/example.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.example {
-  margin: 20px;
-}
\ No newline at end of file
diff --git a/examples/jquery-bootstrap/index.html b/examples/jquery-bootstrap/index.html
deleted file mode 100644
index 58adfa69f1..0000000000
--- a/examples/jquery-bootstrap/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>jQuery Integration</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-    <link rel="stylesheet" href="css/example.css" type="text/css" />
-  </head>
-  <body>
-    <div id="jqueryexample"></div>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-    <script type="text/babel" src="js/app.js"></script>
-  </body>
-</html>
diff --git a/examples/jquery-bootstrap/js/app.js b/examples/jquery-bootstrap/js/app.js
deleted file mode 100644
index c1342d82a7..0000000000
--- a/examples/jquery-bootstrap/js/app.js
+++ /dev/null
@@ -1,139 +0,0 @@
-'use strict';
-
-// Simple pure-React component so we don't have to remember
-// Bootstrap's classes
-var BootstrapButton = React.createClass({
-  render: function() {
-    return (
-      <a {...this.props}
-        href="javascript:;"
-        role="button"
-        className={(this.props.className || '') + ' btn'} />
-    );
-  }
-});
-
-var BootstrapModal = React.createClass({
-  // The following two methods are the only places we need to
-  // integrate Bootstrap or jQuery with the components lifecycle methods.
-  componentDidMount: function() {
-    // When the component is added, turn it into a modal
-    $(this.refs.root).modal({backdrop: 'static', keyboard: false, show: false});
-
-    // Bootstrap's modal class exposes a few events for hooking into modal
-    // functionality. Lets hook into one of them:
-    $(this.refs.root).on('hidden.bs.modal', this.handleHidden);
-  },
-  componentWillUnmount: function() {
-    $(this.refs.root).off('hidden.bs.modal', this.handleHidden);
-  },
-  close: function() {
-    $(this.refs.root).modal('hide');
-  },
-  open: function() {
-    $(this.refs.root).modal('show');
-  },
-  render: function() {
-    var confirmButton = null;
-    var cancelButton = null;
-
-    if (this.props.confirm) {
-      confirmButton = (
-        <BootstrapButton
-          onClick={this.handleConfirm}
-          className="btn-primary">
-          {this.props.confirm}
-        </BootstrapButton>
-      );
-    }
-    if (this.props.cancel) {
-      cancelButton = (
-        <BootstrapButton onClick={this.handleCancel} className="btn-default">
-          {this.props.cancel}
-        </BootstrapButton>
-      );
-    }
-
-    return (
-      <div className="modal fade" ref="root">
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-header">
-              <button
-                type="button"
-                className="close"
-                onClick={this.handleCancel}>
-                &times;
-              </button>
-              <h3>{this.props.title}</h3>
-            </div>
-            <div className="modal-body">
-              {this.props.children}
-            </div>
-            <div className="modal-footer">
-              {cancelButton}
-              {confirmButton}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-  handleCancel: function() {
-    if (this.props.onCancel) {
-      this.props.onCancel();
-    }
-  },
-  handleConfirm: function() {
-    if (this.props.onConfirm) {
-      this.props.onConfirm();
-    }
-  },
-  handleHidden: function() {
-    if (this.props.onHidden) {
-      this.props.onHidden();
-    }
-  }
-});
-
-var Example = React.createClass({
-  handleCancel: function() {
-    if (confirm('Are you sure you want to cancel?')) {
-      this.refs.modal.close();
-    }
-  },
-  render: function() {
-    var modal = null;
-    modal = (
-      <BootstrapModal
-        ref="modal"
-        confirm="OK"
-        cancel="Cancel"
-        onCancel={this.handleCancel}
-        onConfirm={this.closeModal}
-        onHidden={this.handleModalDidClose}
-        title="Hello, Bootstrap!">
-          This is a React component powered by jQuery and Bootstrap!
-      </BootstrapModal>
-    );
-    return (
-      <div className="example">
-        {modal}
-        <BootstrapButton onClick={this.openModal} className="btn-default">
-          Open modal
-        </BootstrapButton>
-      </div>
-    );
-  },
-  openModal: function() {
-    this.refs.modal.open();
-  },
-  closeModal: function() {
-    this.refs.modal.close();
-  },
-  handleModalDidClose: function() {
-    alert("The modal has been dismissed!");
-  }
-});
-
-ReactDOM.render(<Example />, document.getElementById('jqueryexample'));
diff --git a/examples/jquery-mobile/README.md b/examples/jquery-mobile/README.md
deleted file mode 100644
index dd9661a363..0000000000
--- a/examples/jquery-mobile/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-jQuery Mobile React Example
-===========================
-
-This example demonstrates how jQuery Mobile applications can be built with React.
-
-The source code is based on jQuery Mobile's [pages-multi-page example](https://github.com/jquery/jquery-mobile/tree/master/demos/pages-multi-page).
diff --git a/examples/jquery-mobile/index.html b/examples/jquery-mobile/index.html
deleted file mode 100644
index b244949b49..0000000000
--- a/examples/jquery-mobile/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>jQuery Mobile React Example</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
-  <link rel="stylesheet" href="https://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css" />
-</head>
-<body class="ui-mobile-viewport ui-overlay-a">
-  <div id="content"></div>
-  <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
-  <script src="../../build/react.js"></script>
-  <script src="../../build/react-dom.js"></script>
-  <script src="js/app.js"></script>
-</body>
-</html>
diff --git a/examples/jquery-mobile/js/app.js b/examples/jquery-mobile/js/app.js
deleted file mode 100644
index 1eb728bbd5..0000000000
--- a/examples/jquery-mobile/js/app.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * jQuery Mobile React Example
- *
- * Main application script.
- * For variety, this example is written in 100% JSHint-compliant JavaScript, not in JSX.
- *
- * Component structure:
- *
- * - App
- *   |-- JQueryMobilePage (one)
- *   |   |-- JQueryMobileHeader
- *   |   |-- JQueryMobileContent
- *   |   |   |-- PageOneContent
- *   |   |       |-- JQueryMobileButton
- *   |   |-- JQueryMobileFooter
- *   |-- JQueryMobilePage (two)
- *   |   |-- JQueryMobileHeader
- *   |   |-- JQueryMobileContent
- *   |   |   |-- PageTwoContent
- *   |   |       |-- JQueryMobileButton
- *   |   |-- JQueryMobileFooter
- *   |-- JQueryMobilePage (popup)
- *       |-- JQueryMobileHeader
- *       |-- JQueryMobileContent
- *       |   |-- PagePopUpContent
- *       |       |-- JQueryMobileButton
- *       |-- JQueryMobileFooter
- */
-
- /* global document, React */
-
-'use strict';
-
-/** Main application component. */
-var App = React.createClass({
-  displayName: 'App',
-
-  render: function() {
-    return React.DOM.div({className:'app'},
-      JQueryMobilePage({id:'one'}, PageOneContent(null)),
-      JQueryMobilePage({id:'two'}, PageTwoContent(null)),
-      JQueryMobilePage({id:'popup', headerTheme:'b'}, PagePopUpContent(null))
-    );
-  }
-});
-App = React.createFactory(App);
-
-/** jQuery Mobile button component. */
-var JQueryMobileButton = React.createClass({
-  displayName: 'JQueryMobileButton',
-
-  getDefaultProps: function() {
-    return {className:'ui-btn ui-shadow ui-corner-all'};
-  },
-
-  render: function() {
-    return React.DOM.p(null,
-      React.DOM.a(this.props, this.props.children)
-    );
-  }
-});
-JQueryMobileButton = React.createFactory(JQueryMobileButton);
-
-/** jQuery Mobile page content component. */
-var JQueryMobileContent = React.createClass({
-  displayName: 'JQueryMobileContent',
-
-  render: function() {
-    return React.DOM.div({role:'main', className:'ui-content'},
-      this.props.children
-    );
-  }
-});
-JQueryMobileContent = React.createFactory(JQueryMobileContent);
-
-/** jQuery Mobile footer component. */
-var JQueryMobileFooter = React.createClass({
-  displayName: 'JQueryMobileFooter',
-
-  render: function() {
-    return React.DOM.div({'data-role':'footer'},
-      React.DOM.h4(null, 'Page footer')
-    );
-  }
-});
-JQueryMobileFooter = React.createFactory(JQueryMobileFooter);
-
-/** jQuery Mobile header component. */
-var JQueryMobileHeader = React.createClass({
-  displayName: 'JQueryMobileHeader',
-
-  render: function() {
-    return React.DOM.div({'data-role':'header', 'data-theme':this.props.headerTheme},
-      React.DOM.h1(null, this.props.title)
-    );
-  }
-});
-JQueryMobileHeader = React.createFactory(JQueryMobileHeader);
-
-/** jQuery Mobile page component. */
-var JQueryMobilePage = React.createClass({
-  displayName: 'JQueryMobilePage',
-
-  getDefaultProps: function() {
-    return {'data-role':'page', 'data-theme':'a', headerTheme:'a'};
-  },
-
-  render: function() {
-    var props = {};
-    for (var key in this.props) {
-      props[key] = this.props[key];
-    }
-    return React.DOM.div(props,
-      JQueryMobileHeader({title:'Page ' + this.props.id, headerTheme:this.props.headerTheme}),
-      JQueryMobileContent(null, this.props.children),
-      JQueryMobileFooter(null)
-    );
-  }
-});
-JQueryMobilePage = React.createFactory(JQueryMobilePage);
-
-/** Application page one component. */
-var PageOneContent = React.createClass({
-  displayName: 'PageOneContent',
-
-  render: function() {
-    return React.DOM.div(null,
-      React.DOM.h2(null, 'One'),
-      React.DOM.p(null,
-        'I have an ',
-        React.DOM.code(null, 'id'),
-        ' of "one" on my page container. I\'m first in the source order so I\'m shown when the page loads.'
-      ),
-      React.DOM.p(null, 'This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.'),
-      React.DOM.p(null, 'Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.'),
-      React.DOM.p(null,
-        'You link to internal pages by referring to the ',
-        React.DOM.code(null, 'id'),
-        ' of the page you want to show. For example, to ',
-        React.DOM.a({href:'#two'}, 'link'),
-        ' to the page with an ',
-        React.DOM.code(null, 'id'),
-        ' of "two", my link would have a ',
-        React.DOM.code(null, 'href="#two"'),
-        ' in the code.'
-      ),
-      React.DOM.h3(null, 'Show internal pages:'),
-      JQueryMobileButton({href:'#two'}, 'Show page "two"'),
-      JQueryMobileButton({href:'#popup', 'data-rel':'dialog', 'data-transition':'pop'}, 'Show page "popup" (as a dialog)')
-    );
-  }
-});
-PageOneContent = React.createFactory(PageOneContent);
-
-/** Application page two component. */
-var PageTwoContent = React.createClass({
-  displayName: 'PageTwoContent',
-
-  render: function() {
-    return React.DOM.div(null,
-      React.DOM.h2(null, 'Two'),
-      React.DOM.p(null, 'I have an id of "two" on my page container. I\'m the second page container in this multi-page template.'),
-      React.DOM.p(null, 'Notice that the theme is different for this page because we\'ve added a few ',
-        React.DOM.code(null, 'data-theme'),
-        ' swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we\'re keeping these simple.'),
-      JQueryMobileButton({href:'#one', 'data-direction':'reverse', className:'ui-btn ui-shadow ui-corner-all ui-btn-b'}, 'Back to page "one"')
-    );
-  }
-});
-PageTwoContent = React.createFactory(PageTwoContent);
-
-/** Application popup page component. */
-var PagePopUpContent = React.createClass({
-  displayName: 'PagePopUpContent',
-
-  render: function() {
-    return React.DOM.div(null,
-      React.DOM.h2(null, 'Popup'),
-      React.DOM.p(null, 'I have an id of "popup" on my page container and only look like a dialog because the link to me had a ',
-        React.DOM.code(null, 'data-rel="dialog"'),
-        ' attribute which gives me this inset look and a ',
-        React.DOM.code(null, 'data-transition="pop"'),
-        ' attribute to change the transition to pop. Without this, I\'d be styled as a normal page.'),
-      JQueryMobileButton({href:'#one', 'data-rel':'back', className:'ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left'}, 'Back to page "one"')
-    );
-  }
-});
-PagePopUpContent = React.createFactory(PagePopUpContent);
-
-// Render application.
-ReactDOM.render(App(null), document.getElementById('content'));
diff --git a/examples/quadratic/example.js b/examples/quadratic/example.js
deleted file mode 100644
index c86ba29aab..0000000000
--- a/examples/quadratic/example.js
+++ /dev/null
@@ -1,59 +0,0 @@
-var QuadraticCalculator = React.createClass({
-  getInitialState: function() {
-    return {
-      a: 1,
-      b: 3,
-      c: -4
-    };
-  },
-
-  /**
-   * This function will be re-bound in render multiple times. Each .bind() will
-   * create a new function that calls this with the appropriate key as well as
-   * the event. The key is the key in the state object that the value should be
-   * mapped from.
-   */
-  handleInputChange: function(key, event) {
-    var partialState = {};
-    partialState[key] = parseFloat(event.target.value);
-    this.setState(partialState);
-  },
-
-  render: function() {
-    var a = this.state.a;
-    var b = this.state.b;
-    var c = this.state.c;
-    var root = Math.sqrt(Math.pow(b, 2) - 4 * a * c);
-    var denominator = 2 * a;
-    var x1 = (-b + root) / denominator;
-    var x2 = (-b - root) / denominator;
-    return (
-      <div>
-        <strong>
-          <em>ax</em><sup>2</sup> + <em>bx</em> + <em>c</em> = 0
-        </strong>
-        <h4>Solve for <em>x</em>:</h4>
-        <p>
-          <label>
-            a: <input type="number" value={a} onChange={this.handleInputChange.bind(null, 'a')} />
-          </label>
-          <br />
-          <label>
-            b: <input type="number" value={b} onChange={this.handleInputChange.bind(null, 'b')} />
-          </label>
-          <br />
-          <label>
-            c: <input type="number" value={c} onChange={this.handleInputChange.bind(null, 'c')} />
-          </label>
-          <br />
-          x: <strong>{x1}, {x2}</strong>
-        </p>
-      </div>
-    );
-  }
-});
-
-ReactDOM.render(
-  <QuadraticCalculator />,
-  document.getElementById('container')
-);
diff --git a/examples/quadratic/index.html b/examples/quadratic/index.html
deleted file mode 100644
index 2feffcb57e..0000000000
--- a/examples/quadratic/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Quadratic Formula Calculator</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Quadratic Formula Calculator</h1>
-    <div id="container">
-      <p>
-        If you can see this, React is <strong>not</strong> working right. This is probably because you&apos;re viewing
-        this on your file system instead of a web server. Try running
-        <pre>
-          python -m SimpleHTTPServer
-        </pre>
-        and going to <a href="http://localhost:8000/">http://localhost:8000/</a>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX in a separate file and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script type="text/babel" src="example.js"></script>
-  </body>
-</html>
diff --git a/examples/shared/css/base.css b/examples/shared/css/base.css
deleted file mode 100644
index bf382be389..0000000000
--- a/examples/shared/css/base.css
+++ /dev/null
@@ -1,62 +0,0 @@
-body {
-  background: #fff;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 15px;
-  line-height: 1.7;
-  margin: 0;
-  padding: 30px;
-}
-
-a {
-  color: #4183c4;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-code {
-  background-color: #f8f8f8;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
-  font-size: 12px;
-  margin: 0 2px;
-  padding: 0px 5px;
-}
-
-h1, h2, h3, h4 {
-  font-weight: bold;
-  margin: 0 0 15px;
-  padding: 0;
-}
-
-h1 {
-  border-bottom: 1px solid #ddd;
-  font-size: 2.5em;
-  font-weight: bold;
-  margin: 0 0 15px;
-  padding: 0;
-}
-
-h2 {
-  border-bottom: 1px solid #eee;
-  font-size: 2em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.2em;
-}
-
-p, ul {
-  margin: 15px 0;
-}
-
-ul {
-  padding-left: 30px;
-}
diff --git a/examples/transitions/index.html b/examples/transitions/index.html
deleted file mode 100644
index 99f8d18f24..0000000000
--- a/examples/transitions/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Example with Transitions</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-    <link rel="stylesheet" href="transition.css" />
-  </head>
-  <body>
-    <h1>Example with Transitions</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="https://github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <h4>Example Details</h4>
-    <p>This is written with JSX and transformed in the browser.</p>
-    <p>
-      Learn more about React at
-      <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="../../build/react-with-addons.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script type="text/babel">
-      var CSSTransitionGroup = React.addons.CSSTransitionGroup;
-      var INTERVAL = 2000;
-
-      var AnimateDemo = React.createClass({
-        getInitialState: function() {
-          return {current: 0};
-        },
-
-        componentDidMount: function() {
-          this.interval = setInterval(this.tick, INTERVAL);
-        },
-
-        componentWillUnmount: function() {
-          clearInterval(this.interval);
-        },
-
-        tick: function() {
-          this.setState({current: this.state.current + 1});
-        },
-
-        render: function() {
-          var children = [];
-          var pos = 0;
-          var colors = ['red', 'gray', 'blue'];
-          for (var i = this.state.current; i < this.state.current + colors.length; i++) {
-            var style = {
-              left: pos * 128,
-              background: colors[i % colors.length]
-            };
-            pos++;
-            children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
-          }
-          return (
-            <CSSTransitionGroup
-              className="animateExample"
-              transitionEnterTimeout={250}
-              transitionLeaveTimeout={250}
-              transitionName="example">
-              {children}
-            </CSSTransitionGroup>
-          );
-        }
-      });
-
-      ReactDOM.render(
-        <AnimateDemo />,
-        document.getElementById('container')
-      );
-    </script>
-  </body>
-</html>
diff --git a/examples/transitions/transition.css b/examples/transitions/transition.css
deleted file mode 100644
index ee851d1136..0000000000
--- a/examples/transitions/transition.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.example-enter,
-.example-leave {
-  -webkit-transition: all .25s;
-  transition: all .25s;
-}
-
-.example-enter,
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-
-.example-leave.example-leave-active {
-  margin-left: -128px;
-}
-
-.example-enter {
-  margin-left: 128px;
-}
-
-.example-enter.example-enter-active,
-.example-leave {
-  margin-left: 0;
-  opacity: 1;
-}
-
-.animateExample {
-  display: block;
-  height: 128px;
-  position: relative;
-  width: 384px;
-}
-
-.animateItem {
-  color: white;
-  font-size: 36px;
-  font-weight: bold;
-  height: 128px;
-  line-height: 128px;
-  position: absolute;
-  text-align: center;
-  -webkit-transition: all .25s; /* TODO: make this a move animation */
-  transition: all .25s; /* TODO: make this a move animation */
-  width: 128px;
-}
diff --git a/examples/webcomponents/index.html b/examples/webcomponents/index.html
deleted file mode 100644
index 80b63a7f98..0000000000
--- a/examples/webcomponents/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Basic Example with Web Components</title>
-    <link rel="stylesheet" href="../shared/css/base.css" />
-  </head>
-  <body>
-    <h1>Basic Example with Web Components</h1>
-    <div id="container">
-      <p>
-        To install React, follow the instructions on
-        <a href="http://www.github.com/facebook/react/">GitHub</a>.
-      </p>
-      <p>
-        If you can see this, React is <strong>not</strong> working right.
-        If you checked out the source from GitHub make sure to run <code>grunt</code>.
-      </p>
-    </div>
-    <br /><br />
-    <h4>Example Details</h4>
-    <p>
-        This example demonstrates Web Component / React Component interoperability
-        by rendering a React Component, which renders a Web Component, which renders
-        another React Component in the Web Component's shadow DOM.
-    <p>
-    <p>
-      Learn more about React at
-      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
-    </p>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.js"></script>
-    <script src="../../build/react.js"></script>
-    <script src="../../build/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-
-    <script type="text/babel">
-
-      // Define Web Component
-      var proto = Object.create(HTMLElement.prototype, {
-        attachedCallback: {
-          value: function() {
-            var mountPoint = document.createElement('span');
-            this.createShadowRoot().appendChild(mountPoint);
-
-            var name = this.getAttribute('name');
-            var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
-            ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
-          }
-        }
-      });
-      document.registerElement('x-search', {prototype: proto});
-
-      // Define React Component
-      class HelloMessage extends React.Component {
-        render() {
-          return <div>Hello <x-search name={this.props.name} />!</div>;
-        }
-      }
-
-      // Mount React Component (which uses Web Component which uses React)
-      var container = document.getElementById('container');
-      ReactDOM.render(<HelloMessage name="Jim Sproch" />, container);
-    </script>
-  </body>
-</html>
diff --git a/fixtures/fiber-debugger/.env b/fixtures/fiber-debugger/.env
new file mode 100644
index 0000000000..9be7932319
--- /dev/null
+++ b/fixtures/fiber-debugger/.env
@@ -0,0 +1 @@
+NODE_PATH=../../build/packages
\ No newline at end of file
diff --git a/examples/fiber/debugger/.gitignore b/fixtures/fiber-debugger/.gitignore
similarity index 100%
rename from examples/fiber/debugger/.gitignore
rename to fixtures/fiber-debugger/.gitignore
diff --git a/examples/fiber/debugger/README.md b/fixtures/fiber-debugger/README.md
similarity index 100%
rename from examples/fiber/debugger/README.md
rename to fixtures/fiber-debugger/README.md
diff --git a/examples/fiber/debugger/package.json b/fixtures/fiber-debugger/package.json
similarity index 100%
rename from examples/fiber/debugger/package.json
rename to fixtures/fiber-debugger/package.json
diff --git a/examples/fiber/debugger/public/favicon.ico b/fixtures/fiber-debugger/public/favicon.ico
similarity index 100%
rename from examples/fiber/debugger/public/favicon.ico
rename to fixtures/fiber-debugger/public/favicon.ico
diff --git a/examples/fiber/debugger/public/index.html b/fixtures/fiber-debugger/public/index.html
similarity index 100%
rename from examples/fiber/debugger/public/index.html
rename to fixtures/fiber-debugger/public/index.html
diff --git a/examples/fiber/debugger/src/App.js b/fixtures/fiber-debugger/src/App.js
similarity index 100%
rename from examples/fiber/debugger/src/App.js
rename to fixtures/fiber-debugger/src/App.js
diff --git a/examples/fiber/debugger/src/Editor.js b/fixtures/fiber-debugger/src/Editor.js
similarity index 100%
rename from examples/fiber/debugger/src/Editor.js
rename to fixtures/fiber-debugger/src/Editor.js
diff --git a/examples/fiber/debugger/src/Fibers.js b/fixtures/fiber-debugger/src/Fibers.js
similarity index 100%
rename from examples/fiber/debugger/src/Fibers.js
rename to fixtures/fiber-debugger/src/Fibers.js
diff --git a/examples/fiber/debugger/src/describeFibers.js b/fixtures/fiber-debugger/src/describeFibers.js
similarity index 100%
rename from examples/fiber/debugger/src/describeFibers.js
rename to fixtures/fiber-debugger/src/describeFibers.js
diff --git a/examples/fiber/debugger/src/index.css b/fixtures/fiber-debugger/src/index.css
similarity index 100%
rename from examples/fiber/debugger/src/index.css
rename to fixtures/fiber-debugger/src/index.css
diff --git a/examples/fiber/debugger/src/index.js b/fixtures/fiber-debugger/src/index.js
similarity index 100%
rename from examples/fiber/debugger/src/index.js
rename to fixtures/fiber-debugger/src/index.js
diff --git a/examples/fiber/debugger/yarn.lock b/fixtures/fiber-debugger/yarn.lock
similarity index 100%
rename from examples/fiber/debugger/yarn.lock
rename to fixtures/fiber-debugger/yarn.lock
diff --git a/examples/fiber/index.html b/fixtures/fiber-triangle/index.html
similarity index 100%
rename from examples/fiber/index.html
rename to fixtures/fiber-triangle/index.html
diff --git a/fixtures/packaging/babel-standalone.html b/fixtures/packaging/babel-standalone.html
new file mode 100644
index 0000000000..ea37f34df0
--- /dev/null
+++ b/fixtures/packaging/babel-standalone.html
@@ -0,0 +1,14 @@
+<html>
+  <body>
+    <script src="../../build/react.js"></script>
+    <script src="../../build/react-dom.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <div id="container"></div>
+    <script type="text/babel">
+      ReactDOM.render(
+        <h1>Hello World!</h1>,
+        document.getElementById('container')
+      );
+    </script>
+  </body>
+</html>
\ No newline at end of file