From 1459bf4e118c161bed9f9df81731924c5722fdcd Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 29 Sep 2017 00:32:25 +0100 Subject: [PATCH] Tweaks to "Introducing JSX" (#10944) * Tweaks to "Introducing JSX" * Update introducing-jsx.md * Update introducing-jsx.md * Update introducing-jsx.md --- docs/introducing-jsx.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/introducing-jsx.md b/docs/introducing-jsx.md index 6393c06a..9830ddc9 100644 --- a/docs/introducing-jsx.md +++ b/docs/introducing-jsx.md @@ -79,7 +79,13 @@ You may also use curly braces to embed a JavaScript expression in an attribute: const element = ; ``` -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. +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. + +>**Caveat:** +> +>Since JSX is closer to JavaScript than HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names. +> +>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). ### Specifying Children with JSX @@ -100,12 +106,6 @@ const element = ( ); ``` ->**Caveat:** -> ->Since JSX is closer to JavaScript than HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names. -> ->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). - ### JSX Prevents Injection Attacks 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. >**Tip:** > ->We recommend searching for a "Babel" syntax scheme for your editor of choice so that both ES6 and JSX code is properly highlighted. +>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.