JSX

定義

JSX（JavaScript XML）は、JavaScript の構文拡張で、.jsx や .tsx ファイルの中に HTML に似たマークアップを直接書けるようにする記法です。
React のコンポーネントは多くがこの JSX で UI を表現します。

詳細

JSX はブラウザがそのまま実行できる構文ではありません。
Babel や TypeScript などのコンパイラが、<div> のようなタグを React.createElement('div', …)（React 17 以降は自動 JSX ランタイムの関数）へ変換します。
属性は class ではなく className を使い、{} で JavaScript の式を埋め込めるのが HTML との主な違いです。

よくある誤解

JSX は HTML ではありません。
タグは必ず閉じる必要があり、複数要素を返すときは 1 つの親要素か Fragment で包みます。
また JSX 単体では型は付かず、TypeScript で使う場合は tsconfig の jsx 設定と型定義がそろって初めて型チェックが効きます。

関連

型情報が足りないと JSX 要素が暗黙の any になる 警告や、オブジェクトをそのまま描画して Objects are not valid as a React child になる問題が起きます。