JSXとは（React)

JSX とは

JavaScript のファイルの中で HTML のような記述ができる JavaScript の構文拡張です。
Web がインタラクティブになるにつれて、ロジックと見た目をおんなじ場所に書いてしまおうという魂胆で生まれたらしいです。

JSX のルール

1. 単一のルート要素を返す
   コンポーネントで複数の要素を返すには単一の親タグでそれらをラップします。

<div>が大事です。
divを使いたくないときは、<>空のタグを使うことができます。
この<>はFragmentと呼ばれています。ブラウザのHTMLツリーに痕跡を残さずにグループ化できます。

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

2. 全てのタグを閉じる
   <img>や<li>はタグを閉じます。

3. ほとんどキャメルケース

*歴史的な理由から、aria-*属性 data-*はダッシュ付きの HTML のように記述されます。

4. JavaScript なので変数を渡すこともできます。
   {}を使って変数やオブジェクトを渡すこともできます。

const person = {
  name: "Gregorio Y. Zara",
  theme: {
    backgroundColor: "black",
    color: "pink",
  },
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

HTML から JSX に変換したい時

コンバーターがあるので、使いましょう

https://transform.tools/html-to-jsx