JSXのルール

前の章で、関数の中にHTMLのようなタグを書きました。「のような」と言い続けているのには理由があります。JSXはHTMLにそっくりですが、少しだけルールが違います。この章で、その違いを一気に片付けます。数は3つだけ。しかもHTML/CSS教材で学んだ知識は、ほぼそのまま使えます。

ルール①　classは className と書く

HTML/CSS教材のチャプター10以来、ずっと使ってきたclass属性。JSXではこう書きます。

const Card = () => {
  return <div className="card">中身</div>;
};

class ではなく className。理由は、JSXがJavaScriptの中で書かれるものだからです——JavaScriptには class という予約語(文法用の単語)が既にあり、衝突を避けるために別名になっています。CSSファイル側は今まで通り .card { ... } で届きます。変わるのはJSX側の属性名だけです。

間違えて class と書いても実は動いてしまうのですが、警告が出ます。「JSXでは className」と指に覚えさせてください。ここは本当に、全員が一度は書き間違える場所です。