From 9582034df74c7d1fbe9e47d7f922f780088d7489 Mon Sep 17 00:00:00 2001 From: Kevin Lau Date: Fri, 4 Dec 2015 16:51:38 -0800 Subject: [PATCH 1/3] Adding class->className as a JSX gotcha It's mentioned as a note in "JSX in Depth" however I think for clarity and ease of look-up, it would be a good idea to also include it in the JSX Gotchas list? --- docs/ref-06-dom-differences.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/ref-06-dom-differences.md b/docs/ref-06-dom-differences.md index ceeeac9b..016aa772 100644 --- a/docs/ref-06-dom-differences.md +++ b/docs/ref-06-dom-differences.md @@ -10,6 +10,7 @@ React has implemented a browser-independent events and DOM system for performanc * All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. **However**, `data-*` and `aria-*` attributes [conform to the specs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) and should be lower-cased only. * The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. +* Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged as XML attribute names. Instead, JSX (React DOM) components expect DOM property names like `className` and `htmlFor`, respectively. * All event objects conform to the W3C spec, and all events (including submit) bubble correctly per the W3C spec. See [Event System](/react/docs/events.html) for more details. * The `onChange` event behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time. See [Forms](/react/docs/forms.html) for more details. * Form input attributes such as `value` and `checked`, as well as `textarea`. [More here](/react/docs/forms.html). From 187ec5a68b87f344eddd858fb55a83b76ae6bdef Mon Sep 17 00:00:00 2001 From: Kevin Lau Date: Wed, 9 Dec 2015 00:33:25 -0800 Subject: [PATCH 2/3] added nuance about identifiers used in custom elements --- docs/ref-06-dom-differences.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ref-06-dom-differences.md b/docs/ref-06-dom-differences.md index 016aa772..82e051b5 100644 --- a/docs/ref-06-dom-differences.md +++ b/docs/ref-06-dom-differences.md @@ -10,7 +10,7 @@ React has implemented a browser-independent events and DOM system for performanc * All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. **However**, `data-*` and `aria-*` attributes [conform to the specs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) and should be lower-cased only. * The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. -* Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged as XML attribute names. Instead, JSX (React DOM) components expect DOM property names like `className` and `htmlFor`, respectively. +* Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged as XML attribute names. Instead, JSX (React DOM) components expect DOM property names like `className` and `htmlFor`, respectively. However, note that [custom elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) must use `class` and `for` directly. For example: ``. * All event objects conform to the W3C spec, and all events (including submit) bubble correctly per the W3C spec. See [Event System](/react/docs/events.html) for more details. * The `onChange` event behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time. See [Forms](/react/docs/forms.html) for more details. * Form input attributes such as `value` and `checked`, as well as `textarea`. [More here](/react/docs/forms.html). From 31d07afba6dc3da85125f42370629e98656e9674 Mon Sep 17 00:00:00 2001 From: Kevin Lau Date: Fri, 11 Dec 2015 12:05:05 -0800 Subject: [PATCH 3/3] Finalized wording --- docs/ref-06-dom-differences.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ref-06-dom-differences.md b/docs/ref-06-dom-differences.md index 82e051b5..3d510618 100644 --- a/docs/ref-06-dom-differences.md +++ b/docs/ref-06-dom-differences.md @@ -10,7 +10,7 @@ React has implemented a browser-independent events and DOM system for performanc * All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. **However**, `data-*` and `aria-*` attributes [conform to the specs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) and should be lower-cased only. * The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. -* Since JSX is JavaScript, identifiers such as `class` and `for` are discouraged as XML attribute names. Instead, JSX (React DOM) components expect DOM property names like `className` and `htmlFor`, respectively. However, note that [custom elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) must use `class` and `for` directly. For example: ``. +* Since `class` and `for` are reserved words in JavaScript, the JSX elements for built-in [DOM nodes](http://javascript.info/tutorial/dom-nodes) should use the attribute names `className` and `htmlFor` respectively, (eg. `
` ). Custom elements should use `class` and `for` directly (eg. `` ). * All event objects conform to the W3C spec, and all events (including submit) bubble correctly per the W3C spec. See [Event System](/react/docs/events.html) for more details. * The `onChange` event behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time. See [Forms](/react/docs/forms.html) for more details. * Form input attributes such as `value` and `checked`, as well as `textarea`. [More here](/react/docs/forms.html).