reactってなに？

reactを改めて使うので思考整理のためにかいていきます💪
（追加で気づきなどあれば追記していきます。）

どういう意味？

reactを英語辞典で検索すると「反応する」という単語が出てきます。
SPAの、ページ遷移をせずに画面の一部を更新する性質を指しているのだと思います。

公式ドキュメントが変わったらしい

実際に公式のドキュメントを見ていきたいのですが最近内容を更新したみたいで、
現在はこちらが最新になっています。
https://ja.react.dev/
以前のサイトはこちらに移行されたそうです。
UIが変わったのと、実践のサンプルが大幅に追加されたそうです。
https://ja.legacy.reactjs.org/

何がすごいの

コンポーネントからユーザーインターフェースを作成

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>
  );
}

例えば、このVideoをコンポーネント（部品）としていろんな場所でも使えます。
Videoの中にあるThumbnailやLikeButtonも同じで、既に作ったものを使い回ししています。
そのため、同じ部品を使い回すことの多い大規模開発に向いています。

マークアップとコードからコンポーネントを作成

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>
  );
}

コンポーネントはjavascriptというプログラミング言語の関数で作っているので、通常html,cssでは使えないifやmapが使えます。
このおかげで一つのページに複数のコンポーネントを配置し、各コンポーネントが最新の状態を保てるSPAを実現できるということです。

代表的なフック

フックは状態管理などのReactの便利機能を、クラスを書かずに使えるようになった仕組みです。

• useState
  状態管理の機能で、const [age, setAge] = useState(42);
  のように書きます。
  値を参照するときはageを、更新するときはsetAge(値)を使います。
  更新した際はその部分だけリアクティブになり更新されます。
• useContext
  コンポーネント間のデータの受け渡しができます。propsのようにバケツリレーしなくても一直線に渡せるようになっています。
  
• useEffect
  useEffectの中に書いた関数はレンダリング後に一度実行されます。
  また、変数の箇所の値が変化するたびに実行されます。

useEffect(() => {
  	console.log("実行されました")
  }, [変数]);

• useRef
  useStateと似ていて、値の状態管理ができますが、useRefは値が変更になっても、コンポーネントの再レンダリングが発生しません。
  あとはこのように書くと、生のDOMがref.currentに設定されるのでこれで、<input>のDOMノードにアクセスして、focus()のようなAPIを直接呼び出すことができます。

return <input ref={inputRef} />;
----
function handleClick() {
    inputRef.current.focus();
  }

use clientとuse server

公式ドキュメントにNext.jsのApp Routerの内容が書かれていますね。
reactを元にしたフレームワークはNext.jsとremixが有名ですけど、react側からしたらNext.jsを推しているということなんですかね。
(https://ja.react.dev/reference/react/directives)

react router

知らなかったので補足ですが、react routerはreactとは別のものです。
react routerはreactのページをルーティングするライブラリで、こちらもいつかまとめたいと思います。