@samitouri / QOS-React / commits / 8f7281199d

All doc updates forv15.5 (#9359)

* `react-addons-test-utils` -> `react-dom/test-utils` Updating all references and docs on the `React.addons.TestUtils` and the shallow renderer to refer to the correct targets. Instead of: ``` const React = require('react'); // ... React.addons.Testutils // or const ReactTestUtils = require('react-addons-test-utils'); ``` we now show: ``` const ReactTestUtils = require('react-dom/test-utils'); ``` And for shallow renderer, instead of: ``` const shallowRenderer = TestUtils.createRenderer(); ``` we now show: ``` const shallowRenderer = require('react-test-renderer/shallow'); ``` * Update the 'prev' and 'next' attributes of 'add-ons' docs These flags are used to set arrow links to easily navigate through the documents. They were wrong or missing in some of the 'add-ons' pages and this bothered me when manually testing the updates from the previous commit. * Update syntax for instantiating shallow renderer Missed this when updating the docs for the changes to shallow-renderer in React 15.5. * Fix pointers in addons docs Thanks @bvaughn for catching this * Make example of shallow renderer more consistent We should show using the same variable names between code samples. * Make names in example even more consistent We should use the same variable name for the same thing across examples. `renderer` -> `shallowRenderer`. * Update docs to deprecate React<CSS>TransitionGroup - removes link to the docs about `ReactCSSTransitionGroup` and `ReactTransitionGroup` from the main navigation - updates 'prev' and 'next' pointers to skip this page - adds deprecation warning to the top of the page - remove references to these modules from the packages README - updates 'add-ons' main page to list this as a deprecated add-on * Update `React.createClass` to `createReactClass` in the docs The `React.createClass` method is being deprecated in favor of `createReactClass`. * Remove 'React.createClass' from top level API docs It no longer makes sense to have a section for the 'createClass' method in this page, since it won't be available as a top level method on 'React'. I initially was going to pull the section about 'createClass' into a separate page to add under 'addons' but it was short and duplicative of the 'react-without-es6' docs. So I just linked to those. * Remove *most* `React.PropTypes` from the docs I am doing the docs for `context` in a separate commit because that case was a bit less clear-cut. We will no longer support `React.PropTypes` as a built-in feature of React, and instead should direct folks to use the `PropTypes` project that stands alone. Rather than retaining the `React.PropTypes` examples and just revamping them to show the use of the stand-alone `PropTypes` library with React, it makes more sense to direct people to that project and reduce the perceived API area and complexity of React core. The proper place to document `PropTypes` is in the README or docs of that project, not in React docs. * Update `context` docs to not use `React.PropTypes` We use `React.PropTypes` to define the `contextType` for the `context` feature of React. It's unclear how this will work once `React.PropTypes` is replaced by the external `PropTypes` library. Some options; a) Deprecate `context`, either in v16 or shortly after. Seems reasonable based on the intense warnings against using context that we have in the docs - https://facebook.github.io/react/docs/context.html#why-not-to-use-context **Except** that probably some widely used libraries depend on it, like `React-Router`. b) Expect users will use external `PropTypes` library when defining `contextTypes` and just don't do our `checkReactTypeSpec` against them any more in v16. c) Stop masking context and pass the whole context unmasked everywhere. Worst option, do not recommend. I went with `b` and assume that, for now, we will get users to use the external `PropTypes` when defining context. I will update this PR if we want a different approach. * Remove 'addons' items from left nav, and deprecate 'addons' doc page The plan: [X] Remove links to 'addons' items from main navigation [X] Add deprecation notices where appropriate, and update syntax to show using the separate modules. [ ] Update other references to 'React.addons' in docs. Coming in next commit. --- blocked but coming in future PRs [ ] Link to a blog post describing the new locations of add-ons in the deprecation notice on the '/docs/addons.html' page. Blocked until we actually publish that blog post. [ ] Move the docs for each add-on to the actual github repo where it now lives. [ ] Redirect the old add-ons doc permalinks to the docs in the separate github repos for those modules. [ ] Remove the old add-ons doc markdown files from React core docs. * Remove references to `React.addons` from docs Just misc. places where we referenced the 'addons' feature. All gone!

Flarnie Marchan committed Apr 6, 2017 at 17:20 UTC 8f7281199dfdcf154ffc0a6fe8034fe623d60c38
23 files changed +132 -426
docs/_data/nav_docs.yml
-21
@@ -30,8 +30,6 @@
30 items:
31 - id: jsx-in-depth
32 title: JSX In Depth
33 - - id: typechecking-with-proptypes
34 - title: Typechecking With PropTypes
33 - id: refs-and-the-dom
34 title: Refs and the DOM
35 - id: uncontrolled-components
@@ -65,22 +63,3 @@
63 title: DOM Elements
64 - id: events
65 title: SyntheticEvent
68 - - id: addons
69 - title: Add-Ons
70 - subitems:
71 - - id: perf
72 - title: Performance Tools
73 - - id: test-utils
74 - title: Test Utilities
75 - - id: animation
76 - title: Animation
77 - - id: create-fragment
78 - title: Keyed Fragments
79 - - id: update
80 - title: Immutability Helpers
81 - - id: pure-render-mixin
82 - title: PureRenderMixin
83 - - id: shallow-compare
84 - title: Shallow Compare
85 - - id: two-way-binding-helpers
86 - title: Two-way Binding Helpers
docs/contributing/codebase-overview.md
-6
@@ -401,12 +401,6 @@ React implements a synthetic event system which is agnostic of the renderers and
401
402 There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
403
404 -### Add-ons
405 -
406 -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).
407 -
408 -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.
409 -
404 ### What Next?
405
406 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
+3 -4
@@ -4,14 +4,15 @@ title: Animation Add-Ons
4 permalink: docs/animation.html
5 layout: docs
6 category: Add-Ons
7 -prev: addons.html
8 -next: create-fragment.html
7 redirect_from:
8 - "docs/animation-ja-JP.html"
9 - "docs/animation-ko-KR.html"
10 - "docs/animation-zh-CN.html"
11 ---
12
13 +>Note:
14 +> `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.
15 +
16 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.
17
18 ## High-level API: ReactCSSTransitionGroup
@@ -23,7 +24,6 @@ The [`ReactTransitionGroup`](#low-level-api-reacttransitiongroup) add-on compone
24 ```javascript
25 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
26 var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
26 -var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js
27 ```
28
29 ```javascript{31-36}
@@ -231,7 +231,6 @@ You can disable animating `enter` or `leave` animations if you want. For example
231 ```javascript
232 import ReactTransitionGroup from 'react-addons-transition-group' // ES6
233 var ReactTransitionGroup = require('react-addons-transition-group') // ES5 with npm
234 -var ReactTransitionGroup = React.addons.TransitionGroup; // ES5 with react-with-addons.js
234 ```
235
236 `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
-3
@@ -4,8 +4,6 @@ title: Keyed Fragments
4 permalink: docs/create-fragment.html
5 layout: docs
6 category: Add-Ons
7 -prev: animation.html
8 -next: perf.html
7 ---
8
9 **Importing**
@@ -13,7 +11,6 @@ next: perf.html
11 ```javascript
12 import createFragment from 'react-addons-create-fragment'; // ES6
13 var createFragment = require('react-addons-create-fragment'); // ES5 with npm
16 -var createFragment = React.addons.createFragment; // ES5 with react-with-addons.js
14 ```
15
16 ## Overview
docs/docs/addons-perf.md
-3
@@ -4,8 +4,6 @@ title: Performance Tools
4 permalink: docs/perf.html
5 layout: docs
6 category: Add-Ons
7 -prev: create-fragment.html
8 -next: test-utils.html
7 ---
8
9 **Importing**
@@ -13,7 +11,6 @@ next: test-utils.html
11 ```javascript
12 import Perf from 'react-addons-perf'; // ES6
13 var Perf = require('react-addons-perf'); // ES5 with npm
16 -var Perf = React.addons.Perf; // ES5 with react-with-addons.js
14 ```
15
16
docs/docs/addons-pure-render-mixin.md
+3 -2
@@ -14,7 +14,6 @@ category: Add-Ons
14 ```javascript
15 import PureRenderMixin from 'react-addons-pure-render-mixin'; // ES6
16 var PureRenderMixin = require('react-addons-pure-render-mixin'); // ES5 with npm
17 -var PureRenderMixin = React.addons.PureRenderMixin; // ES5 with react-with-addons.js
17 ```
18
19 ## Overview
@@ -24,7 +23,9 @@ If your React component's render function renders the same result given the same
23 Example:
24
25 ```js
27 -React.createClass({
26 +const createReactClass = require('create-react-class');
27 +
28 +createReactClass({
29 mixins: [PureRenderMixin],
30
31 render: function() {
docs/docs/addons-shallow-compare.md
-1
@@ -14,7 +14,6 @@ category: Reference
14 ```javascript
15 import shallowCompare from 'react-addons-shallow-compare'; // ES6
16 var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm
17 -var shallowCompare = React.addons.shallowCompare; // ES5 with react-with-addons.js
17 ```
18
19 ## Overview
docs/docs/addons-shallow-renderer.md new
+60
@@ -0,0 +1,60 @@
1 +---
2 +id: shallow-renderer
3 +title: Shallow Renderer
4 +permalink: docs/shallow-renderer.html
5 +layout: docs
6 +category: Reference
7 +---
8 +
9 +**Importing**
10 +
11 +```javascript
12 +import ReactShallowRenderer from 'react-test-renderer/shallow'; // ES6
13 +var ReactShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
14 +```
15 +### Shallow Rendering
16 +
17 +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.
18 +
19 + - [`shallowRenderer.render()`](#shallowrenderer.render)
20 + - [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput)
21 +
22 +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.
23 +
24 +[`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.
25 +
26 +After `shallowRenderer.render()` has been called, you can use [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput) to get the shallowly rendered output.
27 +
28 +You can then begin to assert facts about the output. For example, if you have the following component:
29 +
30 +```javascript
31 +function MyComponent() {
32 + return (
33 + <div>
34 + <span className="heading">Title</span>
35 + <Subcomponent foo="bar" />
36 + </div>
37 + );
38 +}
39 +```
40 +
41 +Then you can assert:
42 +
43 +```javascript
44 +const ReactShallowRenderer = require('react-test-renderer/shallow');
45 +const shallowRenderer = new ReactShallowRenderer();
46 +shallowRenderer.render(<MyComponent />);
47 +const result = shallowRenderer.getRenderOutput();
48 +
49 +expect(result.type).toBe('div');
50 +expect(result.props.children).toEqual([
51 + <span className="heading">Title</span>,
52 + <Subcomponent foo="bar" />
53 +]);
54 +```
55 +
56 +Shallow testing currently has some limitations, namely not supporting refs.
57 +
58 +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.
59 +
60 +* * *
docs/docs/addons-test-utils.md
+2 -51
@@ -4,15 +4,13 @@ title: Test Utilities
4 permalink: docs/test-utils.html
5 layout: docs
6 category: Reference
7 -prev: perf.html
7 ---
8
9 **Importing**
10
11 ```javascript
13 -import ReactTestUtils from 'react-addons-test-utils'; // ES6
14 -var ReactTestUtils = require('react-addons-test-utils'); // ES5 with npm
15 -var ReactTestUtils = React.addons.TestUtils; // ES5 with react-with-addons.js
12 +import ReactTestUtils from 'react-dom/test-utils'; // ES6
13 +var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
14 ```
15
16 ## Overview
@@ -39,53 +37,6 @@ var ReactTestUtils = React.addons.TestUtils; // ES5 with react-with-addons.js
37 - [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)
38 - [`findRenderedComponentWithType()`](#findrenderedcomponentwithtype)
39
42 -### Shallow Rendering
43 -
44 -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.
45 -
46 - - [`createRenderer()`](#createrenderer)
47 - - [`shallowRenderer.render()`](#shallowrenderer.render)
48 - - [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput)
49 -
50 -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.
51 -
52 -[`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.
53 -
54 -After `shallowRenderer.render()` has been called, you can use [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput) to get the shallowly rendered output.
55 -
56 -You can then begin to assert facts about the output. For example, if you have the following component:
57 -
58 -```javascript
59 -function MyComponent() {
60 - return (
61 - <div>
62 - <span className="heading">Title</span>
63 - <Subcomponent foo="bar" />
64 - </div>
65 - );
66 -}
67 -```
68 -
69 -Then you can assert:
70 -
71 -```javascript
72 -const renderer = ReactTestUtils.createRenderer();
73 -renderer.render(<MyComponent />);
74 -const result = renderer.getRenderOutput();
75 -
76 -expect(result.type).toBe('div');
77 -expect(result.props.children).toEqual([
78 - <span className="heading">Title</span>,
79 - <Subcomponent foo="bar" />
80 -]);
81 -```
82 -
83 -Shallow testing currently has some limitations, namely not supporting refs.
84 -
85 -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.
86 -
87 -* * *
88 -
40 ## Reference
41
42 ### `Simulate`
docs/docs/addons-two-way-binding-helpers.md
+12 -8
@@ -4,8 +4,6 @@ title: Two-way Binding Helpers
4 permalink: docs/two-way-binding-helpers.html
5 layout: docs
6 category: Add-Ons
7 -prev: pure-render-mixin.html
8 -next: update.html
7 ---
8
9 > Note:
@@ -16,7 +14,6 @@ next: update.html
14 ```javascript
15 import LinkedStateMixin from 'react-addons-linked-state-mixin'; // ES6
16 var LinkedStateMixin = require('react-addons-linked-state-mixin'); // ES5 with npm
19 -var LinkedStateMixin = React.addons.LinkedStateMixin; // ES5 with react-with-addons.js
17 ```
18
19 ## Overview
@@ -40,7 +37,9 @@ Two-way binding -- implicitly enforcing that some value in the DOM is always con
37 Here's a simple form example without using `LinkedStateMixin`:
38
39 ```javascript
43 -var NoLink = React.createClass({
40 +var createReactClass = require('create-react-class');
41 +
42 +var NoLink = createReactClass({
43 getInitialState: function() {
44 return {message: 'Hello!'};
45 },
@@ -57,7 +56,9 @@ var NoLink = React.createClass({
56 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:
57
58 ```javascript{4,9}
60 -var WithLink = React.createClass({
59 +var createReactClass = require('create-react-class');
60 +
61 +var WithLink = createReactClass({
62 mixins: [LinkedStateMixin],
63 getInitialState: function() {
64 return {message: 'Hello!'};
@@ -83,8 +84,10 @@ There are two sides to `LinkedStateMixin`: the place where you create the `value
84
85 ### valueLink Without LinkedStateMixin
86
86 -```javascript{5-7,9-12}
87 -var WithoutMixin = React.createClass({
87 +```javascript{7-9,11-14}
88 +var createReactClass = require('create-react-class');
89 +
90 +var WithoutMixin = createReactClass({
91 getInitialState: function() {
92 return {message: 'Hello!'};
93 },
@@ -107,8 +110,9 @@ As you can see, `valueLink` objects are very simple objects that just have a `va
110
111 ```javascript
112 var LinkedStateMixin = require('react-addons-linked-state-mixin');
113 +var createReactClass = require('create-react-class');
114
111 -var WithoutLink = React.createClass({
115 +var WithoutLink = createReactClass({
116 mixins: [LinkedStateMixin],
117 getInitialState: function() {
118 return {message: 'Hello!'};
docs/docs/addons-update.md
-1
@@ -14,7 +14,6 @@ category: Add-Ons
14 ```javascript
15 import update from 'react-addons-update'; // ES6
16 var update = require('react-addons-update'); // ES5 with npm
17 -var update = React.addons.update; // ES5 with react-with-addons.js
17 ```
18
19 ## Overview
docs/docs/addons.md
+6 -3
@@ -4,9 +4,11 @@ title: Add-Ons
4 permalink: docs/addons.html
5 ---
6
7 +>Note:
8 +> `React.addons` is deprecated as of React v15.5. The add-ons have now all either been deprecated or moved to separate modules.
9 +
10 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.
11
9 -- [`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.
12 - [`createFragment`](create-fragment.html), to create a set of externally-keyed children.
13
14 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.
26
27 ### Deprecated Add-ons
28
27 -[`LinkedStateMixin`](two-way-binding-helpers.html) has been deprecated.
29 +- [`LinkedStateMixin`](two-way-binding-helpers.html) has been deprecated.
30 +- [`TransitionGroup` and `CSSTransitionGroup`](animation.html) have been deprecated.
31
32 ## Using React with Add-ons
33
31 -If using npm, you can install the add-ons individually from npm (e.g. `npm install react-addons-test-utils`) and import them:
34 +You can install the add-ons individually from npm (e.g. `npm install react-addons-create-fragment`) and import them:
35
36 ```javascript
37 import Perf from 'react-addons-perf'; // ES6
docs/docs/components-and-props.md
-2
@@ -12,8 +12,6 @@ redirect_from:
12 - "docs/transferring-props-zh-CN.html"
13 - "tips/props-in-getInitialState-as-anti-pattern.html"
14 - "tips/communicate-between-components.html"
15 -prev: rendering-elements.html
16 -next: state-and-lifecycle.html
15 ---
16
17 Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
docs/docs/composition-vs-inheritance.md
-2
@@ -3,8 +3,6 @@ id: composition-vs-inheritance
3 title: Composition vs Inheritance
4 permalink: docs/composition-vs-inheritance.html
5 redirect_from: "docs/multiple-components.html"
6 -prev: lifting-state-up.html
7 -next: thinking-in-react.html
6 ---
7
8 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
@@ -2,8 +2,6 @@
2 id: conditional-rendering
3 title: Conditional Rendering
4 permalink: docs/conditional-rendering.html
5 -prev: handling-events.html
6 -next: lists-and-keys.html
5 redirect_from: "tips/false-in-jsx.html"
6 ---
7
docs/docs/context.md
+15 -5
@@ -4,11 +4,15 @@ title: Context
4 permalink: docs/context.html
5 ---
6
7 +>Note:
8 +> As of React v15.5 the `React.PropTypes` helper is deprecated, and we recommend using the [`prop-types` library](https://github.com/aackerman/PropTypes) to define `contextTypes`.
9 +
10 With React, it's easy to track the flow of data through your React components. When you look at a component, you can see which props are being passed, which makes your apps easy to reason about.
11
12 In some cases, you want to pass data through the component tree without having to pass the props down manually at every level.
13 You can do this directly in React with the powerful "context" API.
14
15 +
16 ## Why Not To Use Context
17
18 The vast majority of applications do not need to use context.
@@ -59,7 +63,9 @@ class MessageList extends React.Component {
63
64 In this example, we manually thread through a `color` prop in order to style the `Button` and `Message` components appropriately. Using context, we can pass this through the tree automatically:
65
62 -```javascript{4,11-13,19,26-28,38-40}
66 +```javascript{6,13-15,21,28-30,40-42}
67 +const PropTypes = require('prop-types');
68 +
69 class Button extends React.Component {
70 render() {
71 return (
@@ -71,7 +77,7 @@ class Button extends React.Component {
77 }
78
79 Button.contextTypes = {
74 - color: React.PropTypes.string
80 + color: PropTypes.string
81 };
82
83 class Message extends React.Component {
@@ -98,7 +104,7 @@ class MessageList extends React.Component {
104 }
105
106 MessageList.childContextTypes = {
101 - color: React.PropTypes.string
107 + color: PropTypes.string
108 };
109 ```
110
@@ -151,12 +157,14 @@ If `contextTypes` is defined within a component, the following [lifecycle method
157 Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a stateless functional component.
158
159 ```javascript
160 +const PropTypes = require('prop-types');
161 +
162 const Button = ({children}, context) =>
163 <button style={{'{{'}}background: context.color}}>
164 {children}
165 </button>;
166
159 -Button.contextTypes = {color: React.PropTypes.string};
167 +Button.contextTypes = {color: PropTypes.string};
168 ```
169
170 ## Updating Context
@@ -168,6 +176,8 @@ React has an API to update context, but it is fundamentally broken and you shoul
176 The `getChildContext` function will be called when the state or props changes. In order to update data in the context, trigger a local state update with `this.setState`. This will trigger a new context and changes will be received by the children.
177
178 ```javascript
179 +const PropTypes = require('prop-types');
180 +
181 class MediaQuery extends React.Component {
182 constructor(props) {
183 super(props);
@@ -196,7 +206,7 @@ class MediaQuery extends React.Component {
206 }
207
208 MediaQuery.childContextTypes = {
199 - type: React.PropTypes.string
209 + type: PropTypes.string
210 };
211 ```
212
docs/docs/react-without-es6.md
+18 -23
@@ -14,45 +14,38 @@ class Greeting extends React.Component {
14 }
15 ```
16
17 -If you don't use ES6 yet, you may use the `React.createClass` helper instead:
17 +If you don't use ES6 yet, you may use the `create-react-class` module instead:
18
19
20 ```javascript
21 -var Greeting = React.createClass({
21 +var createReactClass = require('create-react-class');
22 +var Greeting = createReactClass({
23 render: function() {
24 return <h1>Hello, {this.props.name}</h1>;
25 }
26 });
27 ```
28
28 -The API of ES6 classes is similar to `React.createClass` with a few exceptions.
29 +The API of ES6 classes is similar to `createReactClass()` with a few exceptions.
30
30 -## Declaring Prop Types and Default Props
31 +## Declaring Default Props
32
32 -With functions and ES6 classes, `propTypes` and `defaultProps` are defined as properties on the components themselves:
33 +With functions and ES6 classes `defaultProps` is defined as a property on the component itself:
34
35 ```javascript
36 class Greeting extends React.Component {
37 // ...
38 }
39
39 -Greeting.propTypes = {
40 - name: React.PropTypes.string
41 -};
42 -
40 Greeting.defaultProps = {
41 name: 'Mary'
42 };
43 ```
44
48 -With `React.createClass()`, you need to define `propTypes` as a property on the passed object, and `getDefaultProps()` as a function on it:
45 +With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object:
46
47 ```javascript
51 -var Greeting = React.createClass({
52 - propTypes: {
53 - name: React.PropTypes.string
54 - },
55 -
48 +var Greeting = createReactClass({
49 getDefaultProps: function() {
50 return {
51 name: 'Mary'
@@ -78,10 +71,10 @@ class Counter extends React.Component {
71 }
72 ```
73
81 -With `React.createClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
74 +With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
75
76 ```javascript
84 -var Counter = React.createClass({
77 +var Counter = createReactClass({
78 getInitialState: function() {
79 return {count: this.props.initialCount};
80 },
@@ -117,14 +110,14 @@ class SayHello extends React.Component {
110 }
111 ```
112
120 -With `React.createClass()`, this is not necessary because it binds all methods:
113 +With `createReactClass()`, this is not necessary because it binds all methods:
114
115 ```javascript
123 -var SayHello = React.createClass({
116 +var SayHello = createReactClass({
117 getInitialState: function() {
118 return {message: 'Hello!'};
119 },
127 -
120 +
121 handleClick: function() {
122 alert(this.state.message);
123 },
@@ -172,7 +165,7 @@ If you'd rather play it safe, you have a few options:
165
166 * Bind methods in the constructor.
167 * Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
175 -* Keep using `React.createClass()`.
168 +* Keep using `createReactClass`.
169
170 ## Mixins
171
@@ -184,7 +177,7 @@ If you'd rather play it safe, you have a few options:
177 >
178 >This section exists only for the reference.
179
187 -Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). [`React.createClass`](/react/docs/top-level-api.html#react.createclass) lets you use a legacy `mixins` system for that.
180 +Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). [`createReactClass`](/react/docs/top-level-api.html#react.createclass) lets you use a legacy `mixins` system for that.
181
182 One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
183
@@ -201,7 +194,9 @@ var SetIntervalMixin = {
194 }
195 };
196
204 -var TickTock = React.createClass({
197 +var createReactClass = require('create-react-class');
198 +
199 +var TickTock = createReactClass({
200 mixins: [SetIntervalMixin], // Use the mixin
201 getInitialState: function() {
202 return {seconds: 0};
docs/docs/reference-pure-render-mixin.md
+2 -1
@@ -16,7 +16,8 @@ Example:
16
17 ```js
18 var PureRenderMixin = require('react-addons-pure-render-mixin');
19 -React.createClass({
19 +var createReactClass = require('create-react-class');
20 +createReactClass({
21 mixins: [PureRenderMixin],
22
23 render: function() {
docs/docs/reference-react-component.md
+2 -23
@@ -31,7 +31,7 @@ class Greeting extends React.Component {
31 }
32 ```
33
34 -If you don't use ES6 yet, you may use the [`React.createClass`](/react/docs/react-api.html#createclass) helper instead. Take a look at [Using React without ES6](/react/docs/react-without-es6.html) to learn more.
34 +If you don't use ES6 yet, you may use the [`create-react-class`](/react/docs/react-api.html#createclass) module instead. Take a look at [Using React without ES6](/react/docs/react-without-es6.html) to learn more.
35
36 ### The Component Lifecycle
37
@@ -73,7 +73,6 @@ Each component also provides some other APIs:
73
74 - [`defaultProps`](#defaultprops)
75 - [`displayName`](#displayname)
76 - - [`propTypes`](#proptypes)
76
77 ### Instance Properties
78
@@ -122,7 +121,7 @@ constructor(props) {
121 this.state = {
122 color: props.initialColor
123 };
125 -}
124 +}
125 ```
126
127 Beware of this pattern, as it effectively "forks" the props and can lead to bugs. Instead of syncing props to state, you often want to [lift the state up](/react/docs/lifting-state-up.html).
@@ -315,26 +314,6 @@ The `displayName` string is used in debugging messages. JSX sets this value auto
314
315 * * *
316
318 -### `propTypes`
319 -
320 -`propTypes` can be defined as a property on the component class itself, to define what types the props should be. It should be a map from prop names to types as defined in [`React.PropTypes`](/react/docs/react-api.html#react.proptypes). In development mode, when an invalid value is provided for a prop, a warning will be shown in the JavaScript console. In production mode, `propTypes` checks are skipped for efficiency.
321 -
322 -For example, this code ensures that the `color` prop is a string:
323 -
324 -```js
325 -class CustomButton extends React.Component {
326 - // ...
327 -}
328 -
329 -CustomButton.propTypes = {
330 - color: React.PropTypes.string
331 -};
332 -```
333 -
334 -We recommend using [Flow](https://flowtype.org/) when possible, to get compile-time typechecking instead of runtime typechecking. [Flow has built-in support for React](https://flowtype.org/docs/react.html) so it's easy to run static analysis on a React app.
335 -
336 -* * *
337 -
317 ## Instance Properties
318
319 ### `props`
docs/docs/reference-react.md
+1 -258
@@ -25,9 +25,7 @@ React components let you split the UI into independent, reusable pieces, and thi
25 - [`React.Component`](#react.component)
26 - [`React.PureComponent`](#react.purecomponent)
27
28 -If you don't use ES6 classes, you may use this helper instead.
29 -
30 - - [`createClass()`](#createclass)
28 +If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/react/docs/react-without-es6.html) for more information.
29
30 ### Creating React Elements
31
@@ -46,38 +44,6 @@ See [Using React without JSX](/react/docs/react-without-jsx.html) for more infor
44 - [`isValidElement()`](#isvalidelement)
45 - [`React.Children`](#react.children)
46
49 -### Typechecking with PropTypes
50 -
51 -You can use `React.PropTypes` to run typechecking on the props for a component.
52 -
53 - - [`React.PropTypes`](#react.proptypes)
54 - - [`React.PropTypes.array`](#react.proptypes.array)
55 - - [`React.PropTypes.bool`](#react.proptypes.bool)
56 - - [`React.PropTypes.func`](#react.proptypes.func)
57 - - [`React.PropTypes.number`](#react.proptypes.number)
58 - - [`React.PropTypes.object`](#react.proptypes.object)
59 - - [`React.PropTypes.string`](#react.proptypes.string)
60 - - [`React.PropTypes.symbol`](#react.proptypes.symbol)
61 - - [`React.PropTypes.node`](#react.proptypes.node)
62 - - [`React.PropTypes.element`](#react.proptypes.element)
63 - - [`React.PropTypes.instanceOf()`](#react.proptypes.instanceof)
64 - - [`React.PropTypes.oneOf()`](#react.proptypes.oneof)
65 - - [`React.PropTypes.oneOfType()`](#react.proptypes.oneoftype)
66 - - [`React.PropTypes.arrayOf()`](#react.proptypes.arrayof)
67 - - [`React.PropTypes.objectOf()`](#react.proptypes.objectof)
68 - - [`React.PropTypes.shape()`](#react.proptypes.shape)
69 - - [`React.PropTypes.any`](#react.proptypes.any)
70 -
71 -Validators treat props as optional by default. You can use `isRequired` to make sure a warning is shown if the prop is not provided.
72 -
73 - - [`isRequired`](#isrequired)
74 -
75 -### Add-Ons
76 -
77 -If you're using [`react-with-addons.js`](/react/docs/addons.html), the React Add-Ons will be available via `React.addons`.
78 -
79 - - [`React.addons`](#react.addons)
80 -
47 * * *
48
49 ## Reference
@@ -112,26 +78,6 @@ If your React component's `render()` function renders the same result given the
78
79 * * *
80
115 -### `createClass()`
116 -
117 -```javascript
118 -React.createClass(specification)
119 -```
120 -
121 -If you don't use ES6 yet, you may use the `React.createClass()` helper instead to create a component class.
122 -
123 -```javascript
124 -var Greeting = React.createClass({
125 - render: function() {
126 - return <h1>Hello, {this.props.name}</h1>;
127 - }
128 -});
129 -```
130 -
131 -See [Using React without ES6](/react/docs/react-without-es6.html) for more information.
132 -
133 -* * *
134 -
81 ### `createElement()`
82
83 ```javascript
@@ -245,206 +191,3 @@ Returns the `children` opaque data structure as a flat array with keys assigned
191 > Note:
192 >
193 > `React.Children.toArray()` changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, `toArray` prefixes each key in the returned array so that each element's key is scoped to the input array containing it.
248 -
249 -* * *
250 -
251 -### `React.PropTypes`
252 -
253 -`React.PropTypes` exports a range of validators that can be used with a component's `propTypes` object to validate props being passed to your components.
254 -
255 -For more information about `PropTypes`, see [Typechecking with PropTypes](/react/docs/typechecking-with-proptypes.html).
256 -
257 -#### `React.PropTypes.array`
258 -
259 -```javascript
260 -React.PropTypes.array
261 -```
262 -
263 -Validates that a prop is a JavaScript array primitive.
264 -
265 -#### `React.PropTypes.bool`
266 -
267 -```javascript
268 -React.PropTypes.bool
269 -```
270 -
271 -Validates that a prop is a JavaScript bool primitive.
272 -
273 -#### `React.PropTypes.func`
274 -
275 -```javascript
276 -React.PropTypes.func
277 -```
278 -
279 -Validates that a prop is a JavaScript function.
280 -
281 -#### `React.PropTypes.number`
282 -
283 -```javascript
284 -React.PropTypes.number
285 -```
286 -
287 -Validates that a prop is a JavaScript number primitive.
288 -
289 -#### `React.PropTypes.object`
290 -
291 -```javascript
292 -React.PropTypes.object
293 -```
294 -
295 -Validates that a prop is a JavaScript object.
296 -
297 -#### `React.PropTypes.string`
298 -
299 -```javascript
300 -React.PropTypes.string
301 -```
302 -
303 -Validates that a prop is a JavaScript string primitive.
304 -
305 -#### `React.PropTypes.symbol`
306 -
307 -```javascript
308 -React.PropTypes.symbol
309 -```
310 -
311 -Validates that a prop is a JavaScript symbol.
312 -
313 -#### `React.PropTypes.node`
314 -
315 -```javascript
316 -React.PropTypes.node
317 -```
318 -
319 -Validates that a prop is anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types.
320 -
321 -#### `React.PropTypes.element`
322 -
323 -```javascript
324 -React.PropTypes.element
325 -```
326 -
327 -Validates that a prop is a React element.
328 -
329 -#### `React.PropTypes.instanceOf()`
330 -
331 -```javascript
332 -React.PropTypes.instanceOf(class)
333 -```
334 -
335 -Validates that a prop is an instance of a class. This uses JavaScript's `instanceof` operator.
336 -
337 -#### `React.PropTypes.oneOf()`
338 -
339 -```javascript
340 -React.PropTypes.oneOf(arrayOfValues)
341 -```
342 -
343 -Validates that a prop is limited to specific values by treating it as an enum.
344 -
345 -```javascript
346 -MyComponent.propTypes = {
347 - optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
348 -}
349 -```
350 -
351 -#### `React.PropTypes.oneOfType()`
352 -
353 -```javascript
354 -React.PropTypes.oneOfType(arrayOfPropTypes)
355 -```
356 -
357 -Validates that a prop is an object that could be one of many types.
358 -
359 -```javascript
360 -MyComponent.propTypes = {
361 - optionalUnion: React.PropTypes.oneOfType([
362 - React.PropTypes.string,
363 - React.PropTypes.number,
364 - React.PropTypes.instanceOf(Message)
365 - ]),
366 -}
367 -```
368 -
369 -#### `React.PropTypes.arrayOf()`
370 -
371 -```javascript
372 -React.PropTypes.arrayOf(propType)
373 -```
374 -
375 -Validates that a prop is an array of a certain type.
376 -
377 -```javascript
378 -MyComponent.propTypes = {
379 - optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
380 -}
381 -```
382 -
383 -#### `React.PropTypes.objectOf()`
384 -
385 -```javascript
386 -React.PropTypes.objectOf(propType)
387 -```
388 -
389 -Validates that a prop is an object with property values of a certain type.
390 -
391 -```javascript
392 -MyComponent.propTypes = {
393 - optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
394 -}
395 -```
396 -
397 -#### `React.PropTypes.shape()`
398 -
399 -```javascript
400 -React.PropTypes.shape(object)
401 -```
402 -
403 -Validates that a prop is an object taking on a particular shape.
404 -
405 -```javascript
406 -MyComponent.propTypes = {
407 - optionalObjectWithShape: React.PropTypes.shape({
408 - color: React.PropTypes.string,
409 - fontSize: React.PropTypes.number
410 - }),
411 -}
412 -```
413 -
414 -#### `React.PropTypes.any`
415 -
416 -```javascript
417 -React.PropTypes.any
418 -```
419 -
420 -Validates that a prop has a value of any data type. Usually followed by `isRequired`.
421 -
422 -```javascript
423 -MyComponent.propTypes = {
424 - requiredAny: React.PropTypes.any.isRequired,
425 -}
426 -```
427 -
428 -### `isRequired`
429 -
430 -```javascript
431 -propType.isRequired
432 -```
433 -
434 -You can chain any of the above validators with `isRequired` to make sure a warning is shown if the prop is not provided.
435 -
436 -```javascript
437 -MyComponent.propTypes = {
438 - requiredFunc: React.PropTypes.func.isRequired,
439 -}
440 -```
441 -
442 -* * *
443 -
444 -### `React.addons`
445 -
446 -```javascript
447 -React.addons
448 -```
449 -
450 -`React.addons` exports a range of add-ons when using [`react-with-addons.js`](/react/docs/addons.html).
docs/docs/typechecking-with-proptypes.md
+5
@@ -2,8 +2,13 @@
2 id: typechecking-with-proptypes
3 title: Typechecking With PropTypes
4 permalink: docs/typechecking-with-proptypes.html
5 +redirect_from:
6 + - "docs/react-api.html#typechecking-with-proptypes"
7 ---
8
9 +> Note:
10 +> `React.PropTypes` is deprecated as of React v15.5. Please use [the `prop-types` library instead](https://github.com/aackerman/PropTypes).
11 +
12 As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
13
14 ```javascript
docs/warnings/dont-call-proptypes.md
+3
@@ -4,6 +4,9 @@ layout: single
4 permalink: warnings/dont-call-proptypes.html
5 ---
6
7 +> Note:
8 +> `React.PropTypes` is deprecated as of React v15.5. Please use [the `prop-types` library instead](https://github.com/aackerman/PropTypes).
9 +
10 In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.
11
12 ### Declaring PropTypes is still fine
packages/react/README.md
-7
@@ -13,11 +13,4 @@ To use React in production mode, set the environment variable `NODE_ENV` to `pro
13
14 ```js
15 var React = require('react');
16 -
17 -// Addons are in separate packages:
18 -var createFragment = require('react-addons-create-fragment');
19 -var immutabilityHelpers = require('react-addons-update');
20 -var CSSTransitionGroup = require('react-addons-css-transition-group');
16 ```
22 -
23 -For a complete list of addons visit the [addons documentation page](https://facebook.github.io/react/docs/addons.html).