From 7dfd69bf528cd35585afe338ecf7981d0ba8d1b6 Mon Sep 17 00:00:00 2001 From: Shruti Singh Date: Sat, 15 Nov 2025 00:51:28 +0530 Subject: [PATCH 1/5] Expand JSX HTML attributes section with examples Added detailed explanations of how JSX handles HTML attributes, including differences in attribute names, boolean attributes, inline styles, data and ARIA attributes, and tips for converting HTML to JSX. --- src/content/learn/writing-markup-with-jsx.md | 99 ++++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 62670150aca..bbf30a821c5 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -222,6 +222,102 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access + + +### How React Handles HTML Attributes {/*how-react-handles-html-attributes*/} + +JSX looks a lot like HTML, but a few attributes work slightly differently because JSX maps to JavaScript and DOM properties. This short reference explains the common differences and shows examples you can copy. + +### Attribute name differences + +Some HTML attribute names are either reserved words in JavaScript or differ from the DOM property names. Use the React/JSX name when writing JSX: + +```jsx +{/* use `className` instead of `class` */} +
+ +{/* use `htmlFor` instead of `for` */} + +``` + +### Boolean attributes + +In HTML, boolean attributes are represented by their presence. In JSX, you pass explicit boolean values—but JSX also supports the shorthand form (which means `true`): + +```html + + +``` +```jsx +// JSX (explicit boolean) + + +// JSX (shorthand, equivalent to true) + +``` + +### Inline styles + +HTML uses a CSS string. JSX uses a JavaScript object with camelCased property names: +```html + +
+``` +```jsx +// JSX +
+``` +Numeric values (like lineHeight, zIndex) can be written as numbers +```jsx +
+``` + +### Data and ARIA attributes + +React preserves data-* and aria-* attributes exactly as they appear in HTML. These must remain dash-cased: +```jsx +
+``` +These attributes are ideal for accessibility and for storing custom data. + +### Unknown or invalid attributes + +React will not add invalid or unknown attributes to the DOM: +```jsx +// Ignored: not a valid DOM attribute +
+ +// ✔ Correct: custom data attribute +
+``` +If you intentionally want to pass unknown props (for example, in wrapper components), use the spread operator: + +```jsx +function Button({ children, ...rest }) { + return ; +} + +// usage + +``` + +### Tips & common gotchas + +- Use DOM property names (`className`, `htmlFor`, `defaultValue`) in JSX. +- Boolean attributes should use `true` or `false`, not strings. +- `data-*` and `aria-*` attributes stay the same in JSX. +- Invalid attributes are removed from the DOM—use `data-*` for custom values. +- Always double-check `class` → `className`, `for` → `htmlFor`, and convert `style` to an object when moving HTML to JSX. + + + + + + ### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/} Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own. @@ -351,3 +447,6 @@ export default function Bio() { + + + From e5b0851ec06c3f2d55f9bae0ff02027643286185 Mon Sep 17 00:00:00 2001 From: Shruti Singh Date: Sat, 15 Nov 2025 01:06:29 +0530 Subject: [PATCH 2/5] Change heading from H3 to H2 in JSX markdown --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index bbf30a821c5..554f452c850 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -224,7 +224,7 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access -### How React Handles HTML Attributes {/*how-react-handles-html-attributes*/} +## How React Handles HTML Attributes {/*how-react-handles-html-attributes*/} JSX looks a lot like HTML, but a few attributes work slightly differently because JSX maps to JavaScript and DOM properties. This short reference explains the common differences and shows examples you can copy. From 6bdc991206837384c2733a5d7e64793657a85405 Mon Sep 17 00:00:00 2001 From: Shruti Singh Date: Sat, 15 Nov 2025 01:17:43 +0530 Subject: [PATCH 3/5] Fix JSX markdown syntax for HTML attributes section --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 554f452c850..01b5b6fbf2b 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -224,7 +224,7 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access -## How React Handles HTML Attributes {/*how-react-handles-html-attributes*/} +## How React Handles HTML Attributes {/how-react-handles-html-attributes/} JSX looks a lot like HTML, but a few attributes work slightly differently because JSX maps to JavaScript and DOM properties. This short reference explains the common differences and shows examples you can copy. From f39d383e0a2c8aacc74f6f0c26c304cbdc93c20c Mon Sep 17 00:00:00 2001 From: Shruti Singh Date: Sat, 15 Nov 2025 01:38:04 +0530 Subject: [PATCH 4/5] Fix comment syntax for HTML attributes section Updated the comment syntax for the section header in the JSX markdown file. --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 01b5b6fbf2b..554f452c850 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -224,7 +224,7 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access -## How React Handles HTML Attributes {/how-react-handles-html-attributes/} +## How React Handles HTML Attributes {/*how-react-handles-html-attributes*/} JSX looks a lot like HTML, but a few attributes work slightly differently because JSX maps to JavaScript and DOM properties. This short reference explains the common differences and shows examples you can copy. From b1d85b73477b65e544dfa9d40b4328bb56d276f0 Mon Sep 17 00:00:00 2001 From: suii2210 Date: Sat, 15 Nov 2025 02:11:06 +0530 Subject: [PATCH 5/5] chore(docs): regenerate heading ids for JSX attributes section --- src/content/learn/writing-markup-with-jsx.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 554f452c850..8512f0b677f 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -228,7 +228,7 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access JSX looks a lot like HTML, but a few attributes work slightly differently because JSX maps to JavaScript and DOM properties. This short reference explains the common differences and shows examples you can copy. -### Attribute name differences +### Attribute name differences {/*attribute-name-differences*/} Some HTML attribute names are either reserved words in JavaScript or differ from the DOM property names. Use the React/JSX name when writing JSX: @@ -240,7 +240,7 @@ Some HTML attribute names are either reserved words in JavaScript or differ from ``` -### Boolean attributes +### Boolean attributes {/*boolean-attributes*/} In HTML, boolean attributes are represented by their presence. In JSX, you pass explicit boolean values—but JSX also supports the shorthand form (which means `true`): @@ -256,7 +256,7 @@ In HTML, boolean attributes are represented by their presence. In JSX, you pass ``` -### Inline styles +### Inline styles {/*inline-styles*/} HTML uses a CSS string. JSX uses a JavaScript object with camelCased property names: ```html @@ -272,7 +272,7 @@ Numeric values (like lineHeight, zIndex) can be written as numbers
``` -### Data and ARIA attributes +### Data and ARIA attributes {/*data-and-aria-attributes*/} React preserves data-* and aria-* attributes exactly as they appear in HTML. These must remain dash-cased: ```jsx @@ -284,7 +284,7 @@ React preserves data-* and aria-* attributes exactly as they appear in HTML. The ``` These attributes are ideal for accessibility and for storing custom data. -### Unknown or invalid attributes +### Unknown or invalid attributes {/*unknown-or-invalid-attributes*/} React will not add invalid or unknown attributes to the DOM: ```jsx @@ -305,7 +305,7 @@ function Button({ children, ...rest }) { ``` -### Tips & common gotchas +### Tips & common gotchas {/*tips--common-gotchas*/} - Use DOM property names (`className`, `htmlFor`, `defaultValue`) in JSX. - Boolean attributes should use `true` or `false`, not strings.