Hello React!<\/title>\n <script src=\"build\/react.js\"><\/script>\n+ <script src=\"build\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.23\/browser.min.js\"><\/script>\n <\/head>\n <body>\n@@ -93,13 +116,14 @@ ReactDOM.render(\n \n Update your HTML file as below:\n \n-```html{7,11}\n+```html{8,12}\n <!DOCTYPE html>\n <html>\n <head>\n <meta charset=\"UTF-8\" \/>\n <title>Hello React!<\/title>\n <script src=\"build\/react.js\"><\/script>\n+ <script src=\"build\/react-dom.js\"><\/script>\n \n <\/head>\n <body>\n@@ -109,10 +133,6 @@ Update your HTML file as below:\n <\/html>\n ```\n \n-## Want CommonJS?\n-\n-If you want to use React with [browserify](http:\/\/browserify.org\/), [webpack](https:\/\/webpack.github.io\/), or another CommonJS-compatible module system, just use the [`react` npm package](https:\/\/www.npmjs.com\/package\/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.\n-\n ## Next Steps\n \n Check out [the tutorial](\/react\/docs\/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more.\ndiff --git a\/docs\/docs\/ref-01-top-level-api.md b\/docs\/docs\/ref-01-top-level-api.md\nindex 40ea477266..948c319621 100644\n--- a\/docs\/docs\/ref-01-top-level-api.md\n+++ b\/docs\/docs\/ref-01-top-level-api.md\n@@ -71,127 +71,135 @@ the type argument can be either an html tag name string (eg. 'div', 'span', etc)\n `ReactClass`.\n \n \n-### ReactDOM.render\n+### React.isValidElement\n \n ```javascript\n-ReactComponent render(\n- ReactElement element,\n- DOMElement container,\n- [function callback]\n-)\n+boolean isValidElement(* object)\n ```\n \n-Render a ReactElement into the DOM in the supplied `container` and return a [reference](\/react\/docs\/more-about-refs.html) to the component (or returns `null` for [stateless components](\/react\/docs\/reusable-components.html#stateless-functions)).\n+Verifies the object is a ReactElement.\n \n-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.\n \n-If the optional callback is provided, it will be executed after the component is rendered or updated.\n+### React.DOM\n \n-> Note:\n->\n-> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements\n-> inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient\n-> updates.\n->\n-> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). In\n-> the future, it may be possible to insert a component to an existing DOM node without overwriting\n-> the existing children.\n+`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!')`\n \n \n-### ReactDOM.unmountComponentAtNode\n+### React.PropTypes\n \n-```javascript\n-boolean unmountComponentAtNode(DOMElement container)\n-```\n+`React.PropTypes` includes types that can be used with a component's `propTypes` object to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](\/react\/docs\/reusable-components.html).\n \n-Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.\n \n+### React.Children\n+\n+`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.\n \n-### ReactDOM.renderToString\n+#### React.Children.map\n \n ```javascript\n-string renderToString(ReactElement element)\n+object React.Children.map(object children, function fn [, object thisArg])\n ```\n \n-Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.\n-\n-If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.\n-\n+Invoke `fn` on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is a nested object or array it will be traversed: `fn` will never be passed the container objects. If children is `null` or `undefined` returns `null` or `undefined` rather than an empty object.\n \n-### ReactDOM.renderToStaticMarkup\n+#### React.Children.forEach\n \n ```javascript\n-string renderToStaticMarkup(ReactElement element)\n+React.Children.forEach(object children, function fn [, object thisArg])\n ```\n \n-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.\n-\n+Like `React.Children.map()` but does not return an object.\n \n-### ReactDOM.isValidElement\n+#### React.Children.count\n \n ```javascript\n-boolean isValidElement(* object)\n+number React.Children.count(object children)\n ```\n \n-Verifies the object is a ReactElement.\n-\n+Return the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.\n \n-### ReactDOM.findDOMNode\n+#### React.Children.only\n \n ```javascript\n-DOMElement findDOMNode(ReactComponent component)\n+object React.Children.only(object children)\n ```\n-If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When `render` returns `null` or `false`, `findDOMNode` returns `null`.\n \n-> Note:\n->\n-> `findDOMNode()` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. However, there are some situations where this is necessary (for instance, you may need to find a DOM node in order to position it absolutely or to determine the rendered width measured in pixels).\n+Return the only child in `children`. Throws otherwise.\n \n->\n-> `findDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.\n+## ReactDOM\n \n-### React.DOM\n+The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.\n \n-`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!')`\n+### ReactDOM.render\n \n+```javascript\n+ReactComponent render(\n+ ReactElement element,\n+ DOMElement container,\n+ [function callback]\n+)\n+```\n \n-### React.PropTypes\n+Render a ReactElement into the DOM in the supplied `container` and return a [reference](\/react\/docs\/more-about-refs.html) to the component (or returns `null` for [stateless components](\/react\/docs\/reusable-components.html#stateless-functions)).\n \n-`React.PropTypes` includes types that can be used with a component's `propTypes` object to validate props being passed to your components. For more information about `propTypes`, see [Reusable Components](\/react\/docs\/reusable-components.html).\n+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.\n \n+If the optional callback is provided, it will be executed after the component is rendered or updated.\n \n-### React.Children\n+> Note:\n+>\n+> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements\n+> inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient\n+> updates.\n+>\n+> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). In\n+> the future, it may be possible to insert a component to an existing DOM node without overwriting\n+> the existing children.\n \n-`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.\n \n-#### React.Children.map\n+### ReactDOM.unmountComponentAtNode\n \n ```javascript\n-object React.Children.map(object children, function fn [, object thisArg])\n+boolean unmountComponentAtNode(DOMElement container)\n ```\n \n-Invoke `fn` on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is a nested object or array it will be traversed: `fn` will never be passed the container objects. If children is `null` or `undefined` returns `null` or `undefined` rather than an empty object.\n+Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.\n \n-#### React.Children.forEach\n+\n+### ReactDOM.findDOMNode\n \n ```javascript\n-React.Children.forEach(object children, function fn [, object thisArg])\n+DOMElement findDOMNode(ReactComponent component)\n ```\n+If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.** When `render` returns `null` or `false`, `findDOMNode` returns `null`.\n \n-Like `React.Children.map()` but does not return an object.\n+> Note:\n+>\n+> `findDOMNode()` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction.\n+>\n+> `findDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.\n+>\n+> `findDOMNode()` cannot be used on stateless components.\n \n-#### React.Children.count\n+## ReactDOMServer\n+\n+The `react-dom\/server` package allows you to render your components on the server.\n+\n+### ReactDOMServer.renderToString\n \n ```javascript\n-number React.Children.count(object children)\n+string renderToString(ReactElement element)\n ```\n \n-Return the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.\n+Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.\n+\n+If you call `ReactDOM.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.\n \n-#### React.Children.only\n+\n+### ReactDOMServer.renderToStaticMarkup\n \n ```javascript\n-object React.Children.only(object children)\n+string renderToStaticMarkup(ReactElement element)\n ```\n \n-Return the only child in `children`. Throws otherwise.\n+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.\ndiff --git a\/docs\/docs\/ref-03-component-specs.md b\/docs\/docs\/ref-03-component-specs.md\nindex 8a851e3d0b..2855caa74e 100644\n--- a\/docs\/docs\/ref-03-component-specs.md\n+++ b\/docs\/docs\/ref-03-component-specs.md\n@@ -121,7 +121,7 @@ Invoked once, both on the client and server, immediately before the initial rend\n void componentDidMount()\n ```\n \n-Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via `ReactDOM.findDOMNode(this)`. The `componentDidMount()` method of child components is invoked before that of parent components.\n+Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The `componentDidMount()` method of child components is invoked before that of parent components.\n \n If you want to integrate with other JavaScript frameworks, set timers using `setTimeout` or `setInterval`, or send AJAX requests, perform those operations in this method.\n \ndiff --git a\/docs\/docs\/tutorial.md b\/docs\/docs\/tutorial.md\nindex 3d4cbf51f9..44f1a83165 100644\n--- a\/docs\/docs\/tutorial.md\n+++ b\/docs\/docs\/tutorial.md\n@@ -41,6 +41,7 @@ For this tutorial, we're going to make it as easy as possible. Included in the s\n <meta charset=\"utf-8\" \/>\n <title>React Tutorial<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/{{site.react_version}}\/react.js\"><\/script>\n+ <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/{{site.react_version}}\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.23\/browser.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\n <\/head>\n@@ -126,6 +127,8 @@ You do not have to return basic HTML. You can return a tree of components that y\n \n `ReactDOM.render()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.\n \n+The `ReactDOM` module exposes DOM-specific methods, while `React` has the core tools shared by React on different platforms (e.g., [React Native](http:\/\/facebook.github.io\/react-native\/)).\n+\n ## Composing components\n \n Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s. Add these two components to your file, keeping the existing `CommentBox` declaration and `ReactDOM.render` call:\n@@ -220,12 +223,13 @@ Markdown is a simple way to format your text inline. For example, surrounding te\n \n First, add the third-party library **marked** to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):\n \n-```html{8}\n+```html{9}\n \n <head>\n <meta charset=\"utf-8\" \/>\n <title>React Tutorial<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/{{site.react_version}}\/react.js\"><\/script>\n+ <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/{{site.react_version}}\/react-dom.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.23\/browser.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/marked\/0.3.2\/marked.min.js\"><\/script>\n@@ -525,7 +529,7 @@ Call `preventDefault()` on the event to prevent the browser's default action of\n \n ##### Refs\n \n-We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the component. We can call `ReactDOM.findDOMNode(component)` on a component to get the native browser DOM element.\n+We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the DOM node.\n \n ##### Callbacks as props\n \n","parents":["ff533cb4db2011204e40579400857718c27705f9","26bde37cf816a83297ee7157f4ba22e4fcb48325"],"files":[{"status":"M","path":"docs\/docs\/08-working-with-the-browser.md"},{"status":"M","path":"docs\/docs\/08.1-more-about-refs.md"},{"status":"M","path":"docs\/docs\/10-addons.md"},{"status":"M","path":"docs\/docs\/10.1-animation.md"},{"status":"M","path":"docs\/docs\/10.2-form-input-binding-sugar.md"},{"status":"M","path":"docs\/docs\/10.3-class-name-manipulation.md"},{"status":"M","path":"docs\/docs\/10.4-test-utils.md"},{"status":"M","path":"docs\/docs\/10.5-clone-with-props.md"},{"status":"M","path":"docs\/docs\/10.6-create-fragment.md"},{"status":"M","path":"docs\/docs\/10.7-update.md"},{"status":"M","path":"docs\/docs\/10.9-perf.md"},{"status":"M","path":"docs\/docs\/getting-started.md"},{"status":"M","path":"docs\/docs\/ref-01-top-level-api.md"},{"status":"M","path":"docs\/docs\/ref-03-component-specs.md"},{"status":"M","path":"docs\/docs\/tutorial.md"}],"commit":{"authorEmail":"ben@benalpert.com","authoredAt":"2015-10-06T18:38:19-07:00","authorName":"Ben Alpert","subject":"Merge pull request #5065 from spicyj\/docs-pkgs","revision":"1711c7aae3e3f7b6913f3ff0fa6dda6658cbcdb6","shortRevision":"1711c7aae3"},"body":"Update some more docs for package split"}</article></body></html>

{"patch":"diff --git a\/docs\/docs\/08-working-with-the-browser.md b\/docs\/docs\/08-working-with-the-browser.md\nindex aec2aaa270..4e2c7ff909 100644\n--- a\/docs\/docs\/08-working-with-the-browser.md\n+++ b\/docs\/docs\/08-working-with-the-browser.md\n@@ -56,10 +56,9 @@ React provides lifecycle methods that you can specify to hook into this process.\n \n ### Mounted Methods\n \n-_Mounted_ composite components also support the following methods:\n+_Mounted_ composite components also support the following method:\n \n-* `findDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.\n-* `forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.\n+* `component.forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.\n \n \n ## Browser Support and Polyfills\ndiff --git a\/docs\/docs\/08.1-more-about-refs.md b\/docs\/docs\/08.1-more-about-refs.md\nindex 8eefaab1c8..f1ae11f92a 100644\n--- a\/docs\/docs\/08.1-more-about-refs.md\n+++ b\/docs\/docs\/08.1-more-about-refs.md\n@@ -63,9 +63,9 @@ or using an ES6 arrow function:\n },\n ```\n \n-Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with `null` as an argument. This prevents memory leaks in the case that the instance is stored, as in the first example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with `null` immediately before it's called with the component instance.\n+When attaching a ref to a DOM component like `

`, you get the DOM node back; when attaching a ref to a composite component like ``, you'll get the React class instance. In the latter case, you can call methods on that component if any are exposed in its class definition.\n \n-You can access the component's DOM node directly by calling `ReactDOM.findDOMNode(argumentToYourCallback)`.\n+Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with `null` as an argument. This prevents memory leaks in the case that the instance is stored, as in the first example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with `null` immediately before it's called with the component instance.\n \n \n ## The ref String Attribute\n@@ -81,11 +81,11 @@ React also supports using a string (instead of a callback) as a ref prop on any\n 2. In some other code (typically event handler code), access the **backing instance** via `this.refs` as in:\n \n ```javascript\n- this.refs.myInput\n+ var input = this.refs.myInput;\n+ var inputValue = input.value;\n+ var inputRect = input.getBoundingClientRect();\n ```\n \n- You can access the component's DOM node directly by calling `ReactDOM.findDOMNode(this.refs.myInput)`.\n-\n \n ## A Complete Example\n In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use a ref to get a reference to a component you own. They work like this:\n@@ -120,7 +120,7 @@ ReactDOM.render(\n \n In this example, we get a reference to the text input **backing instance** and we call `focus()` when the button is clicked.\n \n-For composite components, the reference will refer to an instance of the component class so you can invoke any methods that are defined on that class. If you need access to the underlying DOM node for that component, you can use [ReactDOM.findDOMNode](\/react\/docs\/top-level-api.html#reactdom.finddomnode).\n+For composite components, the reference will refer to an instance of the component class so you can invoke any methods that are defined on that class. If you need access to the underlying DOM node for that component, you can use [ReactDOM.findDOMNode](\/react\/docs\/top-level-api.html#reactdom.finddomnode) as an \"escape hatch\" but we don't recommend it since it breaks encapsulation and in almost every case there's a clearer way to structure your code within the React model.\n \n ## Summary\n \n@@ -128,13 +128,13 @@ Refs are a great way to send a message to a particular child instance in a way t\n \n ### Benefits:\n \n-- You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`).\n-- Performing DOM measurements almost always requires reaching out to a \"native\" component such as `` and accessing its underlying DOM node via `ReactDOM.findDOMNode(this.refs.myInput)`. Refs are one of the only practical ways of doing this reliably.\n+- You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`). In most cases, it's clearer to use the built-in React data flow instead of using refs imperatively.\n+- Performing DOM measurements almost always requires reaching out to a \"native\" component such as `` and accessing its underlying DOM node using a ref. Refs are one of the only practical ways of doing this reliably.\n - Refs are automatically managed for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).\n \n ### Cautions:\n \n - *Never* access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack.\n-- If you want to preserve Google Closure Compiler Crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref=\"myRefString\"`.\n+- If you want to preserve Google Closure Compiler advanced-mode crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref=\"myRefString\"`.\n - If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to \"make things happen\" in your app. If this is the case, take a moment and think more critically about where `state` should be owned in the component hierarchy. Often, it becomes clear that the proper place to \"own\" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to \"make things happen\" – instead, the data flow will usually accomplish your goal.\n - Refs may not be attached to a [stateless function](\/react\/docs\/reusable-components.html#stateless-functions), because the component does not have a backing instance. You can always wrap a stateless component in a standard composite component and attach a ref to the composite component.\ndiff --git a\/docs\/docs\/10-addons.md b\/docs\/docs\/10-addons.md\nindex d076bd122b..a0a5cc5063 100644\n--- a\/docs\/docs\/10-addons.md\n+++ b\/docs\/docs\/10-addons.md\n@@ -6,7 +6,7 @@ prev: tooling-integration.html\n next: animation.html\n ---\n \n-`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:\n+The React add-ons are a collection of useful utility modules for building React apps. **These should be considered experimental** and tend to change more often than the core.\n \n - [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.\n - [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.\n@@ -20,6 +20,4 @@ The add-ons below are in the development (unminified) version of React only:\n - [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).\n - [`Perf`](perf.html), for measuring performance and giving you hint where to optimize.\n \n-To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.\n-\n-When using the react package from npm, simply `require('react\/addons')` instead of `require('react')` to get React with all of the add-ons.\n+To get the add-ons, install them individually from npm (e.g., `npm install react-addons-pure-render-mixin`). We don't support using the addons if you're not using npm.\ndiff --git a\/docs\/docs\/10.1-animation.md b\/docs\/docs\/10.1-animation.md\nindex bccdcc98f8..5cc1defe88 100644\n--- a\/docs\/docs\/10.1-animation.md\n+++ b\/docs\/docs\/10.1-animation.md\n@@ -17,7 +17,7 @@ React provides a `ReactTransitionGroup` addon component as a low-level API for a\n `ReactCSSTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.\n \n ```javascript{28-30}\n-var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;\n+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');\n \n var TodoList = React.createClass({\n getInitialState: function() {\n@@ -173,7 +173,7 @@ In order for it to apply transitions to its children, the `ReactCSSTransitionGro\n In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:\n \n ```javascript{10-12}\n-var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;\n+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');\n \n var ImageCarousel = React.createClass({\n propTypes: {\n@@ -201,7 +201,7 @@ You can disable animating `enter` or `leave` animations if you want. For example\n \n ## Low-level API: `ReactTransitionGroup`\n \n-`ReactTransitionGroup` is the basis for animations. It is accessible as `React.addons.TransitionGroup`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.\n+`ReactTransitionGroup` is the basis for animations. It is accessible from `require('react-addons-transition-group')`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.\n \n ### `componentWillAppear(callback)`\n \n@@ -237,11 +237,7 @@ By default `ReactTransitionGroup` renders as a `span`. You can change this behav\n <\/ReactTransitionGroup>\n ```\n \n-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!\n-\n-> Note:\n->\n-> 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.\n+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! Just write `component={List}` and your component will receive `this.props.children`.\n \n Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a `

` React component\n-render: function() {\n- var classString = 'message';\n- if (this.props.isImportant) {\n- classString += ' message-important';\n- }\n- if (this.props.isRead) {\n- classString += ' message-read';\n- }\n- \/\/ 'message message-important message-read'\n- return

Great, I'll be there.<\/div>;\n-}\n-```\n-\n-This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. `classSet()` solves this problem:\n-\n-```javascript\n-render: function() {\n- var cx = React.addons.classSet;\n- var classes = cx({\n- 'message': true,\n- 'message-important': this.props.isImportant,\n- 'message-read': this.props.isRead\n- });\n- \/\/ same final string, but much cleaner\n- return

Great, I'll be there.<\/div>;\n-}\n-```\n-\n-When using `classSet()`, pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.\n-\n-`classSet()` also lets you pass class names in as arguments that are then concatenated for you:\n-\n-```javascript\n-render: function() {\n- var cx = React.addons.classSet;\n- var importantModifier = 'message-important';\n- var readModifier = 'message-read';\n- var classes = cx('message', importantModifier, readModifier);\n- \/\/ Final string is 'message message-important message-read'\n- return

Great, I'll be there.<\/div>;\n-}\n-```\n-\n-No more hacky string concatenations!\n+> This module has been deprecated; use [JedWatson\/classnames](https:\/\/github.com\/JedWatson\/classnames) instead.\ndiff --git a\/docs\/docs\/10.4-test-utils.md b\/docs\/docs\/10.4-test-utils.md\nindex 24eac44a0a..28bdf5a782 100644\n--- a\/docs\/docs\/10.4-test-utils.md\n+++ b\/docs\/docs\/10.4-test-utils.md\n@@ -6,7 +6,11 @@ prev: two-way-binding-helpers.html\n next: clone-with-props.html\n ---\n \n-`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https:\/\/facebook.github.io\/jest\/)).\n+`ReactTestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https:\/\/facebook.github.io\/jest\/)).\n+\n+```\n+var ReactTestUtils = require('react-addons-test-utils');\n+```\n \n ### Simulate\n \n@@ -22,17 +26,19 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data. *\n **Clicking an element** \n \n ```javascript\n-var node = ReactDOM.findDOMNode(this.refs.button);\n-React.addons.TestUtils.Simulate.click(node);\n+\/\/

dillon1000/react

Files changed