JSX Attributes

HTML attributes work mostly the same in JSX, but with a few important differences because JSX is closer to JavaScript than HTML.

camelCase Naming

Attributes in JSX use camelCase.

• onclick becomes onClick
• tabindex becomes tabIndex

The class Attribute

Because class is a reserved keyword in JavaScript, React uses className instead.

function App() {
  const imageSrc = "https://example.com/logo.png";

  return (
    <div className="container">
      <img src={imageSrc} alt="Company Logo" />
    </div>
  );
}

Notice how we can use curly braces to pass a JavaScript variable directly to the src attribute!