Add new docs website (#10896)

Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder).

Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.)

The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory:

* Modified frontmatter author block to always be an array
* Small markdown formatting tweaks
This commit is contained in:
Brian Vaughn
2017-09-28 10:18:04 -07:00
committed by GitHub
parent 6b31453ef6
commit 52b694eaae
177 changed files with 1872 additions and 1972 deletions

View File

@@ -15,7 +15,7 @@ redirect_from:
- "tips/use-react-with-other-libraries.html"
---
[Components](/react/docs/components-and-props.html) let you split the UI into independent, reusable pieces, and think about each piece in isolation. `React.Component` is provided by [`React`](/react/docs/react-api.html).
[Components](/docs/components-and-props.html) let you split the UI into independent, reusable pieces, and think about each piece in isolation. `React.Component` is provided by [`React`](/docs/react-api.html).
## Overview
@@ -31,7 +31,7 @@ class Greeting extends React.Component {
}
```
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.
If you don't use ES6 yet, you may use the [`create-react-class`](/docs/react-api.html#createclass) module instead. Take a look at [Using React without ES6](/docs/react-without-es6.html) to learn more.
### The Component Lifecycle
@@ -93,9 +93,9 @@ The `render()` method is required.
When called, it should examine `this.props` and `this.state` and return one of the following types:
- **React elements.** Typically created via JSX. A element can either be a representation of a native DOM component (`<div />`), or a user-defined composite component (`<MyComponent />`).
- **React elements.** Typically created via JSX. An element can either be a representation of a native DOM component (`<div />`), or a user-defined composite component (`<MyComponent />`).
- **String and numbers.** These are rendered as text nodes in the DOM.
- **Portals**. Created with [`ReactDOM.createPortal`](/react/docs/portals.html).
- **Portals**. Created with [`ReactDOM.createPortal`](/docs/portals.html).
- `null`. Renders nothing.
- **Booleans**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)
@@ -123,7 +123,7 @@ render() {
> Note:
>
> Don't forget to [add keys](https://facebook.github.io/react/docs/lists-and-keys.html#keys) to elements in a fragment to avoid the key warning.
> Don't forget to [add keys](/docs/lists-and-keys.html#keys) to elements in a fragment to avoid the key warning.
* * *
@@ -148,7 +148,7 @@ constructor(props) {
}
```
Beware of this pattern, as state won't be up-to-date with any props update. Instead of syncing props to state, you often want to [lift the state up](/react/docs/lifting-state-up.html).
Beware of this pattern, as state won't be up-to-date with any props update. Instead of syncing props to state, you often want to [lift the state up](/docs/lifting-state-up.html).
If you "fork" props by using them for state, you might also want to implement [`componentWillReceiveProps(nextProps)`](#componentwillreceiveprops) to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone.
@@ -204,7 +204,7 @@ Returning `false` does not prevent child components from re-rendering when *thei
Currently, if `shouldComponentUpdate()` returns `false`, then [`componentWillUpdate()`](#componentwillupdate), [`render()`](#render), and [`componentDidUpdate()`](#componentdidupdate) will not be invoked. Note that in the future React may treat `shouldComponentUpdate()` as a hint rather than a strict directive, and returning `false` may still result in a re-rendering of the component.
If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/react/docs/react-api.html#react.purecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/docs/react-api.html#react.purecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
* * *
@@ -313,7 +313,7 @@ this.setState((prevState) => {
});
```
For more detail, see the [State and Lifecycle guide](/react/docs/state-and-lifecycle.html).
For more detail, see the [State and Lifecycle guide](/docs/state-and-lifecycle.html).
* * *
@@ -367,7 +367,7 @@ If `props.color` is set to null, it will remain null:
### `displayName`
The `displayName` string is used in debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component, see [Wrap the Display Name for Easy Debugging](/react/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) for details.
The `displayName` string is used in debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component, see [Wrap the Display Name for Easy Debugging](/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) for details.
* * *
@@ -375,7 +375,7 @@ The `displayName` string is used in debugging messages. Usually, you don't need
### `props`
`this.props` contains the props that were defined by the caller of this component. See [Components and Props](/react/docs/components-and-props.html) for an introduction to props.
`this.props` contains the props that were defined by the caller of this component. See [Components and Props](/docs/components-and-props.html) for an introduction to props.
In particular, `this.props.children` is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.
@@ -385,6 +385,6 @@ The state contains data specific to this component that may change over time. Th
If you don't use it in `render()`, it shouldn't be in the state. For example, you can put timer IDs directly on the instance.
See [State and Lifecycle](/react/docs/state-and-lifecycle.html) for more information about the state.
See [State and Lifecycle](/docs/state-and-lifecycle.html) for more information about the state.
Never mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.