@samitouri / QOS-React / commits / 138634f7da

Update docs for React 16 (#10846)

Dan Abramov committed Sep 26, 2017 at 22:12 UTC 138634f7dac5e6fc409b889f827204061f3caaf8

7 files changed +67 -57

docs/docs/composition-vs-inheritance.md

+4 -4

@@ -44,7 +44,7 @@ function WelcomeDialog() {

44 }

45 ```

47 -[Try it on CodePen.](http://codepen.io/gaearon/pen/ozqNOV?editors=0010)

47 +[Try it on CodePen.](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)

49 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() {

77 }

78 ```

80 -[Try it on CodePen.](http://codepen.io/gaearon/pen/gwZOJp?editors=0010)

80 +[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)

82 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() {

110 }

111 ```

112

113 -[Try it on CodePen.](http://codepen.io/gaearon/pen/kkEaOZ?editors=0010)

113 +[Try it on CodePen.](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)

114

115 Composition works equally well for components defined as classes:

116

@@ -160,7 +160,7 @@ class SignUpDialog extends React.Component {

160 }

161 ```

162

163 -[Try it on CodePen.](http://codepen.io/gaearon/pen/gwZbYa?editors=0010)

163 +[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)

164

165 ## So What About Inheritance?

166

docs/docs/lifting-state-up.md

+3 -3

@@ -56,7 +56,7 @@ class Calculator extends React.Component {

56 }

57 ```

59 -[Try it on CodePen.](http://codepen.io/valscion/pen/VpZJRZ?editors=0010)

59 +[Try it on CodePen.](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010)

61 ## Adding a Second Input

@@ -110,7 +110,7 @@ class Calculator extends React.Component {

110 }

111 ```

112

113 -[Try it on CodePen.](http://codepen.io/valscion/pen/GWKbao?editors=0010)

113 +[Try it on CodePen.](https://codepen.io/gaearon/pen/jGBryx?editors=0010)

114

115 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.

116

@@ -296,7 +296,7 @@ class Calculator extends React.Component {

296 }

297 ```

298

299 -[Try it on CodePen.](http://codepen.io/valscion/pen/jBNjja?editors=0010)

299 +[Try it on CodePen.](https://codepen.io/gaearon/pen/WZpxpz?editors=0010)

300

301 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.

302

docs/docs/lists-and-keys.md

+1 -1

@@ -200,7 +200,7 @@ ReactDOM.render(

200 );

201 ```

202

203 -[Try it on CodePen.](https://codepen.io/rthor/pen/QKzJKG?editors=0010)

203 +[Try it on CodePen.](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)

204

205 A good rule of thumb is that elements inside the `map()` call need keys.

206

docs/docs/portals.md

+40 -10

@@ -46,7 +46,7 @@ A typical use case for portals is when a parent component has an `overflow: hidd

46 >

47 > It is important to remember, when working with portals, you'll need to make sure to follow the proper accessibility guidelines.

49 -[Try out an example on CodePen.](https://codepen.io/acdlite/pen/JrKgmz)

49 +[Try it on CodePen.](https://codepen.io/gaearon/pen/yzMaBd)

51 ## Portals and event bubbling

@@ -63,12 +63,35 @@ This includes event bubbling. An event fired from inside a portal will propagate

63 </html>

64 ```

66 -A Parent component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node #modal-root.

66 +A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.

68 -```js

68 +```js{20-23,34-41,45,53-55,62-63,66}

69 +// These two containers are siblings in the DOM

70 const appRoot = document.getElementById('app-root');

71 const modalRoot = document.getElementById('modal-root');

73 +class Modal extends React.Component {

74 + constructor(props) {

75 + super(props);

76 + this.el = document.createElement('div');

77 + }

78 +

79 + componentDidMount() {

80 + modalRoot.appendChild(this.el);

81 + }

82 +

83 + componentWillUnmount() {

84 + modalRoot.removeChild(this.el);

85 + }

86 +

87 + render() {

88 + return ReactDOM.createPortal(

89 + this.props.children,

90 + this.el,

91 + );

92 + }

93 +}

94 +

95 class Parent extends React.Component {

96 constructor(props) {

97 super(props);

@@ -77,8 +100,9 @@ class Parent extends React.Component {

100 }

101

102 handleClick() {

80 - // This will fire when the button in Child is clicked, updating Parent's state,

81 - // even though Child is not a direct descendant in the DOM.

103 + // This will fire when the button in Child is clicked,

104 + // updating Parent's state, even though button

105 + // is not direct descendant in the DOM.

106 this.setState(prevState => ({

107 clicks: prevState.clicks + 1

108 }));

@@ -86,10 +110,17 @@ class Parent extends React.Component {

110

111 render() {

112 return (

89 - <div onClick={this.onClick}>

113 + <div onClick={this.handleClick}>

114 <p>Number of clicks: {this.state.clicks}</p>

91 - <p>Open up the browser DevTools to observe that the button is not a child the div with onClick handler.</p>

92 - {ReactDOM.createPortal(<Child />, modalRoot)}

115 + <p>

116 + Open up the browser DevTools

117 + to observe that the button

118 + is not a child the div

119 + with onClick handler.

120 + </p>

121 + <Modal>

122 + <Child />

123 + </Modal>

124 </div>

125 );

126 }

@@ -105,10 +136,9 @@ function Child() {

136 );

137 }

138

108 -

139 ReactDOM.render(<Parent />, appRoot);

140 ```

141

112 -[Try this example on CodePen](https://codepen.io/gaearon/pen/jGBWpE).

142 +[Try it on CodePen.](https://codepen.io/gaearon/pen/jGBWpE).

143

144 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/docs/reference-dom-elements.md

+16 -20

@@ -98,7 +98,19 @@ The `value` attribute is supported by `<input>` and `<textarea>` components. You

99 ## All Supported HTML Attributes

100

101 -React supports all `data-*` and `aria-*` attributes as well as these attributes:

101 +As of React 16, any standard [or custom](/react/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.

102 +

103 +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:

104 +

105 +```js

106 +<div tabIndex="-1" /> // Just like node.tabIndex DOM API

107 +<div className="Button" /> // Just like node.className DOM API

108 +<input readOnly={true} /> // Just like node.readOnly DOM API

109 +```

110 +

111 +These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.

112 +

113 +Some of the DOM attributes supported by React include:

114

115 ```

116 accept acceptCharset accessKey action allowFullScreen allowTransparency alt

@@ -116,24 +128,7 @@ selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step

128 style summary tabIndex target title type useMap value width wmode wrap

129 ```

130

119 -These RDFa attributes are supported (several RDFa attributes overlap with standard HTML attributes and thus are excluded from this list):

120 -

121 -```

122 -about datatype inlist prefix property resource typeof vocab

123 -```

124 -

125 -In addition, the following non-standard attributes are supported:

126 -

127 -- `autoCapitalize autoCorrect` for Mobile Safari.

128 -- `color` for `<link rel="mask-icon" />` in Safari.

129 -- `itemProp itemScope itemType itemRef itemID` for [HTML5 microdata](http://schema.org/docs/gs.html).

130 -- `security` for older versions of Internet Explorer.

131 -- `unselectable` for Internet Explorer.

132 -- `results autoSave` for WebKit/Blink input fields of type `search`.

133 -

134 -## All Supported SVG Attributes

135 -

136 -React supports these SVG attributes:

131 +Similarly, all SVG attributes are fully supported:

132

133 ```

134 accentHeight accumulate additive alignmentBaseline allowReorder alphabetic

@@ -170,5 +165,6 @@ vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing

165 writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole

166 xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase

167 xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

173 -

168 ```

169 +

170 +You may also use custom attributes as long as they're fully lowercase.

docs/docs/reference-react-dom-server.md

-16

@@ -15,22 +15,6 @@ import ReactDOMServer from 'react-dom/server';

15 var ReactDOMServer = require('react-dom/server');

16 ```

18 -We also provide a separate entry-point for use in the browser:

19 -

20 -```js

21 -// ES modules

22 -import ReactDOMServer from 'react-dom/server.browser';

23 -// CommonJS

24 -var ReactDOMServer = require('react-dom/server.browser');

25 -```

26 -

27 -Or, using UMD:

28 -

29 -```html

30 -<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom-server.browser.production.min.js" />

31 -

32 -```

33 -

18 ## Overview

20 The following methods can be used in both the server and browser environments:

docs/docs/thinking-in-react.md

+3 -3

@@ -61,7 +61,7 @@ Now that we've identified the components in our mock, let's arrange them into a

62 ## Step 2: Build A Static Version in React

64 -<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>

64 +<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>

65 <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

67 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:

106

107 ## Step 4: Identify Where Your State Should Live

108

109 -<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>

109 +<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>

110 <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

111

112 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

132

133 ## Step 5: Add Inverse Data Flow

134

135 -<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>

135 +<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>

136 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

137

138 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`.