Tweaks to "Introducing JSX" (#10944)
* Tweaks to "Introducing JSX" * Update introducing-jsx.md * Update introducing-jsx.md * Update introducing-jsx.md
Dan Abramov committed
Sep 29, 2017 at 00:32 UTC
d87804abc271d6fd35b7400d788928d1abcbb8ac
1 file changed
+8
-8
docs/docs/introducing-jsx.md
+8
-8
@@ -79,7 +79,13 @@ You may also use curly braces to embed a JavaScript expression in an attribute:
79
const element = <img src={user.avatarUrl}></img>;
80
```
81
82
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. Otherwise JSX will treat the attribute as a string literal rather than an expression. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
82
+Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
83
+
84
+>**Caveat:**
85
+>
86
+>Since JSX is closer to JavaScript than HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
87
+>
88
+>For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
89
90
### Specifying Children with JSX
91
@@ -100,12 +106,6 @@ const element = (
106
);
107
```
108
103
->**Caveat:**
104
->
105
->Since JSX is closer to JavaScript than HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
106
->
107
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
108
-
109
### JSX Prevents Injection Attacks
110
111
It is safe to embed user input in JSX:
@@ -159,4 +159,4 @@ We will explore rendering React elements to the DOM in the next section.
159
160
>**Tip:**
161
>
162
->We recommend searching for a "Babel" syntax scheme for your editor of choice so that both ES6 and JSX code is properly highlighted.
162
+>We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.