React がマークアップとレンダリングロジックを混在する理由

ウェブサイトは、コンテンツを HTML、デザインを CSS、ロジックを JavaScript で書くというのが一般的で、通常は下記のように別ファイルで管理していた：

HTML	JavaScript

上記は静的な情報を扱うだけであれば良かったが、近年ではロジックがコンテンツの中身を決めるようになったため（動的に情報が変わる）、JavaScript が HTML の領分も担当するようになった。そういった背景から、React ではロジックとマークアップをコンポーネントに書くようになっているらしい。

レンダリングロジックとマークアップをコンポーネントに書くことで、編集時の同期が保証され、関係のないコンポーネントの影響も受けずに更新できるようになる。

JSXのルール

単一のルート要素を返す

複数の要素を返す場合には、単一の親タグで囲んで返す。タグには、<div></div> や <></>(フラグメント) が使える。
単一要素しか返せないのは JSX の裏では JavaScript オブジェクトへの変換が動いており、関数から複数のオブジェクトを返す時は配列等でラップする必要があるのと同様、JSX では別タグでラップする。
全てのタグを閉じる

明示的にタグを閉じる
（ほぼ）すべてキャメルケース

JSX は JavaScript へ変換され、JSX の属性は JavaScript オブジェクトのキーになる。一方で JavaScript の変数名の制約を受ける（-を含めなかったりや class のような予約語は使えない）
それを回避するために React では属性名をキャメルケースで書く。