Reactとは？

Reactは、VueやSolidと並んで人気のあるJavaScriptライブラリの一つです。

• JavaScriptの中でHTMLを書く
• 「コンポーネント」という単位にHTML要素を分割し、使いまわしたり、テンプレート化したりできる
• 中身はJavaScriptなので、JavaScriptのコード（ループ処理や条件分岐など）が使用できる
• 我々コーダーは、DOMを直接操作しない

という特徴があります。

簡単な例

公式サイト（ https://react.dev ）から、少し例を引用します。

function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}

<div>や<a>は見慣れていると思いますが、<Thumbnail>という謎のものが存在しています。この<Thumbnail>は、中身はHTMLの塊になっており、どこかで誰かが宣言したことによって使い回しができる状態になっています。これをコンポーネントといいます。

ちなみに、上記のコードは「Videoコンポーネント」を作成するためのものです。

JavaScriptロジックの使用

試しに、ループ処理ができるようにしてみます。

function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
  if (count > 0) {
    const noun = count > 1 ? 'Videos' : 'Video';
    heading = count + ' ' + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map(video =>
        <Video key={video.id} video={video} />
      )}
    </section>
  );
}

videosに動画データを突っ込めば、.map()関数によりデータを展開し、それを描画することができます。