Update docs for React 16 (#10846)

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 `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, 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 `<Contacts />` and `<Chat />` 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?
 

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.
 

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.
 

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
 </html>
 ```
 
-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,
+    // This will fire when the button in Child is clicked,
-    // even though Child is not a direct descendant in the DOM. 
+    // 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 (
-      <div onClick={this.onClick}>
+      <div onClick={this.handleClick}>
         <p>Number of clicks: {this.state.clicks}</p>
-        <p>Open up the browser DevTools to observe that the button is not a child the div with onClick handler.</p>
+        <p>
-        {ReactDOM.createPortal(<Child />, modalRoot)}
+          Open up the browser DevTools
+          to observe that the button
+          is not a child the div
+          with onClick handler.
+        </p>
+        <Modal>
+          <Child />
+        </Modal>
       </div>
     );
   }
@@ -105,10 +136,9 @@ function Child() {
   );
 }
 
-
 ReactDOM.render(<Parent />, 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 `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.

docs/reference-dom-elements.md

@@ -98,7 +98,19 @@ The `value` attribute is supported by `<input>` and `<textarea>` components. You
 
 ## All Supported HTML Attributes
 
-React supports all `data-*` and `aria-*` attributes as well as these attributes:
+As of React 16, any standard [or custom](/react/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.
+
+React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs:
+
+```js
+<div tabIndex="-1" />      // Just like node.tabIndex DOM API
+<div className="Button" /> // Just like node.className DOM API
+<input readOnly={true} />  // Just like node.readOnly DOM API
+```
+
+These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
+
+Some of the DOM attributes supported by React include:
 
 ```
 accept acceptCharset accessKey action allowFullScreen allowTransparency alt
@@ -116,24 +128,7 @@ selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step
 style summary tabIndex target title type useMap value width wmode wrap
 ```
 
-These RDFa attributes are supported (several RDFa attributes overlap with standard HTML attributes and thus are excluded from this list):
+Similarly, all SVG attributes are fully supported:
-
-```
-about datatype inlist prefix property resource typeof vocab
-```
-
-In addition, the following non-standard attributes are supported:
-
-- `autoCapitalize autoCorrect` for Mobile Safari.
-- `color` for `<link rel="mask-icon" />` in Safari.
-- `itemProp itemScope itemType itemRef itemID` for [HTML5 microdata](http://schema.org/docs/gs.html).
-- `security` for older versions of Internet Explorer.
-- `unselectable` for Internet Explorer.
-- `results autoSave` for WebKit/Blink input fields of type `search`.
-
-## All Supported SVG Attributes
-
-React supports these SVG attributes:
 
 ```
 accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
@@ -170,5 +165,6 @@ vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
 writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
 xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
 xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan
-
 ```
+
+You may also use custom attributes as long as they're fully lowercase.

docs/reference-react-dom-server.md

@@ -15,22 +15,6 @@ import ReactDOMServer from 'react-dom/server';
 var ReactDOMServer = require('react-dom/server');
 ```
 
-We also provide a separate entry-point for use in the browser:
-
-```js
-// ES modules
-import ReactDOMServer from 'react-dom/server.browser';
-// CommonJS
-var ReactDOMServer = require('react-dom/server.browser');
-```
-
-Or, using UMD:
-
-```html
-<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom-server.browser.production.min.js" />
-<!-- Accessible as window.ReactDOMServer -->
-```
-
 ## Overview
 
 The following methods can be used in both the server and browser environments:

docs/thinking-in-react.md

@@ -61,7 +61,7 @@ Now that we've identified the components in our mock, let's arrange them into a
 
 ## Step 2: Build A Static Version in React
 
-<p data-height="600" data-theme-id="0" data-slug-hash="vXpAgj" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/lacker/pen/vXpAgj/">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
 <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
 
 Now that you have your component hierarchy, it's time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
@@ -106,7 +106,7 @@ So finally, our state is:
 
 ## Step 4: Identify Where Your State Should Live
 
-<p data-height="600" data-theme-id="0" data-slug-hash="ORzEkG" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/lacker/pen/ORzEkG/">Thinking In React: Step 4</a> by Kevin Lacker (<a href="http://codepen.io/lacker">@lacker</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
 <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
 
 OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state.
@@ -132,7 +132,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
 
 ## Step 5: Add Inverse Data Flow
 
-<p data-height="600" data-theme-id="0" data-slug-hash="qRqmjd" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="http://codepen.io/rohan10/pen/qRqmjd">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
 
 So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.