All doc updates forv15.5

docs/_data/nav_docs.yml

@@ -30,8 +30,6 @@
   items:
     - id: jsx-in-depth
       title: JSX In Depth
-    - id: typechecking-with-proptypes
-      title: Typechecking With PropTypes
     - id: refs-and-the-dom
       title: Refs and the DOM
     - id: uncontrolled-components
@@ -65,22 +63,3 @@
       title: DOM Elements
     - id: events
       title: SyntheticEvent
-    - id: addons
-      title: Add-Ons
-      subitems:
-        - id: perf
-          title: Performance Tools
-        - id: test-utils
-          title: Test Utilities
-        - id: animation
-          title: Animation
-        - id: create-fragment
-          title: Keyed Fragments
-        - id: update
-          title: Immutability Helpers
-        - id: pure-render-mixin
-          title: PureRenderMixin
-        - id: shallow-compare
-          title: Shallow Compare
-        - id: two-way-binding-helpers
-          title: Two-way Binding Helpers

docs/contributing/codebase-overview.md

@@ -401,12 +401,6 @@ React implements a synthetic event system which is agnostic of the renderers and
 
 There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
 
-### Add-ons
-
-Each of the [React add-ons](/react/docs/addons.html) ships as a separate package on npm with a `react-addons-` prefix. Their source is located in [`src/addons`](https://github.com/facebook/react/tree/master/src/addons) with the exception of [`ReactPerf`](https://github.com/facebook/react/blob/master/src/renderers/shared/ReactPerf.js) and [`ReactTestUtils`](https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js).
-
-Additionally, we provide a standalone build called `react-with-addons.js` which includes React core *and* all add-ons exposed on the `addons` field of the `React` global object.
-
 ### What Next?
 
 Read the [next section](/react/contributing/implementation-notes.html) to learn about the current implementation of reconciler in more detail.

docs/docs/addons-animation.md

@@ -4,14 +4,15 @@ title: Animation Add-Ons
 permalink: docs/animation.html
 layout: docs
 category: Add-Ons
-prev: addons.html
-next: create-fragment.html
 redirect_from:
   - "docs/animation-ja-JP.html"
   - "docs/animation-ko-KR.html"
   - "docs/animation-zh-CN.html"
 ---
 
+>Note:
+> `ReactTransitionGroup` and `ReactCSSTransitionGroup` are both deprecated as of React v15.5.0. The recommendation is to use `TransitionGroup` and `CSSTransitionGroup` from ['react-transition-group'](https://github.com/reactjs/react-transition-group) instead.
+
 The [`ReactTransitionGroup`](#low-level-api-reacttransitiongroup) add-on component is a low-level API for animation, and [`ReactCSSTransitionGroup`](#high-level-api-reactcsstransitiongroup) is an add-on component for easily implementing basic CSS animations and transitions.
 
 ## High-level API: ReactCSSTransitionGroup
@@ -23,7 +24,6 @@ The [`ReactTransitionGroup`](#low-level-api-reacttransitiongroup) add-on compone
 ```javascript
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
 var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
-var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js
 ```
 
 ```javascript{31-36}
@@ -231,7 +231,6 @@ You can disable animating `enter` or `leave` animations if you want. For example
 ```javascript
 import ReactTransitionGroup from 'react-addons-transition-group' // ES6
 var ReactTransitionGroup = require('react-addons-transition-group') // ES5 with npm
-var ReactTransitionGroup = React.addons.TransitionGroup; // ES5 with react-with-addons.js
 ```
 
 `ReactTransitionGroup` is the basis for animations. When children are declaratively added or removed from it (as in the [example above](#getting-started)), special lifecycle hooks are called on them.

docs/docs/addons-create-fragment.md

@@ -4,16 +4,13 @@ title: Keyed Fragments
 permalink: docs/create-fragment.html
 layout: docs
 category: Add-Ons
-prev: animation.html
-next: perf.html
 ---
 
 **Importing**
 
 ```javascript
 import createFragment from 'react-addons-create-fragment'; // ES6
 var createFragment = require('react-addons-create-fragment'); // ES5 with npm
-var createFragment = React.addons.createFragment; // ES5 with react-with-addons.js
 ```
 
 ## Overview

docs/docs/addons-perf.md

@@ -4,16 +4,13 @@ title: Performance Tools
 permalink: docs/perf.html
 layout: docs
 category: Add-Ons
-prev: create-fragment.html
-next: test-utils.html
 ---
 
 **Importing**
 
 ```javascript
 import Perf from 'react-addons-perf'; // ES6
 var Perf = require('react-addons-perf'); // ES5 with npm
-var Perf = React.addons.Perf; // ES5 with react-with-addons.js
 ```
 
 

docs/docs/addons-pure-render-mixin.md

@@ -14,7 +14,6 @@ category: Add-Ons
 ```javascript
 import PureRenderMixin from 'react-addons-pure-render-mixin'; // ES6
 var PureRenderMixin = require('react-addons-pure-render-mixin'); // ES5 with npm
-var PureRenderMixin = React.addons.PureRenderMixin; // ES5 with react-with-addons.js
 ```
 
 ## Overview
@@ -24,7 +23,9 @@ If your React component's render function renders the same result given the same
 Example:
 
 ```js
-React.createClass({
+const createReactClass = require('create-react-class');
+
+createReactClass({
   mixins: [PureRenderMixin],
 
   render: function() {

docs/docs/addons-shallow-compare.md

@@ -14,7 +14,6 @@ category: Reference
 ```javascript
 import shallowCompare from 'react-addons-shallow-compare'; // ES6
 var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm
-var shallowCompare = React.addons.shallowCompare; // ES5 with react-with-addons.js
 ```
 
 ## Overview

docs/docs/addons-shallow-renderer.md

@@ -0,0 +1,60 @@
+---
+id: shallow-renderer
+title: Shallow Renderer
+permalink: docs/shallow-renderer.html
+layout: docs
+category: Reference
+---
+
+**Importing**
+
+```javascript
+import ReactShallowRenderer from 'react-test-renderer/shallow'; // ES6
+var ReactShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
+```
+### Shallow Rendering
+
+Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
+
+ - [`shallowRenderer.render()`](#shallowrenderer.render)
+ - [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput)
+
+You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output.
+
+[`shallowRenderer.render()`](#shallowrenderer.render) is similar to [`ReactDOM.render()`](/react/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
+
+After `shallowRenderer.render()` has been called, you can use [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput) to get the shallowly rendered output.
+
+You can then begin to assert facts about the output. For example, if you have the following component:
+
+```javascript
+function MyComponent() {
+  return (
+    <div>
+      <span className="heading">Title</span>
+      <Subcomponent foo="bar" />
+    </div>
+  );
+}
+```
+
+Then you can assert:
+
+```javascript
+const ReactShallowRenderer = require('react-test-renderer/shallow');
+const shallowRenderer = new ReactShallowRenderer();
+shallowRenderer.render(<MyComponent />);
+const result = shallowRenderer.getRenderOutput();
+
+expect(result.type).toBe('div');
+expect(result.props.children).toEqual([
+  <span className="heading">Title</span>,
+  <Subcomponent foo="bar" />
+]);
+```
+
+Shallow testing currently has some limitations, namely not supporting refs.
+
+We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
+
+* * *

docs/docs/addons-test-utils.md

@@ -4,15 +4,13 @@ title: Test Utilities
 permalink: docs/test-utils.html
 layout: docs
 category: Reference
-prev: perf.html
 ---
 
 **Importing**
 
 ```javascript
-import ReactTestUtils from 'react-addons-test-utils'; // ES6
-var ReactTestUtils = require('react-addons-test-utils'); // ES5 with npm
-var ReactTestUtils = React.addons.TestUtils; // ES5 with react-with-addons.js
+import ReactTestUtils from 'react-dom/test-utils'; // ES6
+var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
 ```
 
 ## Overview
@@ -39,53 +37,6 @@ var ReactTestUtils = React.addons.TestUtils; // ES5 with react-with-addons.js
  - [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)
  - [`findRenderedComponentWithType()`](#findrenderedcomponentwithtype)
 
-### Shallow Rendering
-
-Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
-
- - [`createRenderer()`](#createrenderer)
- - [`shallowRenderer.render()`](#shallowrenderer.render)
- - [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput)
-
-Call [`createRenderer()`](#createrenderer) in your tests to create a shallow renderer. You can think of this as a "place" to render the component you're testing, and from which you can extract the component's output.
-
-[`shallowRenderer.render()`](#shallowrenderer.render) is similar to [`ReactDOM.render()`](/react/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
-
-After `shallowRenderer.render()` has been called, you can use [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput) to get the shallowly rendered output.
-
-You can then begin to assert facts about the output. For example, if you have the following component:
-
-```javascript
-function MyComponent() {
-  return (
-    <div>
-      <span className="heading">Title</span>
-      <Subcomponent foo="bar" />
-    </div>
-  );
-}
-```
-
-Then you can assert:
-
-```javascript
-const renderer = ReactTestUtils.createRenderer();
-renderer.render(<MyComponent />);
-const result = renderer.getRenderOutput();
-
-expect(result.type).toBe('div');
-expect(result.props.children).toEqual([
-  <span className="heading">Title</span>,
-  <Subcomponent foo="bar" />
-]);
-```
-
-Shallow testing currently has some limitations, namely not supporting refs.
-
-We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
-
-* * *
-
 ## Reference
 
 ### `Simulate`

docs/docs/addons-two-way-binding-helpers.md

@@ -4,8 +4,6 @@ title: Two-way Binding Helpers
 permalink: docs/two-way-binding-helpers.html
 layout: docs
 category: Add-Ons
-prev: pure-render-mixin.html
-next: update.html
 ---
 
 > Note:
@@ -16,7 +14,6 @@ next: update.html
 ```javascript
 import LinkedStateMixin from 'react-addons-linked-state-mixin'; // ES6
 var LinkedStateMixin = require('react-addons-linked-state-mixin'); // ES5 with npm
-var LinkedStateMixin = React.addons.LinkedStateMixin; // ES5 with react-with-addons.js
 ```
 
 ## Overview
@@ -40,7 +37,9 @@ Two-way binding -- implicitly enforcing that some value in the DOM is always con
 Here's a simple form example without using `LinkedStateMixin`:
 
 ```javascript
-var NoLink = React.createClass({
+var createReactClass = require('create-react-class');
+
+var NoLink = createReactClass({
   getInitialState: function() {
     return {message: 'Hello!'};
   },
@@ -57,7 +56,9 @@ var NoLink = React.createClass({
 This works really well and it's very clear how data is flowing, however, with a lot of form fields it could get a bit verbose. Let's use `LinkedStateMixin` to save us some typing:
 
 ```javascript{4,9}
-var WithLink = React.createClass({
+var createReactClass = require('create-react-class');
+
+var WithLink = createReactClass({
   mixins: [LinkedStateMixin],
   getInitialState: function() {
     return {message: 'Hello!'};
@@ -83,8 +84,10 @@ There are two sides to `LinkedStateMixin`: the place where you create the `value
 
 ### valueLink Without LinkedStateMixin
 
-```javascript{5-7,9-12}
-var WithoutMixin = React.createClass({
+```javascript{7-9,11-14}
+var createReactClass = require('create-react-class');
+
+var WithoutMixin = createReactClass({
   getInitialState: function() {
     return {message: 'Hello!'};
   },
@@ -107,8 +110,9 @@ As you can see, `valueLink` objects are very simple objects that just have a `va
 
 ```javascript
 var LinkedStateMixin = require('react-addons-linked-state-mixin');
+var createReactClass = require('create-react-class');
 
-var WithoutLink = React.createClass({
+var WithoutLink = createReactClass({
   mixins: [LinkedStateMixin],
   getInitialState: function() {
     return {message: 'Hello!'};

docs/docs/addons-update.md

@@ -14,7 +14,6 @@ category: Add-Ons
 ```javascript
 import update from 'react-addons-update'; // ES6
 var update = require('react-addons-update'); // ES5 with npm
-var update = React.addons.update; // ES5 with react-with-addons.js
 ```
 
 ## Overview

docs/docs/addons.md

@@ -4,9 +4,11 @@ title: Add-Ons
 permalink: docs/addons.html
 ---
 
+>Note:
+> `React.addons` is deprecated as of React v15.5. The add-ons have now all either been deprecated or moved to separate modules.
+
 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.
 
-- [`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.
 - [`createFragment`](create-fragment.html), to create a set of externally-keyed children.
 
 The add-ons below are in the development (unminified) version of React only:
@@ -24,11 +26,12 @@ The add-ons below are considered legacy and their use is discouraged.
 
 ### Deprecated Add-ons
 
-[`LinkedStateMixin`](two-way-binding-helpers.html) has been deprecated.
+- [`LinkedStateMixin`](two-way-binding-helpers.html) has been deprecated.
+- [`TransitionGroup` and `CSSTransitionGroup`](animation.html) have been deprecated.
 
 ## Using React with Add-ons
 
-If using npm, you can install the add-ons individually from npm (e.g. `npm install react-addons-test-utils`) and import them:
+You can install the add-ons individually from npm (e.g. `npm install react-addons-create-fragment`) and import them:
 
 ```javascript
 import Perf from 'react-addons-perf'; // ES6

docs/docs/components-and-props.md

@@ -12,8 +12,6 @@ redirect_from:
   - "docs/transferring-props-zh-CN.html"
   - "tips/props-in-getInitialState-as-anti-pattern.html"
   - "tips/communicate-between-components.html"
-prev: rendering-elements.html
-next: state-and-lifecycle.html
 ---
 
 Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

docs/docs/composition-vs-inheritance.md

@@ -3,8 +3,6 @@ id: composition-vs-inheritance
 title: Composition vs Inheritance
 permalink: docs/composition-vs-inheritance.html
 redirect_from: "docs/multiple-components.html"
-prev: lifting-state-up.html
-next: thinking-in-react.html
 ---
 
 React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

docs/docs/conditional-rendering.md

@@ -2,8 +2,6 @@
 id: conditional-rendering
 title: Conditional Rendering
 permalink: docs/conditional-rendering.html
-prev: handling-events.html
-next: lists-and-keys.html
 redirect_from: "tips/false-in-jsx.html"
 ---