JSXはHTMLではない
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 4/42。
JSXはHTMLのように見えますが、JavaScriptの内部に存在するため、頻繁に遭遇することになる小さな違いがいくつか生じます：
1. class の代わりに className を使用します。 class は JavaScript の予約語であるため、JSX では属性名が変更されています:
<p className="warning">Careful!</p>2. すべてのタグを閉じる必要があります。 HTMLでは <br> や <input> の閉じタグを省略できますが、JSXでは許容されません。自己完結型タグ（セルフクロージングタグ）は /> で終わります:
<input id="name" />
<br />3. camelCase 属性。 複数の単語からなる属性は camelCase になります: onclick → onClick、tabindex → tabIndex。イベントを扱うようになると、onClick を頻繁に使用することになります。
チャレンジ
初心者下のパラグラフには、JSX の方法で CSS クラスを追加する必要があります。
- パラグラフに CSS クラス
noticeを指定してください（注意: JSX ではclass属性名は使用しません）。 - その id とテキストは変更しないでください。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。