JSXでclass名を指定する – 正しい方法と注意点

React（JSX）では、HTMLとほぼ同じ構文でUIを記述できますが、class属性の指定には特別なルールがあります。本ページでは、JSXでのclass名の指定方法と、よくある間違い・注意点をTypeScript（TSX）ベースで解説します。

1. JSXではclassではなくclassNameを使う

JavaScriptの予約語であるclassは、JSXでは使用できません。代わりに、ReactではclassNameを使ってCSSクラスを指定します。

✅ 正しい例

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