Less magic is better for the future generations.

Author: Timer

packages/react-scripts/fixtures/kitchensink/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["latest"]
+  "presets": ["latest"],
+  "plugins": ["transform-class-properties"]
 }

packages/react-scripts/fixtures/kitchensink/.template.dependencies.json

@@ -3,6 +3,7 @@
     "babel-preset-latest": "6.16.0",
     "babel-register": "6.22.0",
     "babel-polyfill": "6.20.0",
+    "babel-plugin-transform-class-properties": "6.22.0",
     "chai": "3.5.0",
     "jsdom": "9.8.3",
     "mocha": "3.2.0"

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -1,24 +1,33 @@
-import React from 'react';
+import React, { Component, PropTypes, createElement } from 'react';
 
 class BuiltEmitter extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.callWhenDone = done => done();
+  static propTypes = {
+    feature: PropTypes.func.isRequired
   }
 
   componentDidMount() {
-    this.callWhenDone(() => document.dispatchEvent(new Event('ReactFeatureDidMount')));
+    const { feature } = this.props
+    if (!Component.isPrototypeOf(feature)) {
+      this.notifyRendered();
+    }
   }
 
-  render() {
-    const feature = React.cloneElement(React.Children.only(this.props.children), {
-      setCallWhenDone: done => {
-        this.callWhenDone = done;
-      }
-    });
+  notifyRendered() {
+    document.dispatchEvent(new Event('ReactFeatureDidMount'));
+  }
 
-    return <div>{feature}</div>;
+  render() {
+    const {
+      props: { feature },
+      notifyRendered
+    } = this;
+    return (
+      <div>
+        {createElement(feature, {
+          notifyRendered
+        })}
+      </div>
+    );
   }
 }
 
@@ -116,8 +125,11 @@ class App extends React.Component {
   }
 
   render() {
-    const Feature = this.state.feature;
-    return Feature ? <BuiltEmitter><Feature /></BuiltEmitter> : null;
+    const { feature } = this.state;
+    if (feature !== null) {
+      return <BuiltEmitter feature={feature} />;
+    }
+    return null
   }
 }
 

packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js

@@ -1,21 +1,27 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 import load from 'absoluteLoad'
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load() {
   return [
@@ -9,21 +9,27 @@ function load() {
   ];
 }
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(users) {
   return [
@@ -9,21 +9,27 @@ function load(users) {
   ];
 }
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load([{ id: 42, name: '42' }]);
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 async function load() {
   return [
@@ -9,21 +9,27 @@ async function load() {
   ];
 }
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = await load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js

@@ -1,13 +1,25 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
+
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
+
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
-export default class extends React.Component {
   users = [
     { id: 1, name: '1' },
     { id: 2, name: '2' },
     { id: 3, name: '3' },
     { id: 4, name: '4' }
   ];
 
+  componentDidMount() {
+    this.props.notifyRendered()
+  }
+
   render() {
     return (
       <div id="feature-class-properties">

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(prefix) {
   return [
@@ -9,21 +9,27 @@ function load(prefix) {
   ];
 }
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load('user_');
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 const styled = ([style]) => style.trim()
   .split(/\s*;\s*/)
@@ -14,21 +14,27 @@ function load() {
   ];
 }
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {

packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component, PropTypes } from 'react'
 
 function load(id = 0) {
   return [
@@ -9,21 +9,27 @@ function load(id = 0) {
   ];
 }
 
-export default class extends React.Component {
-  constructor(props) {
-    super(props);
+export default class extends Component {
+  static propTypes = {
+    notifyRendered: PropTypes.func
+  }
 
-    this.done = () => {};
-    this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
-      this.done = done;
-    });
+  static defaultProps = {
+    notifyRendered: () => {}
+  }
 
+  constructor(props) {
+    super(props);
     this.state = { users: [] };
   }
 
   async componentDidMount() {
     const users = load();
-    this.setState({ users }, () => this.done());
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.notifyRendered();
   }
 
   render() {