@ -29,7 +29,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
```js
```js
<divtabIndex="-1"/>
<divtabIndex={-1}/>
```
```
This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
```js
```js
// Yes, please
// Yes, please
<divtabIndex="-1"/>
<divtabIndex={-1}/>
// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
<divtabindex="-1"/>
<divtabindex={-1}/>
```
```
In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
@ -120,7 +120,7 @@ Below is a detailed list of them.
* **Known attributes with a different canonical React name:**
* **Known attributes with a different canonical React name:**
@ -130,7 +130,7 @@ As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-reac
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:
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
```js
<divtabIndex="-1"/> // Just like node.tabIndex DOM API
<divtabIndex={-1}/> // Just like node.tabIndex DOM API
<divclassName="Button"/> // Just like node.className DOM API
<divclassName="Button"/> // Just like node.className DOM API
<inputreadOnly={true}/> // Just like node.readOnly DOM API
<inputreadOnly={true}/> // Just like node.readOnly DOM API