From 59265d688c1f6d8a9754e155dbeb22142b0f698a Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 26 Sep 2017 22:03:03 +0100 Subject: [PATCH] Update docs for React 16 --- docs/docs/composition-vs-inheritance.md | 8 ++-- docs/docs/lifting-state-up.md | 6 +-- docs/docs/lists-and-keys.md | 2 +- docs/docs/portals.md | 50 ++++++++++++++++++++----- docs/docs/reference-dom-elements.md | 36 ++++++++---------- docs/docs/reference-react-dom-server.md | 16 -------- docs/docs/thinking-in-react.md | 6 +-- 7 files changed, 67 insertions(+), 57 deletions(-) diff --git a/docs/docs/composition-vs-inheritance.md b/docs/docs/composition-vs-inheritance.md index 0ac5cd45b21cc..25d1254e2b0fc 100644 --- a/docs/docs/composition-vs-inheritance.md +++ b/docs/docs/composition-vs-inheritance.md @@ -44,7 +44,7 @@ function WelcomeDialog() { } ``` -[Try it on CodePen.](http://codepen.io/gaearon/pen/ozqNOV?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/ozqNOV?editors=0010) Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output. @@ -77,7 +77,7 @@ function App() { } ``` -[Try it on CodePen.](http://codepen.io/gaearon/pen/gwZOJp?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) React elements like `` and `` are just objects, so you can pass them as props like any other data. @@ -110,7 +110,7 @@ function WelcomeDialog() { } ``` -[Try it on CodePen.](http://codepen.io/gaearon/pen/kkEaOZ?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) Composition works equally well for components defined as classes: @@ -160,7 +160,7 @@ class SignUpDialog extends React.Component { } ``` -[Try it on CodePen.](http://codepen.io/gaearon/pen/gwZbYa?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## So What About Inheritance? diff --git a/docs/docs/lifting-state-up.md b/docs/docs/lifting-state-up.md index 56ab0feb20ec8..78ed696ca902b 100644 --- a/docs/docs/lifting-state-up.md +++ b/docs/docs/lifting-state-up.md @@ -56,7 +56,7 @@ class Calculator extends React.Component { } ``` -[Try it on CodePen.](http://codepen.io/valscion/pen/VpZJRZ?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010) ## Adding a Second Input @@ -110,7 +110,7 @@ class Calculator extends React.Component { } ``` -[Try it on CodePen.](http://codepen.io/valscion/pen/GWKbao?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/jGBryx?editors=0010) We have two inputs now, but when you enter the temperature in one of them, the other doesn't update. This contradicts our requirement: we want to keep them in sync. @@ -296,7 +296,7 @@ class Calculator extends React.Component { } ``` -[Try it on CodePen.](http://codepen.io/valscion/pen/jBNjja?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/WZpxpz?editors=0010) Now, no matter which input you edit, `this.state.temperature` and `this.state.scale` in the `Calculator` get updated. One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it. diff --git a/docs/docs/lists-and-keys.md b/docs/docs/lists-and-keys.md index 9283fbe4ae70d..6f73b03aa2333 100644 --- a/docs/docs/lists-and-keys.md +++ b/docs/docs/lists-and-keys.md @@ -200,7 +200,7 @@ ReactDOM.render( ); ``` -[Try it on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010) +[Try it on CodePen.](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010) A good rule of thumb is that elements inside the `map()` call need keys. diff --git a/docs/docs/portals.md b/docs/docs/portals.md index a59e0422a3cc3..ec164ce2e4a5c 100644 --- a/docs/docs/portals.md +++ b/docs/docs/portals.md @@ -46,7 +46,7 @@ A typical use case for portals is when a parent component has an `overflow: hidd > > It is important to remember, when working with portals, you'll need to make sure to follow the proper accessibility guidelines. -[Try out an example on CodePen.](https://codepen.io/acdlite/pen/JrKgmz) +[Try it on CodePen.](https://codepen.io/gaearon/pen/yzMaBd) ## Portals and event bubbling @@ -63,12 +63,35 @@ This includes event bubbling. An event fired from inside a portal will propagate ``` -A Parent component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node #modal-root. +A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`. -```js +```js{20-23,34-41,45,53-55,62-63,66} +// These two containers are siblings in the DOM const appRoot = document.getElementById('app-root'); const modalRoot = document.getElementById('modal-root'); +class Modal extends React.Component { + constructor(props) { + super(props); + this.el = document.createElement('div'); + } + + componentDidMount() { + modalRoot.appendChild(this.el); + } + + componentWillUnmount() { + modalRoot.removeChild(this.el); + } + + render() { + return ReactDOM.createPortal( + this.props.children, + this.el, + ); + } +} + class Parent extends React.Component { constructor(props) { super(props); @@ -77,8 +100,9 @@ class Parent extends React.Component { } handleClick() { - // This will fire when the button in Child is clicked, updating Parent's state, - // even though Child is not a direct descendant in the DOM. + // This will fire when the button in Child is clicked, + // updating Parent's state, even though button + // is not direct descendant in the DOM. this.setState(prevState => ({ clicks: prevState.clicks + 1 })); @@ -86,10 +110,17 @@ class Parent extends React.Component { render() { return ( -
+

Number of clicks: {this.state.clicks}

-

Open up the browser DevTools to observe that the button is not a child the div with onClick handler.

- {ReactDOM.createPortal(, modalRoot)} +

+ Open up the browser DevTools + to observe that the button + is not a child the div + with onClick handler. +

+ + +
); } @@ -105,10 +136,9 @@ function Child() { ); } - ReactDOM.render(, appRoot); ``` -[Try this example on CodePen](https://codepen.io/gaearon/pen/jGBWpE). +[Try it on CodePen.](https://codepen.io/gaearon/pen/jGBWpE). Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `` component, the parent can capture its events regardless of whether it's implemented using portals. diff --git a/docs/docs/reference-dom-elements.md b/docs/docs/reference-dom-elements.md index 38d2359f6b5de..f3f53814b7c74 100644 --- a/docs/docs/reference-dom-elements.md +++ b/docs/docs/reference-dom-elements.md @@ -98,7 +98,19 @@ The `value` attribute is supported by `` and `