JSX & Components
JSX
JSX lets you write HTML-like markup inside JavaScript. Your build tool converts it to normal JavaScript.
const name = "Sara";
const element = <p className="greeting">Hi, {name}! You have {2 + 3} new messages.</p>;JSX rules
| Rule | Example |
|---|---|
Return one parent element (or a fragment <>...</>) | <><h1/><p/></> |
Use className instead of class | <div className="card"> |
Use htmlFor instead of for | <label htmlFor="email"> |
| Close every tag, including empty ones | <img />, <br /> |
| Use camelCase for attributes and events | onClick, tabIndex |
Put JavaScript expressions in { } | {user.name} |
| Inline styles are objects | style={{ color: "red" }} |