mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 20:53:08 +00:00
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!
This commit is contained in:
Flarnie Marchan
committed by
Andrew Clark
Andrew Clark
parent
be106d07f5
commit
803e5da950
@@ -25,9 +25,7 @@ React components let you split the UI into independent, reusable pieces, and thi
|
||||
- [`React.Component`](#react.component)
|
||||
- [`React.PureComponent`](#react.purecomponent)
|
||||
|
||||
If you don't use ES6 classes, you may use this helper instead.
|
||||
|
||||
- [`createClass()`](#createclass)
|
||||
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.
|
||||
|
||||
### Creating React Elements
|
||||
|
||||
@@ -46,38 +44,6 @@ See [Using React without JSX](/react/docs/react-without-jsx.html) for more infor
|
||||
- [`isValidElement()`](#isvalidelement)
|
||||
- [`React.Children`](#react.children)
|
||||
|
||||
### Typechecking with PropTypes
|
||||
|
||||
You can use `React.PropTypes` to run typechecking on the props for a component.
|
||||
|
||||
- [`React.PropTypes`](#react.proptypes)
|
||||
- [`React.PropTypes.array`](#react.proptypes.array)
|
||||
- [`React.PropTypes.bool`](#react.proptypes.bool)
|
||||
- [`React.PropTypes.func`](#react.proptypes.func)
|
||||
- [`React.PropTypes.number`](#react.proptypes.number)
|
||||
- [`React.PropTypes.object`](#react.proptypes.object)
|
||||
- [`React.PropTypes.string`](#react.proptypes.string)
|
||||
- [`React.PropTypes.symbol`](#react.proptypes.symbol)
|
||||
- [`React.PropTypes.node`](#react.proptypes.node)
|
||||
- [`React.PropTypes.element`](#react.proptypes.element)
|
||||
- [`React.PropTypes.instanceOf()`](#react.proptypes.instanceof)
|
||||
- [`React.PropTypes.oneOf()`](#react.proptypes.oneof)
|
||||
- [`React.PropTypes.oneOfType()`](#react.proptypes.oneoftype)
|
||||
- [`React.PropTypes.arrayOf()`](#react.proptypes.arrayof)
|
||||
- [`React.PropTypes.objectOf()`](#react.proptypes.objectof)
|
||||
- [`React.PropTypes.shape()`](#react.proptypes.shape)
|
||||
- [`React.PropTypes.any`](#react.proptypes.any)
|
||||
|
||||
Validators treat props as optional by default. You can use `isRequired` to make sure a warning is shown if the prop is not provided.
|
||||
|
||||
- [`isRequired`](#isrequired)
|
||||
|
||||
### Add-Ons
|
||||
|
||||
If you're using [`react-with-addons.js`](/react/docs/addons.html), the React Add-Ons will be available via `React.addons`.
|
||||
|
||||
- [`React.addons`](#react.addons)
|
||||
|
||||
* * *
|
||||
|
||||
## Reference
|
||||
@@ -112,26 +78,6 @@ If your React component's `render()` function renders the same result given the
|
||||
|
||||
* * *
|
||||
|
||||
### `createClass()`
|
||||
|
||||
```javascript
|
||||
React.createClass(specification)
|
||||
```
|
||||
|
||||
If you don't use ES6 yet, you may use the `React.createClass()` helper instead to create a component class.
|
||||
|
||||
```javascript
|
||||
var Greeting = React.createClass({
|
||||
render: function() {
|
||||
return <h1>Hello, {this.props.name}</h1>;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
See [Using React without ES6](/react/docs/react-without-es6.html) for more information.
|
||||
|
||||
* * *
|
||||
|
||||
### `createElement()`
|
||||
|
||||
```javascript
|
||||
@@ -245,206 +191,3 @@ Returns the `children` opaque data structure as a flat array with keys assigned
|
||||
> Note:
|
||||
>
|
||||
> `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.
|
||||
|
||||
* * *
|
||||
|
||||
### `React.PropTypes`
|
||||
|
||||
`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.
|
||||
|
||||
For more information about `PropTypes`, see [Typechecking with PropTypes](/react/docs/typechecking-with-proptypes.html).
|
||||
|
||||
#### `React.PropTypes.array`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.array
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript array primitive.
|
||||
|
||||
#### `React.PropTypes.bool`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.bool
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript bool primitive.
|
||||
|
||||
#### `React.PropTypes.func`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.func
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript function.
|
||||
|
||||
#### `React.PropTypes.number`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.number
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript number primitive.
|
||||
|
||||
#### `React.PropTypes.object`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.object
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript object.
|
||||
|
||||
#### `React.PropTypes.string`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.string
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript string primitive.
|
||||
|
||||
#### `React.PropTypes.symbol`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.symbol
|
||||
```
|
||||
|
||||
Validates that a prop is a JavaScript symbol.
|
||||
|
||||
#### `React.PropTypes.node`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.node
|
||||
```
|
||||
|
||||
Validates that a prop is anything that can be rendered: numbers, strings, elements or an array (or fragment) containing these types.
|
||||
|
||||
#### `React.PropTypes.element`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.element
|
||||
```
|
||||
|
||||
Validates that a prop is a React element.
|
||||
|
||||
#### `React.PropTypes.instanceOf()`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.instanceOf(class)
|
||||
```
|
||||
|
||||
Validates that a prop is an instance of a class. This uses JavaScript's `instanceof` operator.
|
||||
|
||||
#### `React.PropTypes.oneOf()`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.oneOf(arrayOfValues)
|
||||
```
|
||||
|
||||
Validates that a prop is limited to specific values by treating it as an enum.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
|
||||
}
|
||||
```
|
||||
|
||||
#### `React.PropTypes.oneOfType()`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.oneOfType(arrayOfPropTypes)
|
||||
```
|
||||
|
||||
Validates that a prop is an object that could be one of many types.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
optionalUnion: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.instanceOf(Message)
|
||||
]),
|
||||
}
|
||||
```
|
||||
|
||||
#### `React.PropTypes.arrayOf()`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.arrayOf(propType)
|
||||
```
|
||||
|
||||
Validates that a prop is an array of a certain type.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
}
|
||||
```
|
||||
|
||||
#### `React.PropTypes.objectOf()`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.objectOf(propType)
|
||||
```
|
||||
|
||||
Validates that a prop is an object with property values of a certain type.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
||||
}
|
||||
```
|
||||
|
||||
#### `React.PropTypes.shape()`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.shape(object)
|
||||
```
|
||||
|
||||
Validates that a prop is an object taking on a particular shape.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
optionalObjectWithShape: React.PropTypes.shape({
|
||||
color: React.PropTypes.string,
|
||||
fontSize: React.PropTypes.number
|
||||
}),
|
||||
}
|
||||
```
|
||||
|
||||
#### `React.PropTypes.any`
|
||||
|
||||
```javascript
|
||||
React.PropTypes.any
|
||||
```
|
||||
|
||||
Validates that a prop has a value of any data type. Usually followed by `isRequired`.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
requiredAny: React.PropTypes.any.isRequired,
|
||||
}
|
||||
```
|
||||
|
||||
### `isRequired`
|
||||
|
||||
```javascript
|
||||
propType.isRequired
|
||||
```
|
||||
|
||||
You can chain any of the above validators with `isRequired` to make sure a warning is shown if the prop is not provided.
|
||||
|
||||
```javascript
|
||||
MyComponent.propTypes = {
|
||||
requiredFunc: React.PropTypes.func.isRequired,
|
||||
}
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
### `React.addons`
|
||||
|
||||
```javascript
|
||||
React.addons
|
||||
```
|
||||
|
||||
`React.addons` exports a range of add-ons when using [`react-with-addons.js`](/react/docs/addons.html).
|
||||
|
||||
Reference in New Issue
Block a user