Some Additions for consideration.

01 - Core/08 - Transferring Props.js

@@ -78,4 +78,62 @@ class App {
     return <div>{fancyButton}</div>;
   }
 
-}
+}
+
+
+// Vanilla JS:
+// While rest and spread operators are being waited on (https://gist.github.com/sebmarkbage/aa849c7973cb4452c547) 
+// And while we wait on shims, simple helper methods and array destructuring can be used:
+
+class FancyButton {
+
+  static defaultProps = {
+    color: 'blue'
+  };
+
+  props: {
+    color: string,
+    width: number,
+    height: number,
+    ...HTMLPropTypes
+  },
+
+  // This uses rest and spread operators
+  // https://gist.github.com/sebmarkbage/aa849c7973cb4452c547
+
+  render(props, state) {
+
+    var [{color}, {className}, {style}, {width}, {height}, ...other] = arryFromProps(props);
+
+    var button = React.DOM.button(
+      propsFromArray([
+        ...other,
+        ['className', joinClasses(className, 'FancyButton')],
+        ['padding', 10],
+        ['width', width - 10],
+        ['height', height - 10]
+      ])
+    );
+
+    return button;
+  }
+
+}
+
+// further a mixin could be used to do arrayFromProps automatically.
+
+// Implementations of Helper Methods.
+function arrayFromProps(props){
+  var array = [];
+  // this uses the for-of loop, but it could easily be implemented otherwise.
+  for ([key, value] of props) {
+    array.push([key, value]);
+  }
+  return array;
+}
+
+function propsFromArray(array){
+  return array.reduce((obj, prop) => {
+    obj[prop[0]] = obj[1];
+  }, {})
+}

04 - Layout/01 - Primitives.js

@@ -13,8 +13,8 @@ class Fragment {
 
 // Position its content with an offset of `x` and `y`
 class Positioner {
-  render() {
-    var { x, y, children } = this.props;
+  render(props) {
+    var { x, y, children } = props;
     return (
       <div style={{ position: 'absolute', left: x, top: y }}>
         {children}
@@ -25,8 +25,8 @@ class Positioner {
 
 // Paint a box with size `width` and `height`
 class Box {
-  render() {
-    var { width, height } = this.props;
+  render(props) {
+    var { width, height } = props;
     return (
       <div style={{ width: width, height: height, background: '#f00' }}>
         {children}

04 - Layout/02 - Layout Components.js

@@ -68,5 +68,8 @@ class VerticalListItem {
     return {
       layoutHeight: this.props.height
     };
+
+    // Chrome is trying deliver an API to measure the size Nodes,
+    // by rendering them outside the DOM, that should be kept in mind here.
   }
 }

04 - Layout/04 - Inline Styles.md

@@ -95,3 +95,19 @@ var List = React.createClass({
 
 <List style={styles.list} elementStyle={styles.element} />
 ```
+
+## Drawbacks
+
+This approach will generally result in much better rendering performance, as it removes stylesheet complexity. However it does have a few shortcomings/challenges.
+
+There are many CSS properties that simply cannot be applied with inline styles. This includes all pseudo selectors (:hover, :focus, :active, etc) as well as pseudo-elements.
+
+Various states, like :hover, :focus can be worked around with javascript event handlers. This has the downside of relying on javascript.
+
+Other pseudo selectors, such as, :first-child, nth-child, etc, can be easily accounted for with javascript and actually helps with a better API.
+
+Pseudo elements (such as ::before, ::after) are simply impossible to achieve with inline-styles, but at the same time, strictly speaking, it should always be possible to replace them with real elements. The downside here, is that we may lose the semantic structure of the DOM because of this.
+
+To summarize, the major drawbacks are
+— Dependence on JS for :hover, :active etc.
+- Losing the semantic benefits of Pseudo elements by using real elements