` is to create a variable that refers to `React.DOM.div`.
-
-```javascript
-var div = React.DOM.div;
-var app = {window.isLoggedIn ? : ;
// 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..7a147584
--- /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 =
+ Hello world!
+ ,
+ 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 (
+
+ );
+ }
+});
+React.renderComponent(
+
+ Hello world!
+ ,
+ 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 (
+
+ );
+ }
+});
+```
+
+## 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 (
+
+ );
+ }
+});
+```
+
+> 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 92%
rename from docs/09.1-animation.md
rename to docs/10.1-animation.md
index d1708b88..5794e62d 100644
--- a/docs/09.1-animation.md
+++ b/docs/10.1-animation.md
@@ -164,17 +164,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 `
Hello, React!
;
-```
-
-### 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 =
+ {this.props.children}
+
+ );
+ }
+});
+React.renderComponent(
+ - `:
```javascript{1}
-
- Text Content +
- ` with css class:
```javascript{1}
-
` (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/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/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..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,27 +73,19 @@ 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
-`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/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(
- ![]({"/avatars/")
- );
- }
-});
-
-// = {
+ type : ReactClass,
+ props : TProps,
+ key : string | boolean | number | null,
+ ref : string | null
+};
+
+type ReactFragment = Array;
+
+type ReactNodeList = ReactNode | ReactEmpty;
+
+type ReactText = string | number;
+
+type ReactEmpty = null | undefined | boolean;
+```
+
+__Classes and Components__
+
+```
+type ReactClass = (TProps) => ReactComponent;
+
+type ReactComponent = {
+ props : TProps,
+ render : () => ReactElement
+};
+```
+
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(
- );
- }
-});
-
-// -
+
Hello World!
, 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:
Hello World!
// 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:
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(