From 91f8ffef124186db8af29641fe1d44ecca36dee1 Mon Sep 17 00:00:00 2001
From: Ben Alpert <ben@benalpert.com>
Date: Thu, 23 Oct 2014 00:45:33 -0700
Subject: [PATCH 01/15] Fix typo in 0.12 RC blog post

---
 _posts/2014-10-16-react-v0.12-rc1.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2014-10-16-react-v0.12-rc1.md b/_posts/2014-10-16-react-v0.12-rc1.md
index 95076898..56031451 100644
--- a/_posts/2014-10-16-react-v0.12-rc1.md
+++ b/_posts/2014-10-16-react-v0.12-rc1.md
@@ -106,7 +106,7 @@ You do NOT need to change the way to define `key` and `ref`, only if you need to
 
 ## Breaking Change: Default Props Resolution
 
-This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolve props.
+This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.
 
 You will primarily see this breaking if you're also using `transferPropsTo`.
 

From 5b70c84e8d0b7c4635d2de1ce595d04e223062a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Wed, 22 Oct 2014 18:07:19 -0700
Subject: [PATCH 02/15] Update properties/elements

---
 docs/ref-04-tags-and-attributes.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/ref-04-tags-and-attributes.md b/docs/ref-04-tags-and-attributes.md
index c0d01081..25173e1c 100644
--- a/docs/ref-04-tags-and-attributes.md
+++ b/docs/ref-04-tags-and-attributes.md
@@ -20,8 +20,8 @@ button canvas caption cite code col colgroup data datalist dd del details dfn
 dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
 h6 head header hr html i iframe img input ins kbd keygen label legend li link
 main map mark menu menuitem meta meter nav noscript object ol optgroup option
-output p param pre progress q rp rt ruby s samp script section select small
-source span strong style sub summary sup table tbody td textarea tfoot th
+output p param picture pre progress q rp rt ruby s samp script section select
+small source span strong style sub summary sup table tbody td textarea tfoot th
 thead time title tr track u ul var video wbr
 ```
 
@@ -52,15 +52,15 @@ For a list of events, see [Supported Events](/react/docs/events.html).
 These standard attributes are supported:
 
 ```
-accept accessKey action allowFullScreen allowTransparency alt async
-autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked
+accept acceptCharset accessKey action allowFullScreen allowTransparency alt
+async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
 className cols colSpan content contentEditable contextMenu controls coords
 crossOrigin data dateTime defer dir disabled download draggable encType form
 formNoValidate frameBorder height hidden href hrefLang htmlFor httpEquiv icon
-id label lang list loop max maxLength mediaGroup method min multiple muted
-name noValidate open pattern placeholder poster preload radioGroup readOnly rel
-required role rows rowSpan sandbox scope scrollLeft scrolling scrollTop
-seamless selected shape size span spellCheck src srcDoc srcSet start step
+id label lang list loop manifest max maxLength media mediaGroup method min
+multiple muted name noValidate open pattern placeholder poster preload
+radioGroup readOnly rel required role rows rowSpan sandbox scope scrolling
+seamless selected shape size sizes span spellCheck src srcDoc srcSet start step
 style tabIndex target title type useMap value width wmode
 ```
 

From 12b9311066d08f3caaad0912ee7d9f12baf8923b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Wed, 22 Oct 2014 18:30:11 -0700
Subject: [PATCH 03/15] React.renderComponent -> React.render

This covers most everything. The perf suite still needs work for the
Element updates. And the server rendering example needs to be done
wholesale.
---
 _js/examples/hello.js    | 4 ++--
 _js/examples/markdown.js | 4 ++--
 _js/examples/timer.js    | 4 ++--
 _js/examples/todo.js     | 4 ++--
 _js/html-jsx.js          | 2 +-
 _js/jsx-compiler.js      | 4 ++--
 _js/live_editor.js       | 4 ++--
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/_js/examples/hello.js b/_js/examples/hello.js
index 3805db43..b71430a8 100644
--- a/_js/examples/hello.js
+++ b/_js/examples/hello.js
@@ -5,10 +5,10 @@ var HelloMessage = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+React.render(<HelloMessage name=\"John\" />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,
   document.getElementById('helloExample')
 );
diff --git a/_js/examples/markdown.js b/_js/examples/markdown.js
index 6be96d5c..956d81de 100644
--- a/_js/examples/markdown.js
+++ b/_js/examples/markdown.js
@@ -28,10 +28,10 @@ var MarkdownEditor = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<MarkdownEditor />, mountNode);\
+React.render(<MarkdownEditor />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
   document.getElementById('markdownExample')
 );
diff --git a/_js/examples/timer.js b/_js/examples/timer.js
index 2ca876a2..c54e8b4f 100644
--- a/_js/examples/timer.js
+++ b/_js/examples/timer.js
@@ -19,10 +19,10 @@ var Timer = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<Timer />, mountNode);\
+React.render(<Timer />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,
   document.getElementById('timerExample')
 );
diff --git a/_js/examples/todo.js b/_js/examples/todo.js
index 3db2b29a..6c628cea 100644
--- a/_js/examples/todo.js
+++ b/_js/examples/todo.js
@@ -33,10 +33,10 @@ var TodoApp = React.createClass({\n\
     );\n\
   }\n\
 });\n\
-React.renderComponent(<TodoApp />, mountNode);\
+React.render(<TodoApp />, mountNode);\
 ";
 
-React.renderComponent(
+React.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,
   document.getElementById('todoExample')
 );
diff --git a/_js/html-jsx.js b/_js/html-jsx.js
index b76d0254..d7525a83 100644
--- a/_js/html-jsx.js
+++ b/_js/html-jsx.js
@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
     }
   });
 
-  React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
+  React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
 }());
diff --git a/_js/jsx-compiler.js b/_js/jsx-compiler.js
index 6eb2f1e6..28364eb8 100644
--- a/_js/jsx-compiler.js
+++ b/_js/jsx-compiler.js
@@ -5,7 +5,7 @@ var HelloMessage = React.createClass({\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+React.render(<HelloMessage name=\"John\" />, mountNode);\
 ";
 
 function transformer(harmony, code) {
@@ -39,7 +39,7 @@ var CompilerPlayground = React.createClass({
     );
   },
 });
-React.renderComponent(
+React.render(
   <CompilerPlayground />,
   document.getElementById('jsxCompiler')
 );
diff --git a/_js/live_editor.js b/_js/live_editor.js
index bfd8595d..4e453a79 100644
--- a/_js/live_editor.js
+++ b/_js/live_editor.js
@@ -190,7 +190,7 @@ var ReactPlayground = React.createClass({
     try {
       var compiledCode = this.compileCode();
       if (this.props.renderCode) {
-        React.renderComponent(
+        React.render(
           <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
           mountNode
         );
@@ -199,7 +199,7 @@ var ReactPlayground = React.createClass({
       }
     } catch (err) {
       this.setTimeout(function() {
-        React.renderComponent(
+        React.render(
           <div className="playgroundError">{err.toString()}</div>,
           mountNode
         );

From a0a4b58af4f1140fa306be6c88e9a2057392d8f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 23 Oct 2014 20:50:27 -0700
Subject: [PATCH 04/15] [docs] Glossary

Pulled in https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589
mostly verbatim
---
 _data/nav_docs.yml            |   2 +
 docs/ref-08-reconciliation.md |   1 +
 docs/ref-09-glossary.md       | 192 ++++++++++++++++++++++++++++++++++
 3 files changed, 195 insertions(+)
 create mode 100644 docs/ref-09-glossary.md

diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml
index e7c71b68..4764540e 100644
--- a/_data/nav_docs.yml
+++ b/_data/nav_docs.yml
@@ -77,6 +77,8 @@
     title: Special Non-DOM Attributes
   - id: reconciliation
     title: Reconciliation
+  - id: glossary
+    title: React (Virtual) DOM Terminology
 - title: Flux
   items:
   - id: flux-overview
diff --git a/docs/ref-08-reconciliation.md b/docs/ref-08-reconciliation.md
index 60f669ca..0c525eb2 100644
--- a/docs/ref-08-reconciliation.md
+++ b/docs/ref-08-reconciliation.md
@@ -3,6 +3,7 @@ id: reconciliation
 title: Reconciliation
 permalink: reconciliation.html
 prev: special-non-dom-attributes.html
+next: glossary.html
 ---
 
 React's key design decision is to make the API seem like it re-renders the whole app on every update. This makes writing applications a lot easier but is also an incredible challenge to make it tractable. This article explains how with powerful heuristics we managed to turn a O(n<sup>3</sup>) problem into a O(n) one.
diff --git a/docs/ref-09-glossary.md b/docs/ref-09-glossary.md
new file mode 100644
index 00000000..3d8f200b
--- /dev/null
+++ b/docs/ref-09-glossary.md
@@ -0,0 +1,192 @@
+---
+id: glossary
+title: React (Virtual) DOM Terminology
+permalink: glossary.html
+prev: reconciliation.html
+---
+
+In React's terminology, there are five core types that are important to distinguish:
+
+- [ReactElement / ReactElement Factory](#react-elements)
+- [ReactNode](#react-nodes)
+- [ReactComponent / ReactComponent Class](#react-components)
+
+## React Elements
+
+The primary type in React is the `ReactElement`. It has four properties: `type`, `props`, `key` and `ref`. It has no methods and nothing on the prototype.
+
+You can create one of these object through `React.createElement`.
+
+```javascript
+var root = React.createElement('div');
+```
+
+To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` a long with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
+
+```javascript
+React.render(root, document.body);
+```
+
+To add properties to a DOM element, pass a properties object as the second argument and children to the third argument.
+
+```javascript
+var child = React.createElement('li', null, 'Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child);
+React.render(root, document.body);
+```
+
+If you use React JSX, then these `ReactElement`s are created for you. So this is equivalent:
+
+```javascript
+var root = <ul className="my-list">
+             <li>Text Content</li>
+           </ul>;
+React.render(root, document.body);
+```
+
+__Factories__
+
+A `ReactElement`-factory is simply a function that generates a `ReactElement` with a particular `type` property. React has a built-in helper for you to create factories. It's effectively just:
+
+```javascript
+function createFactory(type){
+  return React.createElement.bind(null, type);
+}
+```
+
+It allows you to create a convenient short-hand instead of typing out `React.createElement('div')` all the time.
+
+```javascript
+var div = React.createFactory('div');
+var root = div({ className: 'my-div' });
+React.render(root, document.body);
+```
+
+React already have built-in factories for common HTML tags:
+
+```javascript
+var root = React.DOM.ul({ className: 'my-list' },
+             React.DOM.li(null, 'Text Content')
+           );
+```
+
+If you are using JSX you have no need for factories. JSX already provides a convenient short-hand for creating `ReactElement`s.
+
+
+## React Nodes
+
+A `ReactNode` can be either:
+- `ReactElement`
+- `string` (aka `ReactText`)
+- `number` (aka `ReactText`)
+- Array of `ReactNode`s (aka `ReactFragment`)
+
+These are used as properties of other `ReactElement`s to represent children. Effectively they create a tree of `ReactElement`s.
+
+
+## React Components
+
+You can use React using only `ReactElement`s but to really take advantage of React, you'll want to use `ReactComponent`s to create encapsulations with embedded state.
+
+A `ReactComponent` Class is simply just a JavaScript class (or "constructor function").
+
+```javascript
+var MyComponent = React.createClass({
+  render: function() {
+    ...
+  }
+});
+```
+
+When this constructor is invoked it is expected to return an object with at least a `render` method on it. This object is referred to as a `ReactComponent`.
+
+```javascript
+var component = new MyComponent(props); // never do this
+```
+
+Other than for testing, you would normally __never__ call this constructor yourself. React calls it for you.
+
+Instead, you pass the `ReactComponent` Class to `createElement` you get a `ReactElement`.
+
+```javascript
+var element = React.createElement(MyComponent);
+```
+
+OR using JSX:
+
+```javascript
+var element = <MyComponent />;
+```
+
+When this is passed to `React.render`, React will call the constructor for you and create a `ReactComponent`, which returned.
+
+```javascript
+var component = React.render(element, document.body);
+```
+
+If you keep calling `React.render` with the same type of `ReactElement` and the same container DOM `Element` it always returns the same instance. This instance is stateful.
+
+```javascript
+var componentA = React.render(<MyComponent />, document.body);
+var componentB = React.render(<MyComponent />, document.body);
+componentA === componentB; // true
+```
+
+This is why you shouldn't construct your own instance. Instead, `ReactElement` is a virtual `ReactComponent` before it gets constructed. An old and new `ReactElement` can be compared to see if a new `ReactComponent` instance is created or if the existing one is reused.
+
+The `render` method of a `ReactComponent` is expected to return another `ReactElement`. This allows these components to be composed. Ultimately the render resolves into `ReactElement` with a `string` tag which instantiates a DOM `Element` instance and inserts it into the document.
+
+
+## Formal Type Definitions
+
+__Entry Point__
+
+```
+React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;
+```
+
+__Nodes and Elements__
+
+```
+type ReactNode = ReactElement | ReactFragment | ReactText;
+
+type ReactElement = ReactComponentElement | ReactDOMElement;
+
+type ReactDOMElement = {
+  type : string,
+  props : {
+    children : ReactNodeList,
+    className : string,
+    etc.
+  },
+  key : string | boolean | number | null,
+  ref : string | null
+};
+
+type ReactComponentElement<TProps> = {
+  type : ReactClass<TProps>,
+  props : TProps,
+  key : string | boolean | number | null,
+  ref : string | null
+};
+
+type ReactFragment = Array<ReactNode | ReactEmpty>;
+
+type ReactNodeList = ReactNode | ReactEmpty;
+
+type ReactText = string | number;
+
+type ReactEmpty = null | undefined | boolean;
+```
+
+__Classes and Components__
+
+```
+type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;
+
+type ReactComponent<TProps> = {
+  props : TProps,
+  render : () => ReactElement
+};
+```
+

From f9effa598f1d433aed47e5ffff32b4cdfc1c9aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 23 Oct 2014 21:13:18 -0700
Subject: [PATCH 05/15] Use --harmomy in docs examples for cleaner code

---
 Rakefile                 |  4 +--
 _js/examples/hello.js    | 18 +++++-----
 _js/examples/markdown.js | 64 +++++++++++++++++-----------------
 _js/examples/timer.js    | 46 ++++++++++++------------
 _js/examples/todo.js     | 75 ++++++++++++++++++++--------------------
 5 files changed, 104 insertions(+), 103 deletions(-)

diff --git a/Rakefile b/Rakefile
index 44a3e114..6a7454ba 100644
--- a/Rakefile
+++ b/Rakefile
@@ -4,12 +4,12 @@ require('yaml')
 
 desc "generate js from jsx"
 task :js do
-  system "../bin/jsx _js js"
+  system "../bin/jsx --harmony _js js"
 end
 
 desc "watch js"
 task :watch do
-  Process.spawn "../bin/jsx --watch _js js"
+  Process.spawn "../bin/jsx --watch --harmony _js js"
   Process.waitall
 end
 
diff --git a/_js/examples/hello.js b/_js/examples/hello.js
index b71430a8..61a5e732 100644
--- a/_js/examples/hello.js
+++ b/_js/examples/hello.js
@@ -1,12 +1,12 @@
-var HELLO_COMPONENT = "\
-var HelloMessage = React.createClass({\n\
-  render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
-  }\n\
-});\n\
-\n\
-React.render(<HelloMessage name=\"John\" />, mountNode);\
-";
+var HELLO_COMPONENT = `
+var HelloMessage = React.createClass({
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+
+React.render(<HelloMessage name="John" />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,
diff --git a/_js/examples/markdown.js b/_js/examples/markdown.js
index 956d81de..cc43db49 100644
--- a/_js/examples/markdown.js
+++ b/_js/examples/markdown.js
@@ -1,35 +1,35 @@
-var MARKDOWN_COMPONENT = "\
-var converter = new Showdown.converter();\n\
-\n\
-var MarkdownEditor = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {value: 'Type some *markdown* here!'};\n\
-  },\n\
-  handleChange: function() {\n\
-    this.setState({value: this.refs.textarea.getDOMNode().value});\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div className=\"MarkdownEditor\">\n\
-        <h3>Input</h3>\n\
-        <textarea\n\
-          onChange={this.handleChange}\n\
-          ref=\"textarea\"\n\
-          defaultValue={this.state.value} />\n\
-        <h3>Output</h3>\n\
-        <div\n\
-          className=\"content\"\n\
-          dangerouslySetInnerHTML={{\n\
-            __html: converter.makeHtml(this.state.value)\n\
-          }}\n\
-        />\n\
-      </div>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
-React.render(<MarkdownEditor />, mountNode);\
-";
+var MARKDOWN_COMPONENT = `
+var converter = new Showdown.converter();
+
+var MarkdownEditor = React.createClass({
+  getInitialState: function() {
+    return {value: 'Type some *markdown* here!'};
+  },
+  handleChange: function() {
+    this.setState({value: this.refs.textarea.getDOMNode().value});
+  },
+  render: function() {
+    return (
+      <div className="MarkdownEditor">
+        <h3>Input</h3>
+        <textarea
+          onChange={this.handleChange}
+          ref="textarea"
+          defaultValue={this.state.value} />
+        <h3>Output</h3>
+        <div
+          className="content"
+          dangerouslySetInnerHTML={{
+            __html: converter.makeHtml(this.state.value)
+          }}
+        />
+      </div>
+    );
+  }
+});
+
+React.render(<MarkdownEditor />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
diff --git a/_js/examples/timer.js b/_js/examples/timer.js
index c54e8b4f..44b5981a 100644
--- a/_js/examples/timer.js
+++ b/_js/examples/timer.js
@@ -1,26 +1,26 @@
-var TIMER_COMPONENT = "\
-var Timer = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {secondsElapsed: 0};\n\
-  },\n\
-  tick: function() {\n\
-    this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
-  },\n\
-  componentDidMount: function() {\n\
-    this.interval = setInterval(this.tick, 1000);\n\
-  },\n\
-  componentWillUnmount: function() {\n\
-    clearInterval(this.interval);\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
-React.render(<Timer />, mountNode);\
-";
+var TIMER_COMPONENT = `
+var Timer = React.createClass({
+  getInitialState: function() {
+    return {secondsElapsed: 0};
+  },
+  tick: function() {
+    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
+  },
+  componentDidMount: function() {
+    this.interval = setInterval(this.tick, 1000);
+  },
+  componentWillUnmount: function() {
+    clearInterval(this.interval);
+  },
+  render: function() {
+    return (
+      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
+    );
+  }
+});
+
+React.render(<Timer />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,
diff --git a/_js/examples/todo.js b/_js/examples/todo.js
index 6c628cea..2ecea761 100644
--- a/_js/examples/todo.js
+++ b/_js/examples/todo.js
@@ -1,40 +1,41 @@
-var TODO_COMPONENT = "\
-var TodoList = React.createClass({\n\
-  render: function() {\n\
-    var createItem = function(itemText) {\n\
-      return <li>{itemText}</li>;\n\
-    };\n\
-    return <ul>{this.props.items.map(createItem)}</ul>;\n\
-  }\n\
-});\n\
-var TodoApp = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {items: [], text: ''};\n\
-  },\n\
-  onChange: function(e) {\n\
-    this.setState({text: e.target.value});\n\
-  },\n\
-  handleSubmit: function(e) {\n\
-    e.preventDefault();\n\
-    var nextItems = this.state.items.concat([this.state.text]);\n\
-    var nextText = '';\n\
-    this.setState({items: nextItems, text: nextText});\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div>\n\
-        <h3>TODO</h3>\n\
-        <TodoList items={this.state.items} />\n\
-        <form onSubmit={this.handleSubmit}>\n\
-          <input onChange={this.onChange} value={this.state.text} />\n\
-          <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
-        </form>\n\
-      </div>\n\
-    );\n\
-  }\n\
-});\n\
-React.render(<TodoApp />, mountNode);\
-";
+var TODO_COMPONENT = `
+var TodoList = React.createClass({
+  render: function() {
+    var createItem = function(itemText) {
+      return <li>{itemText}</li>;
+    };
+    return <ul>{this.props.items.map(createItem)}</ul>;
+  }
+});
+var TodoApp = React.createClass({
+  getInitialState: function() {
+    return {items: [], text: ''};
+  },
+  onChange: function(e) {
+    this.setState({text: e.target.value});
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    var nextItems = this.state.items.concat([this.state.text]);
+    var nextText = '';
+    this.setState({items: nextItems, text: nextText});
+  },
+  render: function() {
+    return (
+      <div>
+        <h3>TODO</h3>
+        <TodoList items={this.state.items} />
+        <form onSubmit={this.handleSubmit}>
+          <input onChange={this.onChange} value={this.state.text} />
+          <button>{'Add #' + (this.state.items.length + 1)}</button>
+        </form>
+      </div>
+    );
+  }
+});
+
+React.render(<TodoApp />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,

From febd05b900c26f41a16bb90b39d75e0a0349b5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 23 Oct 2014 21:20:40 -0700
Subject: [PATCH 06/15] Update React.DOM -> React.createElement through docs

---
 docs/02-displaying-data.md       | 2 +-
 docs/02-displaying-data.zh-CN.md | 2 +-
 docs/02.1-jsx-in-depth.md        | 6 +++---
 docs/getting-started.md          | 2 +-
 docs/getting-started.zh-CN.md    | 2 +-
 docs/ref-01-top-level-api.md     | 2 +-
 docs/tutorial.md                 | 6 +++---
 tips/03-if-else-in-JSX.md        | 4 ++--
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md
index a133e403..3f5983a3 100644
--- a/docs/02-displaying-data.md
+++ b/docs/02-displaying-data.md
@@ -79,7 +79,7 @@ We strongly believe that components are the right way to separate concerns rathe
 
 We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, **optional** HTML-like syntax for the function calls that generate markup called JSX.
 
-**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `<a href="http://facebook.github.io/react/">Hello React!</a>`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
+**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `<a href="http://facebook.github.io/react/">Hello React!</a>`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
 
 JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
 
diff --git a/docs/02-displaying-data.zh-CN.md b/docs/02-displaying-data.zh-CN.md
index c05548ce..d964bfac 100644
--- a/docs/02-displaying-data.zh-CN.md
+++ b/docs/02-displaying-data.zh-CN.md
@@ -76,7 +76,7 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 `
 
 我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。
 
-**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `<a href="http://facebook.github.io/react/">Hello React!</a>`。我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
+**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： `React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `<a href="http://facebook.github.io/react/">Hello React!</a>`。我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
 
 JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。
 
diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md
index 93cf2731..f3411359 100644
--- a/docs/02.1-jsx-in-depth.md
+++ b/docs/02.1-jsx-in-depth.md
@@ -28,14 +28,14 @@ We recommend using JSX for many reasons:
 ## The Transform
 
 JSX transforms from an XML-like syntax into native JavaScript. XML elements and
-attributes are transformed into function calls and objects, respectively.
+attributes are transformed into arguments to `React.createElement`.
 
 ```javascript
 var Nav;
 // Input (JSX):
 var app = <Nav color="blue" />;
 // Output (JS):
-var app = Nav({color:"blue"});
+var app = React.createElement(Nav, {color:"blue"});
 ```
 
 Notice that in order to use `<Nav />`, the `Nav` variable must be in scope.
@@ -47,7 +47,7 @@ var Nav, Profile;
 // Input (JSX):
 var app = <Nav color="blue"><Profile>click</Profile></Nav>;
 // Output (JS):
-var app = Nav({color:"blue"}, Profile(null, "click"));
+var app = React.createElement(Nav, {color:"blue"}, React.createElement(Profile, null, "click"));
 ```
 
 Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 17bdcc53..f92ea04b 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -81,7 +81,7 @@ The file `build/helloworld.js` is autogenerated whenever you make a change.
 
 ```javascript{2}
 React.render(
-  React.DOM.h1(null, 'Hello, world!'),
+  React.createElement('h1', null, 'Hello, world!'),
   document.getElementById('example')
 );
 ```
diff --git a/docs/getting-started.zh-CN.md b/docs/getting-started.zh-CN.md
index 905d676c..4dc0f631 100644
--- a/docs/getting-started.zh-CN.md
+++ b/docs/getting-started.zh-CN.md
@@ -80,7 +80,7 @@ jsx --watch src/ build/
 
 ```javascript{2}
 React.render(
-  React.DOM.h1(null, 'Hello, world!'),
+  React.createElement('h1', null, 'Hello, world!'),
   document.getElementById('example')
 );
 ```
diff --git a/docs/ref-01-top-level-api.md b/docs/ref-01-top-level-api.md
index 0e372797..46544c1f 100644
--- a/docs/ref-01-top-level-api.md
+++ b/docs/ref-01-top-level-api.md
@@ -93,7 +93,7 @@ Verifies the object is a React component descriptor.
 
 ### React.DOM
 
-`React.DOM` provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the `/** @jsx React.DOM */` docblock.
+`React.DOM` provides convenience wrappers around `React.createElement` for DOM components. These should only be used when not using JSX. For example, `React.DOM.div(null, 'Hello World!')`
 
 
 ### React.PropTypes
diff --git a/docs/tutorial.md b/docs/tutorial.md
index d107eaff..fc66a5a5 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -90,14 +90,14 @@ The first thing you'll notice is the XML-ish syntax in your JavaScript. We have
 var CommentBox = React.createClass({displayName: 'CommentBox',
   render: function() {
     return (
-      React.DOM.div({className: "commentBox"},
+      React.createElement('div', {className: "commentBox"},
         "Hello, world! I am a CommentBox."
       )
     );
   }
 });
 React.render(
-  CommentBox(null),
+  React.createElement(CommentBox, null),
   document.getElementById('content')
 );
 ```
@@ -158,7 +158,7 @@ var CommentBox = React.createClass({
 });
 ```
 
-Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
+Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to `React.createElement(tagName)` expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
 
 ### Component Properties
 
diff --git a/tips/03-if-else-in-JSX.md b/tips/03-if-else-in-JSX.md
index 4fb25efe..15e2e938 100644
--- a/tips/03-if-else-in-JSX.md
+++ b/tips/03-if-else-in-JSX.md
@@ -14,7 +14,7 @@ next: self-closing-tag.html
 React.render(<div id="msg">Hello World!</div>, mountNode);
 
 // Is transformed to this JS:
-React.render(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
+React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);
 ```
 
 This means that `if` statements don't fit in. Take this example:
@@ -24,7 +24,7 @@ This means that `if` statements don't fit in. Take this example:
 <div id={if (condition) { 'msg' }}>Hello World!</div>
 
 // Is transformed to this JS:
-React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!");
+React.createElement("dov", {id: if (condition) { 'msg' }}, "Hello World!");
 ```
 
 That's not valid JS. You probably want to make use of a ternary expression:

From 66aecc35a05c8b7f5fe5f3c06e2072f1b0d302a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 23 Oct 2014 21:34:43 -0700
Subject: [PATCH 07/15] Update Animation docs for createElement

---
 docs/09.1-animation.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/09.1-animation.md b/docs/09.1-animation.md
index 593e7386..43a5c808 100644
--- a/docs/09.1-animation.md
+++ b/docs/09.1-animation.md
@@ -165,17 +165,21 @@ This is called when the `willLeave` `callback` is called (at the same time as `c
 By default `ReactTransitionGroup` renders as a `span`. You can change this behavior by providing a `component` prop. For example, here's how you would render a `<ul>`:
 
 ```javascript{1}
-<ReactTransitionGroup component={React.DOM.ul}>
+<ReactTransitionGroup component="ul">
   ...
 </ReactTransitionGroup>
 ```
 
-Every DOM component is under `React.DOM`. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
+Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
+
+> Note:
+>
+> Prior to v0.12, when using DOM components, the `component` prop needed to be a reference to `React.DOM.*`. Since the component is simply passed to `React.createElement`, it must now be a string. Composite components must pass the factory.
 
 Any additional, user-defined, properties will be become properties of the rendered component. For example, here's how you would you render a `<ul>` with css class:
 
 ```javascript{1}
-<ReactTransitionGroup component={React.DOM.ul} className="animated-list">
+<ReactTransitionGroup component="ul" className="animated-list">
   ...
 </ReactTransitionGroup>
 ```

From 836909901ed2e5be93864573afc17509f06f4bb0 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 28 Oct 2014 01:21:34 -0700
Subject: [PATCH 08/15] Updated Docs for new JSX Changes

Moved non-JSX explanation to Displaying Data.
Overhauled JSX in Depth.
Added JSX Spread Section.
---
 docs/02-displaying-data.md                    |  44 +++++-
 docs/02.1-jsx-in-depth.md                     | 143 +++++++-----------
 docs/02.2-jsx-spread.md                       |  71 +++++++++
 ...2.2-jsx-gotchas.md => 02.3-jsx-gotchas.md} |   2 +-
 4 files changed, 166 insertions(+), 94 deletions(-)
 create mode 100644 docs/02.2-jsx-spread.md
 rename docs/{02.2-jsx-gotchas.md => 02.3-jsx-gotchas.md} (98%)

diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md
index 3f5983a3..26fe0ac4 100644
--- a/docs/02-displaying-data.md
+++ b/docs/02-displaying-data.md
@@ -77,12 +77,50 @@ React components are very simple. You can think of them as simple function that
 
 We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
 
-We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, **optional** HTML-like syntax for the function calls that generate markup called JSX.
+We've found that the best solution for this problem is to generate HTML and component trees directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs.
 
-**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `<a href="http://facebook.github.io/react/">Hello React!</a>`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
+In order to make this easier, we've added a very simple, **optional** HTML-like syntax to create these React tree nodes.
 
-JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
+**JSX lets you create JavaScript objects using HTML syntax.** To generate a link in React using pure JavaScript you'd write:
+
+`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')`
+
+With JSX this becomes:
+
+`<a href="http://facebook.github.io/react/">Hello!</a>`
+
+We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
+
+JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
 
 JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
 
 The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package.
+
+
+## React without JSX
+
+JSX is completely optional. You don't have to use JSX with React. You can create these trees through `React.createElement`. The first argument is the tag, pass a properties object as the second argument and children to the third argument.
+
+```javascript
+var child = React.createElement('li', null, 'Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child);
+React.render(root, document.body);
+```
+
+As a convenience you can create short-hand factory function to create elements from custom components.
+
+```javascript
+var Factory = React.createFactory(ComponentClass);
+...
+var root = Factory({ custom: 'prop' });
+React.render(root, document.body);
+```
+
+React already have built-in factories for common HTML tags:
+
+```javascript
+var root = React.DOM.ul({ className: 'my-list' },
+             React.DOM.li(null, 'Text Content')
+           );
+```
diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md
index f3411359..f83cc0fb 100644
--- a/docs/02.1-jsx-in-depth.md
+++ b/docs/02.1-jsx-in-depth.md
@@ -3,32 +3,51 @@ id: jsx-in-depth
 title: JSX in Depth
 permalink: jsx-in-depth.html
 prev: displaying-data.html
-next: jsx-gotchas.html
+next: jsx-spread.html
 ---
 
-JSX is a JavaScript XML syntax transform recommended for use
-with React.
+[JSX](http://facebook.github.io/jsx/) is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
 
 ## Why JSX?
 
-React works out of the box without JSX. Simply construct your markup using the
-functions on `React.DOM`. For example, here's how to construct a simple link:
+You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.
+
+It's more familiar for casual developers such as designers.
+
+XML has the benefit of balanced open and closing tags. This helps make large trees easier to read than function calls or object literals.
+
+It doesn't alter the semantics of JavaScript.
+
+## HTML Tags vs. React Components
+
+React can either render HTML tags (strings) or React components (classes).
+
+To render a HTML tag, just use lower-case tag names in JSX:
 
 ```javascript
-var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
+var myDivElement = <div className="foo" />;
+React.render(myDivElement, document.body);
 ```
 
-We recommend using JSX for many reasons:
+To render a React Component, just a local variable that starts with an upper-case letter:
 
-* It's easier to visualize the structure of the DOM.
-* Designers are more comfortable making changes.
-* It's familiar for those who have used MXML or XAML.
+```javascript
+var MyComponent = React.createClass({/*...*/});
+var myElement = <MyComponent someProperty={true} />;
+React.render(myElement, document.body);
+```
+
+React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
 
+> Note:
+>
+> Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged
+> as XML attribute names. Instead, React DOM components expect DOM property
+> names like `className` and `htmlFor`, respectively.
 
 ## The Transform
 
-JSX transforms from an XML-like syntax into native JavaScript. XML elements and
-attributes are transformed into arguments to `React.createElement`.
+React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments to `React.createElement`.
 
 ```javascript
 var Nav;
@@ -47,7 +66,11 @@ var Nav, Profile;
 // Input (JSX):
 var app = <Nav color="blue"><Profile>click</Profile></Nav>;
 // Output (JS):
-var app = React.createElement(Nav, {color:"blue"}, React.createElement(Profile, null, "click"));
+var app = React.createElement(
+  Nav,
+  {color:"blue"},
+  React.createElement(Profile, null, "click")
+);
 ```
 
 Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
@@ -55,72 +78,14 @@ desugars into native JavaScript, and the
 [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
 JSX.
 
-If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows
-how to setup compilation.
+If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to setup compilation.
 
 > Note:
 >
-> Details about the code transform are given here to increase understanding, but
-> your code should not rely on these implementation details.
-
-
-## React and JSX
-
-React and JSX are independent technologies, but JSX was primarily built with
-React in mind. The two valid uses of JSX are:
-
-* To construct instances of React DOM components (`React.DOM.*`).
-* To construct instances of composite components created with
-  `React.createClass()`.
-
-### React DOM Components
-
-To construct a `<div>` is to create a variable that refers to `React.DOM.div`.
-
-```javascript
-var div = React.DOM.div;
-var app = <div className="appClass">Hello, React!</div>;
-```
-
-### React Composite Components
-
-To construct an instance of a composite component, create a variable that
-references the class.
-
-```javascript
-var MyComponent = React.createClass({/*...*/});
-var app = <MyComponent someProperty={true} />;
-```
-
-JSX will infer the component's name from the variable assignment and specify
-the class's [displayName](/react/docs/component-specs.html#displayName) accordingly.
-
-See [Multiple Components](/react/docs/multiple-components.html) to learn more about using composite components.
-
-> Note:
->
-> Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged
-> as XML attribute names. Instead, React DOM components expect attributes like
-> `className` and `htmlFor`, respectively.
-
-## DOM Convenience
-
-Having to define variables for every type of DOM element can get tedious
-(e.g. `var div, span, h1, h2, ...`). JSX provides a convenience to address this
-problem:
-
-```javascript
-var Nav;
-// Input (JSX):
-var tree = <Nav><span /></Nav>;
-// Output (JS):
-var tree = Nav(null, React.DOM.span(null));
-```
-
-> Remember:
->
-> JSX simply transforms elements into function calls and has no notion of the
-> DOM.
+> The JSX expression always evaluates to a ReactElement. The actual
+> implementation details may vary. An optimized mode could inline the 
+> ReactElement as an object literal to bypass the validation code in
+> `React.createElement`.
 
 ## JavaScript Expressions
 
@@ -133,7 +98,10 @@ pair of curly braces (`{}`) instead of quotes (`""`).
 // Input (JSX):
 var person = <Person name={window.isLoggedIn ? window.name : ''} />;
 // Output (JS):
-var person = Person({name: window.isLoggedIn ? window.name : ''});
+var person = React.createElement(
+  Person,
+  {name: window.isLoggedIn ? window.name : ''}
+);
 ```
 
 ### Child Expressions
@@ -144,7 +112,11 @@ Likewise, JavaScript expressions may be used to express children:
 // Input (JSX):
 var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
 // Output (JS):
-var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null));
+var content = React.createElement(
+  Container,
+  null,
+  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
+);
 ```
 
 ### Comments
@@ -165,15 +137,6 @@ var content = (
 );
 ```
 
-
-## Prior Work
-
-JSX is similar to several other JavaScript embedded XML language
-proposals/projects. Some of the features of JSX that distinguish it from similar
-efforts include:
-
-* JSX is a simple syntactic transform.
-* JSX neither provides nor requires a runtime library.
-* JSX does not alter or add to the semantics of JavaScript.
-
-JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
+> NOTE:
+> 
+> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
diff --git a/docs/02.2-jsx-spread.md b/docs/02.2-jsx-spread.md
new file mode 100644
index 00000000..d07c4ed2
--- /dev/null
+++ b/docs/02.2-jsx-spread.md
@@ -0,0 +1,71 @@
+---
+id: jsx-spread
+title: JSX Spread Attributes
+permalink: jsx-spread.html
+prev: jsx-in-depth.html
+next: jsx-gotchas.html
+---
+
+If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:
+
+```javascript
+  var component = <Component foo={x} bar={y} />;
+```
+
+## Mutating Props is Bad, mkay
+
+If you don't know which properties you want to set, you might be tempted to add them onto the object later:
+
+```javascript
+  var component = <Component />;
+  component.props.foo = x; // bad
+  component.props.bar = y; // also bad
+```
+
+This is an anti-pattern because it means that we can't help you check the right propTypes until way later. This means that your propTypes errors end up with a cryptic stack trace.
+
+The props should be considered immutable at this point. Mutating the props object somewhere else could cause unexpected consequences so ideally it would be a frozen object at this point.
+
+## Spread Attributes
+
+Now you can use a new feature of JSX called spread attributes:
+
+```javascript
+  var props = {};
+  props.foo = x;
+  props.bar = y;
+  var component = <Component {...props} />;
+```
+
+The properties of the object that you pass in are copied onto the component's props.
+
+You can use this multiple times or combine it with other attributes. The specification order is important. Later attributes override previous ones.
+
+```javascript
+  var props = { foo: 'default' };
+  var component = <Component {...props} foo={'override'} />;
+  console.log(component.props.foo); // 'override'
+```
+
+## What's with the weird `...` notation?
+
+The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ES7 proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread).
+
+In fact, you can already use this in our code base as an experimental syntax:
+
+```javascript
+  var oldObj = { foo: 'hello', bar: 'world' };
+  var newObj = { ...oldObj, foo: 'hi' };
+  console.log(newObj.foo); // 'hi';
+  console.log(newObj.bar); // 'world';
+```
+
+Merging two objects can be expressed as:
+
+```javascript
+  var ab = { ...a, ...b };
+```
+
+> Note:
+>
+> Activate experimental syntax by using the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag.
diff --git a/docs/02.2-jsx-gotchas.md b/docs/02.3-jsx-gotchas.md
similarity index 98%
rename from docs/02.2-jsx-gotchas.md
rename to docs/02.3-jsx-gotchas.md
index 57280079..9f444657 100644
--- a/docs/02.2-jsx-gotchas.md
+++ b/docs/02.3-jsx-gotchas.md
@@ -2,7 +2,7 @@
 id: jsx-gotchas
 title: JSX Gotchas
 permalink: jsx-gotchas.html
-prev: jsx-in-depth.html
+prev: jsx-spread.html
 next: interactivity-and-dynamic-uis.html
 ---
 

From 4202fcd9c5cbfc94907ab9af5bc0bc51bbf14037 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Sun, 26 Oct 2014 23:52:37 -0700
Subject: [PATCH 09/15] Replace transferPropsTo with transferring props
 patterns

---
 docs/02.2-jsx-spread.md                       |   2 +-
 docs/05-reusable-components.md                |   2 +-
 docs/06-transferring-props.md                 | 159 ++++++++++++++++++
 docs/{06-forms.md => 07-forms.md}             |   2 +-
 ...wser.md => 08-working-with-the-browser.md} |   0
 ...-about-refs.md => 08.1-more-about-refs.md} |   0
 ...tegration.md => 09-tooling-integration.md} |   0
 docs/{09-addons.md => 10-addons.md}           |   0
 docs/{09.1-animation.md => 10.1-animation.md} |   0
 ...ar.md => 10.2-form-input-binding-sugar.md} |   0
 ...ion.md => 10.3-class-name-manipulation.md} |   0
 ...{09.4-test-utils.md => 10.4-test-utils.md} |   0
 ...with-props.md => 10.5-clone-with-props.md} |   0
 docs/{09.6-update.md => 10.6-update.md}       |   0
 ...der-mixin.md => 10.7-pure-render-mixin.md} |   0
 docs/{09.8-perf.md => 10.8-perf.md}           |   0
 docs/ref-02-component-api.md                  |  27 ---
 17 files changed, 162 insertions(+), 30 deletions(-)
 create mode 100644 docs/06-transferring-props.md
 rename docs/{06-forms.md => 07-forms.md} (99%)
 rename docs/{07-working-with-the-browser.md => 08-working-with-the-browser.md} (100%)
 rename docs/{07.1-more-about-refs.md => 08.1-more-about-refs.md} (100%)
 rename docs/{08-tooling-integration.md => 09-tooling-integration.md} (100%)
 rename docs/{09-addons.md => 10-addons.md} (100%)
 rename docs/{09.1-animation.md => 10.1-animation.md} (100%)
 rename docs/{09.2-form-input-binding-sugar.md => 10.2-form-input-binding-sugar.md} (100%)
 rename docs/{09.3-class-name-manipulation.md => 10.3-class-name-manipulation.md} (100%)
 rename docs/{09.4-test-utils.md => 10.4-test-utils.md} (100%)
 rename docs/{09.5-clone-with-props.md => 10.5-clone-with-props.md} (100%)
 rename docs/{09.6-update.md => 10.6-update.md} (100%)
 rename docs/{09.7-pure-render-mixin.md => 10.7-pure-render-mixin.md} (100%)
 rename docs/{09.8-perf.md => 10.8-perf.md} (100%)

diff --git a/docs/02.2-jsx-spread.md b/docs/02.2-jsx-spread.md
index d07c4ed2..7a147584 100644
--- a/docs/02.2-jsx-spread.md
+++ b/docs/02.2-jsx-spread.md
@@ -68,4 +68,4 @@ Merging two objects can be expressed as:
 
 > Note:
 >
-> Activate experimental syntax by using the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag.
+> Use the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md
index 7835c9a5..5ad85a53 100644
--- a/docs/05-reusable-components.md
+++ b/docs/05-reusable-components.md
@@ -3,7 +3,7 @@ id: reusable-components
 title: Reusable Components
 permalink: reusable-components.html
 prev: multiple-components.html
-next: forms.html
+next: transferring-props.html
 ---
 
 When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, fewer bugs, and fewer bytes down the wire.
diff --git a/docs/06-transferring-props.md b/docs/06-transferring-props.md
new file mode 100644
index 00000000..f93fbe2f
--- /dev/null
+++ b/docs/06-transferring-props.md
@@ -0,0 +1,159 @@
+---
+id: transferring-props
+title: Transferring Props
+permalink: transferring-props.html
+prev: reusable-components.html
+next: forms.html
+---
+
+It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.
+
+You can use [JSX spread attributes](/react/docs/jsx-spread.html) to merge the old props with additional values:
+
+```javascript
+return <Component {...this.props} more="values" />;
+```
+
+If you don't use JSX, you can use any object helper such as ES6 `Object.assign` or Underscore `_.extend`:
+
+```javascript
+return Component(Object.assign({}, this.props, { more: 'values' }));
+```
+
+The rest of this tutorial explains best practices. It uses JSX and experimental ES7 syntax.
+
+## Manual Transfer
+
+Most of the time you should explicitly pass the properties down. That ensures that you only exposes a subset of the inner API, one that you know will work.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      <div className={fancyClass} onClick={this.props.onClick}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+React.renderComponent(
+  <FancyCheckbox checked={true} onClick={console.log}>
+    Hello world!
+  </FancyCheckbox>,
+  document.body
+);
+```
+
+But what about the `name` prop? Or the `title` prop? Or `onMouseOver`?
+
+## Transferring with `...` in JSX
+
+Sometimes it's fragile and tedious to pass every property along. In that case you can use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) with rest properties to extract a set of unknown properties.
+
+List out all the properties that you would like to consume, followed by `...other`.
+
+```javascript
+var { checked, ...other } = this.props;
+```
+
+This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    // `other` contains { onClick: console.log } but not the checked property
+    return (
+      <div {...other} className={fancyClass} />
+    );
+  }
+});
+React.renderComponent(
+  <FancyCheckbox checked={true} onClick={console.log}>
+    Hello world!
+  </FancyCheckbox>,
+  document.body
+);
+```
+
+> NOTE:
+> 
+> In the example above, the `checked` prop is also a valid DOM attribute. If you didn't use destructuring in this way you might inadvertently pass it along.
+
+Always use the destructuring pattern when transferring unknown `other` props.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    // ANTI-PATTERN: `checked` would be passed down to the inner component
+    return (
+      <div {...this.props} className={fancyClass} />
+    );
+  }
+});
+```
+
+## Consuming and Transferring the Same Prop
+
+If your component wants to consume a property but also pass it along, you can repass it explicitly `checked={checked}`. This is preferable to passing the full `this.props` object since it's easier to refactor and lint.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, title, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    var fancyTitle = checked ? 'X ' + title : 'O ' + title;
+    return (
+      <label>
+        <input {...other}
+          checked={checked}
+          className={fancyClass}
+          type="checkbox"
+        />
+        {fancyTitle}
+      </label>
+    );
+  }
+});
+```
+
+> NOTE:
+> 
+> Order matters. By putting the `{...other}` before your JSX props you ensure that the consumer of your component can't override them. In the example above we have guaranteed that the input will be of type `"checkbox"`.
+
+## Rest and Spread Properties `...`
+
+Rest properties allow you to extract the remaining properties from an object into a new object. It excludes every other property listed in the destructuring pattern.
+
+This is an experimental implementation of an [ES7 proposal](https://github.com/sebmarkbage/ecmascript-rest-spread).
+
+```javascript
+var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
+x; // 1
+y; // 2
+z; // { a: 3, b: 4 }
+```
+
+> Note:
+>
+> Use the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
+
+## Transferring with Underscore
+
+If you don't use JSX, you can use a library to achieve the same pattern. Underscore supports `_.omit` to filter out properties and `_.extend` to copy properties onto a new object.
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var checked = this.props.checked;
+    var other = _.omit(this.props, 'checked');
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      React.DOM.div(_.extend({}, other, { className: fancyClass }))
+    );
+  }
+});
+```
diff --git a/docs/06-forms.md b/docs/07-forms.md
similarity index 99%
rename from docs/06-forms.md
rename to docs/07-forms.md
index 1dad3ea4..475c9183 100644
--- a/docs/06-forms.md
+++ b/docs/07-forms.md
@@ -2,7 +2,7 @@
 id: forms
 title: Forms
 permalink: forms.html
-prev: reusable-components.html
+prev: transferring-props.html
 next: working-with-the-browser.html
 ---
 
diff --git a/docs/07-working-with-the-browser.md b/docs/08-working-with-the-browser.md
similarity index 100%
rename from docs/07-working-with-the-browser.md
rename to docs/08-working-with-the-browser.md
diff --git a/docs/07.1-more-about-refs.md b/docs/08.1-more-about-refs.md
similarity index 100%
rename from docs/07.1-more-about-refs.md
rename to docs/08.1-more-about-refs.md
diff --git a/docs/08-tooling-integration.md b/docs/09-tooling-integration.md
similarity index 100%
rename from docs/08-tooling-integration.md
rename to docs/09-tooling-integration.md
diff --git a/docs/09-addons.md b/docs/10-addons.md
similarity index 100%
rename from docs/09-addons.md
rename to docs/10-addons.md
diff --git a/docs/09.1-animation.md b/docs/10.1-animation.md
similarity index 100%
rename from docs/09.1-animation.md
rename to docs/10.1-animation.md
diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/10.2-form-input-binding-sugar.md
similarity index 100%
rename from docs/09.2-form-input-binding-sugar.md
rename to docs/10.2-form-input-binding-sugar.md
diff --git a/docs/09.3-class-name-manipulation.md b/docs/10.3-class-name-manipulation.md
similarity index 100%
rename from docs/09.3-class-name-manipulation.md
rename to docs/10.3-class-name-manipulation.md
diff --git a/docs/09.4-test-utils.md b/docs/10.4-test-utils.md
similarity index 100%
rename from docs/09.4-test-utils.md
rename to docs/10.4-test-utils.md
diff --git a/docs/09.5-clone-with-props.md b/docs/10.5-clone-with-props.md
similarity index 100%
rename from docs/09.5-clone-with-props.md
rename to docs/10.5-clone-with-props.md
diff --git a/docs/09.6-update.md b/docs/10.6-update.md
similarity index 100%
rename from docs/09.6-update.md
rename to docs/10.6-update.md
diff --git a/docs/09.7-pure-render-mixin.md b/docs/10.7-pure-render-mixin.md
similarity index 100%
rename from docs/09.7-pure-render-mixin.md
rename to docs/10.7-pure-render-mixin.md
diff --git a/docs/09.8-perf.md b/docs/10.8-perf.md
similarity index 100%
rename from docs/09.8-perf.md
rename to docs/10.8-perf.md
diff --git a/docs/ref-02-component-api.md b/docs/ref-02-component-api.md
index 35d01fa7..2deeef70 100644
--- a/docs/ref-02-component-api.md
+++ b/docs/ref-02-component-api.md
@@ -70,33 +70,6 @@ bool isMounted()
 `isMounted()` returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to `setState()` or `forceUpdate()`.
 
 
-### transferPropsTo
-
-```javascript
-ReactComponent transferPropsTo(ReactComponent targetComponent)
-```
-
-Transfer properties from this component to a target component that have not already been set on the target component. After the props are updated, `targetComponent` is returned as a convenience. This function is useful when creating simple HTML-like components:
-
-```javascript
-var Avatar = React.createClass({
-  render: function() {
-    return this.transferPropsTo(
-      <img src={"/avatars/" + this.props.userId + ".png"} userId={null} />
-    );
-  }
-});
-
-// <Avatar userId={17} width={200} height={200} />
-```
-
-Properties that are specified directly on the target component instance (such as `src` and `userId` in the above example) will not be overwritten by `transferPropsTo`.
-
-> Note:
->
-> Use `transferPropsTo` with caution; it encourages tight coupling and makes it easy to accidentally introduce implicit dependencies between components. When in doubt, it's safer to explicitly copy the properties that you need onto the child component.
-
-
 ### setProps
 
 ```javascript

From 4e203db7948bfcfeabe324d1ae6d3a58a8a15965 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Mon, 27 Oct 2014 22:28:37 -0700
Subject: [PATCH 10/15] More Descriptor -> Element renames

---
 docs/10.4-test-utils.md             |  6 +++---
 docs/ref-01-top-level-api.md        | 20 ++++++--------------
 tips/16-references-to-components.md |  6 +++---
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/docs/10.4-test-utils.md b/docs/10.4-test-utils.md
index 2eec1d23..40f22780 100644
--- a/docs/10.4-test-utils.md
+++ b/docs/10.4-test-utils.md
@@ -43,13 +43,13 @@ object mockComponent(function componentClass, string? mockTagName)
 
 Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
 
-### isDescriptorOfType
+### isElementOfType
 
 ```javascript
-boolean isDescriptorOfType(ReactDescriptor descriptor, function componentClass)
+boolean isElementOfType(ReactElement element, function componentClass)
 ```
 
-Returns true if `descriptor` is an instance of a React `componentClass`.
+Returns true if `element` is a ReactElement whose type is of a React `componentClass`.
 
 ### isDOMComponent
 
diff --git a/docs/ref-01-top-level-api.md b/docs/ref-01-top-level-api.md
index 46544c1f..fa1923a7 100644
--- a/docs/ref-01-top-level-api.md
+++ b/docs/ref-01-top-level-api.md
@@ -26,15 +26,15 @@ For more information about the specification object, see [Component Specs and Li
 
 ```javascript
 ReactComponent render(
-  ReactComponent component,
+  ReactElement element,
   DOMElement container,
   [function callback]
 )
 ```
 
-Render a React component into the DOM in the supplied `container` and return a reference to the component.
+Render a ReactElement into the DOM in the supplied `container` and return a reference to the component.
 
-If the React component was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
+If the ReactElement was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
 
 If the optional callback is provided, it will be executed after the component is rendered or updated.
 
@@ -73,22 +73,14 @@ string renderToStaticMarkup(ReactComponent component)
 
 Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
 
-### React.isValidClass
 
-```javascript
-boolean isValidClass(* factory)
-```
-
-Verifies the factory is a React class descriptor. See `React.createClass`.
-
-
-### React.isValidComponent
+### React.isValidElement
 
 ```javascript
-boolean isValidComponent(* object)
+boolean isValidElement(* object)
 ```
 
-Verifies the object is a React component descriptor.
+Verifies the object is a ReactElement.
 
 
 ### React.DOM
diff --git a/tips/16-references-to-components.md b/tips/16-references-to-components.md
index e7222956..83d39ad0 100644
--- a/tips/16-references-to-components.md
+++ b/tips/16-references-to-components.md
@@ -13,14 +13,14 @@ If you're using React components in a larger non-React application or transition
 var myComponent = React.render(<MyComponent />, myContainer);
 ```
 
-Keep in mind, however, that the "constructor" of a component doesn't return a component instance! It's just a **descriptor**: a lightweight representation that tells React what the mounted component should look like.
+Keep in mind, however, that the JSX doesn't return a component instance! It's just a **ReactElement**: a lightweight representation that tells React what the mounted component should look like.
 
 ```js
-var myComponent = <MyComponent />; // This is just a descriptor.
+var myComponentElement = <MyComponent />; // This is just a ReactElement.
 
 // Some code here...
 
-myComponent = React.render(myComponent, myContainer);
+var myComponentInstance = React.render(myComponentElement, myContainer);
 ```
 
 > Note:

From fcaa90c5cf210663c26df6ae0e6bafc2dd8bc90a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 28 Oct 2014 01:22:21 -0700
Subject: [PATCH 11/15] Update Docs Navigation

---
 _data/nav_docs.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml
index 4764540e..8b4acece 100644
--- a/_data/nav_docs.yml
+++ b/_data/nav_docs.yml
@@ -23,6 +23,8 @@
     subitems:
     - id: jsx-in-depth
       title: JSX in Depth
+    - id: jsx-spread
+      title: JSX Spread Attributes
     - id: jsx-gotchas
       title: JSX Gotchas
   - id: interactivity-and-dynamic-uis
@@ -31,6 +33,8 @@
     title: Multiple Components
   - id: reusable-components
     title: Reusable Components
+  - id: transferring-props
+    title: Transferring Props
   - id: forms
     title: Forms
   - id: working-with-the-browser

From ca3eeb43b03cc269e6ec2096601935fffcca38c1 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Mon, 27 Oct 2014 18:47:24 -0400
Subject: [PATCH 12/15] Merge pull request #2414 from benleiken/patch-1

Moved key requirement note into 'getting started'
---
 docs/10.1-animation.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/10.1-animation.md b/docs/10.1-animation.md
index 43a5c808..5794e62d 100644
--- a/docs/10.1-animation.md
+++ b/docs/10.1-animation.md
@@ -52,6 +52,9 @@ var TodoList = React.createClass({
   }
 });
 ```
+> Note:
+>
+> You must provide [the `key` attribute](/react/docs/multiple-components.html#dynamic-children) for all children of `ReactCSSTransitionGroup`, even if rendering a single item. This is how React will determine which children have entered, left, or stayed.
 
 In this component, when a new item is added to `ReactCSSTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
 
@@ -128,10 +131,6 @@ var ImageCarousel = React.createClass({
 });
 ```
 
-> Note:
->
-> You must provide [the `key` attribute](/react/docs/multiple-components.html#dynamic-children) for all children of `ReactCSSTransitionGroup`, even if rendering a single item. This is how React will determine which children have entered, left, or stayed.
-
 ### Disabling Animations
 
 You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactCSSTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactCSSTransitionGroup` to disable these animations.

From 192f3fa546bccd871953e8ba0d90ec89b586692b Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Mon, 27 Oct 2014 09:43:06 -0700
Subject: [PATCH 13/15] React.js Conf blog post

Closes #2412
---
 _posts/2014-10-27-react-js-conf.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 _posts/2014-10-27-react-js-conf.md

diff --git a/_posts/2014-10-27-react-js-conf.md b/_posts/2014-10-27-react-js-conf.md
new file mode 100644
index 00000000..5199da8c
--- /dev/null
+++ b/_posts/2014-10-27-react-js-conf.md
@@ -0,0 +1,15 @@
+---
+title: React.js Conf
+author: Vjeux
+---
+
+Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.
+
+**We're happy to announce [React.js Conf](http://conf.reactjs.com/)! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.**
+
+Before we open registration, [we're looking for great talks](http://conf.reactjs.com/call-for-presenters.html). We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!
+
+Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...
+
+We look forward to seeing many of you in person in just a few short months!
+

From fce779e9a67dd48b394ec8ca8c42558d4df1728a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Thu, 23 Oct 2014 21:02:22 -0700
Subject: [PATCH 14/15] Update Authors & Acknowledgements for 0.12

---
 _data/acknowledgements.yml | 71 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 3 deletions(-)

diff --git a/_data/acknowledgements.yml b/_data/acknowledgements.yml
index 89f112ef..bb47de4a 100644
--- a/_data/acknowledgements.yml
+++ b/_data/acknowledgements.yml
@@ -1,22 +1,30 @@
 ---
 - - Adam Krebs
+  - Adam Mark
   - Adam Solove
   - Alan deLevie
   - Alex Zelenskiy
   - Alexander Solovyov
+  - Alexey Raspopov
+  - Andre Z Sanchez
   - Andreas Svensson
+  - Andres Suarez
   - Andrew Davey
+  - Andrew Rasmussen
   - Andrew Zich
   - Andrey Popp
   - Anthony van der Hoorn
+  - Areeb Malik
   - Ayman Osman
   - Ben Alpert
+  - Ben Foxall
   - Ben Newman
   - Ben Ripkens
   - Bill Fisher
   - Bob Eagan
   - Bojan Mihelac
   - Brandon Bloom
+  - Brandon Tilley
   - Brian Cooke
   - Brian Kim
   - Brian Reavis
@@ -24,12 +32,17 @@
   - Cam Spiers
   - Cassus Adam Banko
   - Cat Chen
+  - Charles Marsh
   - Cheng Lou
+  - Chris Sciolla
+  - Christian Alfoni
   - Christian Roman
   - Christoph Pojer
   - Christopher Monsanto
   - Clay Allsopp
   - Connor McSheffrey
+  - Cotton Hou
+  - Dan Abramov
   - Dan Schafer
   - Daniel Gasienica
   - Daniel Lo Nigro
@@ -40,6 +53,7 @@
   - David Hellsing
   - David Hu
   - Devon Blandin
+  - Dmitrii Abramov
   - Dmitry Mazuro
   - Dustin Getz
   - Enguerran
@@ -49,21 +63,24 @@
   - Evan Coonrod
   - Fabio M. Costa
   - Felipe Oliveira Carvalho
+  - Felix Gnass
   - Felix Kling
   - Fernando Correia
   - François-Xavier Bois
   - Fred Zhao
   - G Scott Olson
+  - Garren Smith
   - Geert Pasteels
   - Geert-Jan Brits
   - George A Sisco III
   - Gilbert
+  - Glen Mailer
   - Greg Hurrell
-- - Greg Roodt
+  - Greg Roodt
   - Guangqiang Dong
   - Guido Bouman
   - Harry Hull
-  - Harshad Sabne
+- - Harshad Sabne
   - Hendrik Swanepoel
   - Hugo Jobling
   - Ian Obermiller
@@ -71,25 +88,36 @@
   - Irae Carvalho
   - Isaac Salier-Hellendag
   - Ivan Kozik
+  - Ivan Vergiliev
+  - Jacob Gable
+  - Jacob Greenleaf
   - Jaime Mingo
   - Jakub Malinowski
   - James Brantly
   - James Ide
+  - James Seppi
   - Jamie Wong
   - Jamison Dance
+  - Jan Hancic
   - Jan Kassens
   - Jared Forsyth
   - Jason Bonta
   - Jason Trill
   - Jean Lauliac
+  - Jed Watson
   - Jeff Barczewski
   - Jeff Carpenter
+  - Jeff Chan
   - Jeff Morrison
   - Jeff Welch
   - Jeffrey Lin
+  - Jesse Skinner
   - Jignesh Kakadiya
+  - Jim OBrien
+  - Jimmy Jea
   - Jing Chen
   - Johannes Baiter
+  - Johannes Emerich
   - John Watson
   - Jon Beebe
   - Jonas Enlund
@@ -101,15 +129,18 @@
   - Josh Yudaken
   - Joshua Ma
   - Julen Ruiz Aizpuru
+  - Julien Bordellier
   - Jun Wu
   - Juraj Dudak
   - Justin Jaffray
   - Karl Mikkelsen
+  - Karpich Dmitry
   - Keito Uchiyama
   - Kit Randel
   - Kunal Mehta
   - Kyle Mathews
   - Laurence Rowe
+  - Lee Byron
   - Levi McCallum
   - Lily
   - Logan Allen
@@ -117,23 +148,40 @@
   - Marcin Kwiatkowski
   - Marcin Szczepanski
   - Mariano Desanze
+  - Mark Anderson
+  - Mark Hintz
+  - Mark IJbema
   - Mark Richardson
   - Marshall Roch
-- - Martin Andert
+  - Martin Andert
   - Martin Konicek
   - Mathieu M-Gosselin
   - Matt Harrison
   - Matthew Dapena-Tretter
   - Matti Nelimarkka
+  - Max F. Albrecht
+  - Michael Chan
+- - Michael Randers-Pehrson
   - Michal Srb
+  - Mike D Pilsbury
+  - Miorel Palii
   - Mouad Debbar
   - Nadeesha Cabral
+  - Naman Goel
   - Nate Hunzaker
+  - Nathan White
   - Nicholas Bergson-Shilcock
+  - Nick Fitzgerald
   - Nick Gavalas
+  - Nick Merwin
   - Nick Thompson
+  - Nick Williams
   - Niklas Boström
+  - Oleg
+  - Oleksii Markhovskyi
+  - Oliver Zeigermann
   - Owen Coutts
+  - Pablo Lacerda de Miranda
   - Pascal Hartig
   - Paul O’Shannessy
   - Paul Seiffert
@@ -148,32 +196,49 @@
   - Richard D. Worth
   - Richard Feldman
   - Richard Livesey
+  - Rick Beerendonk
+  - Rob Arnold
   - Ryan Seddon
   - Sahat Yalkabov
+  - Sam Selikoff
   - Sander Spies
   - Sean Kinsey
   - Sebastian Markbåge
+  - Sergey Generalov
+  - Shane O'Sullivan
   - Shaun Trennery
+  - Sheraz
+  - Shripad K
   - Simon Højberg
+  - Simon Welsh
   - Stefan Dombrowski
   - Stephen Murphy
   - Stoyan Stefanov
   - Sundeep Malladi
+  - Sunny Juneja
   - Sven Helmberger
+  - Sébastien Lorber
   - Thomas Aylott
   - Thomas Boyt
   - Thomas Shaddox
   - Thomas Shafer
+  - ThomasCrvsr
   - Timothy Yung
   - Tom Haggie
+  - Tom Hauburger
+  - Tom MacWright
   - Tom Occhino
   - Ville Immonen
   - Vjeux
   - Volkan Unsal
   - Wayne Larsen
+  - WickyNilliams
   - Wincent Colaiuta
+  - XuefengWu
   - Yuriy Dybskiy
   - Yuval Dekel
   - Zach Bruggeman
+  - cutbko
   - davidxi
   - imagentleman
+  - jon madison

From a7b5d3a94844fe54fe446598add8d7b4faf5167c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Tue, 28 Oct 2014 10:55:52 -0700
Subject: [PATCH 15/15] 0.12 blog post

---
 _posts/2014-10-28-react-v0.12.md | 127 +++++++++++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 _posts/2014-10-28-react-v0.12.md

diff --git a/_posts/2014-10-28-react-v0.12.md b/_posts/2014-10-28-react-v0.12.md
new file mode 100644
index 00000000..df789bb7
--- /dev/null
+++ b/_posts/2014-10-28-react-v0.12.md
@@ -0,0 +1,127 @@
+---
+title: React v0.12
+author: Paul O’Shannessy
+---
+
+We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
+
+We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/react/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/react/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.
+
+
+The release is available for download:
+
+* **React**  
+  Dev build with warnings: <http://fb.me/react-0.12.0.js>  
+  Minified build for production: <http://fb.me/react-0.12.0.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <http://fb.me/react-with-addons-0.12.0.js>  
+  Minified build for production: <http://fb.me/react-with-addons-0.12.0.min.js>  
+* **In-Browser JSX transformer**  
+  <http://fb.me/JSXTransformer-0.12.0.js>
+
+We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+## New Terminology & Updated APIs
+
+v0.12 is bringing about some new terminology. [We introduced](/react/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/react/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
+
+We also corrected some other misnomers. `React.isValidComponent` actually determines if the argument is a ReactElement, so it has been renamed to `React.isValidElement`. In the same vein, `React.PropTypes.component` is now `React.PropTypes.element` and `React.PropTypes.renderable` is now `React.PropTypes.node`.
+
+The old methods will still work but will warn upon first use. They will be removed in v0.13.
+
+## JSX Changes
+
+[We talked more in depth about these before](/react/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
+
+* No more `/** @jsx React.DOM */`!
+* We no longer transform to a straight function call. `<Component/>` now becomes `React.createElement(Component)`
+* DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
+* We introduced spread attributes as a quick way to transfer props.
+
+## DevTools Improvements, No More `__internals`
+
+For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
+
+As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. `React.__internals` is no more.
+
+## License Change - BSD
+
+We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
+
+You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.
+
+- - -
+
+## Changelog
+
+### React Core
+
+#### Breaking Changes
+
+* `key` and `ref` moved off props object, now accessible on the element directly
+* React is now BSD licensed with accompanying Patents grant
+* Default prop resolution has moved to Element creation time instead of mount time, making them effectively static
+* `React.__internals` is removed - it was exposed for DevTools which no longer needs access
+* Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX.
+
+#### New Features
+
+* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
+* Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
+
+#### Deprecations
+
+* `React.renderComponent` --> `React.render`
+* `React.renderComponentToString` --> `React.renderToString`
+* `React.renderComponentToStaticMarkup` --> `React.renderToStaticMarkup`
+* `React.isValidComponent` --> `React.isValidElement`
+* `React.PropTypes.component` --> `React.PropTypes.element`
+* `React.PropTypes.renderable` --> `React.PropTypes.node`
+* **DEPRECATED** `React.isValidClass`
+* **DEPRECATED** `instance.transferPropsTo`
+* **DEPRECATED** Returning `false` from event handlers to preventDefault
+* **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory`
+* **DEPRECATED** use of `key={null}` to assign implicit keys
+
+#### Bug Fixes
+
+* Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components
+* Correctly treat `event.getModifierState` as case sensitive
+* Improved normalization of `event.charCode`
+* Better error stacks when involving autobound methods
+* Removed DevTools message when the DevTools are installed
+* Correctly detect required language features across browsers
+* Fixed support for some HTML attributes:
+  * `list` updates correctly now
+  * `scrollLeft`, `scrollTop` removed, these should not be specified as props
+* Improved error messages
+
+### React With Addons
+
+#### New Features
+
+* `React.addons.batchedUpdates` added to API for hooking into update cycle
+
+#### Breaking Changes
+
+* `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly.
+
+#### Bug Fixes
+
+* Fixed some issues with CSS Transitions
+
+### JSX
+
+#### Breaking Changes
+
+* Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components
+* JSX no longer transforms to simple function calls
+
+#### New Features
+
+* `@jsx React.DOM` no longer required
+* spread (`{...}`) operator introduced to allow easier use of props
+
+#### Bug Fixes
+
+* JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)