Reactの概要をざっと読んでみました

JSのフレームワークはたくさんありますが、Vueはチュートリアルいくつかやった程度、SvelteもチュートリアルやDoc読んでSvelteKitでいくつか簡単なアプリを作ってみた程度。結局ReactはいままでやったことがなかったのでDoc読んでみました。せっかく読んだので忘備録（メモ書き程度です。ほんの触りだけです。）として書いておこうと思います。

読んだもの、やってみたもの

Learn React: Quick Start

8割のReactのコンセプトがこのページに纏まられているそう。
componentの作り方や、propの渡し方、Stateの使い方など基本的ことが短く要点だけまとめてありざっと一気に読めました。コードを書くというより読んでコンセプトの概要を把握するような感じでした。

それから、
NEXT.JS: From JavaScript to React

こちらは手を動かしてReactのコードを書いていく感じでした。カバーしている範囲は先ほどのReactのQuick Startとほぼ同じで復習する感覚でやっていけました。内容も要点だけでとてもわかりやすくて簡単にまとめられていました。

Loopするときにkeyをつける

配列をループして<li>を作るところがどちらもありましたが、keyをつけておかないとワーニングが出ることについてはNEXT.jsのほうでしか言及されていませんでした。SwiftUIでForEachする時にIDが必要だとエラーになったりしていたの思い出しました。

function ListItems() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

雑記

Svelteの方が圧倒的にコード量は少ないと思いますが、Reactは何やっているのか掴みやすくJS主体で書くような印象を受けました。まだuseStateしか見ていないので他のhookも見てみようと思います。