Scribd
Upload
9 views2 pages

HTML Vs JSX CheatSheet

The document outlines key differences between HTML and JSX, highlighting specific syntax changes such as using 'className' instead of 'class' and 'htmlFor' instead of 'for'. It emphasizes the need for self-closing tags in JSX, the use of camelCase for attributes, and the requirement for a single root element. Additionally, it provides a summary table comparing various concepts in HTML and JSX.

Uploaded by

Lavansh Gupta
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views2 pages

HTML Vs JSX CheatSheet

The document outlines key differences between HTML and JSX, highlighting specific syntax changes such as using 'className' instead of 'class' and 'htmlFor' instead of 'for'. It emphasizes the need for self-closing tags in JSX, the use of camelCase for attributes, and the requirement for a single root element. Additionally, it provides a summary table comparing various concepts in HTML and JSX.

Uploaded by

Lavansh Gupta
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML vs JSX: Key Differences

1. class -> className

HTML: <div class="container"></div>

JSX: <div className="container"></div>

Reason: 'class' is reserved in JavaScript.

2. for -> htmlFor

HTML: <label for="email">Email</label>

JSX: <label htmlFor="email">Email</label>

Reason: 'for' is reserved in JavaScript.

3. Self-closing tags must be closed

HTML: <img src="[Link]">

JSX: <img src="[Link]" />

Reason: JSX is strict like XML.

4. JavaScript inside {} braces

JSX: <h1>{userName}</h1>

JSX: <p>{count > 0 ? "Items" : "Empty"}</p>

5. Attributes are camelCase

HTML: <input tabindex="0" />

JSX: <input tabIndex="0" />

Other examples: onClick, readOnly, maxLength

6. Must have a single root element

Invalid:

<h1>Hello</h1>

<p>World</p>

Valid:
HTML vs JSX: Key Differences

<>

<h1>Hello</h1>

<p>World</p>

</>

7. Style uses an object

HTML: <div style="color: red;"></div>

JSX: <div style={{ color: "red" }}></div>

8. Summary Table

Concept HTML JSX

Class class className

Label for for htmlFor

Event handler onclick onClick

Inline styles String JS object

Self-closing Optional / Required /

JS in markup Not possible {}

Multiple tags Allowed freely Wrap in root

You might also like