React JSX Attributes

JSX Attributes

In JSX, you can assign attributes to HTML elements exactly like you would in standard HTML. However, since JSX is fundamentally JavaScript, it uses camelCase naming conventions for attributes.

Specifying Attributes

You can use quotes to specify string literals as attributes, or curly braces to embed JavaScript expressions.

// String literal
const element = <div tabIndex="0"></div>;

// JavaScript expression
const avatarUrl = "https://example.com/avatar.png";
const avatar = <img src={avatarUrl} alt="User Avatar" />;

Important: Because class is a reserved keyword in JavaScript, JSX uses className instead to assign standard CSS classes to elements.