How do you add a CSS class to an element in JSX, and why is the attribute name different from regular HTML?

In JSX you use className instead of class, because class is already a reserved word in JavaScript used for defining classes. Everything else about applying a CSS class works exactly the same as in regular HTML.

function Button() {
  return <button className="primary-button">Click Me</button>;
}

/* In your CSS file */
.primary-button {
  background-color: blue;
  color: white;
}