Overview

まずは全体像を掴む
React Developer Roadmap: Learn to become a React developer

基本、応用、エコシステムの3つに分かれてる。
状態管理としてはこれ以外に jotai や Recoil などがあるらしい。

公式チュートリアル

チュートリアル：React の導入 – React
日本語化されていて読みやすい！
三目並べゲームを題材に基本的なコードをざっと体験できる。
ロードマップでいうと以下の項目が学べる。

• CRA
• JSX
• Components
  • Functional Components
  • Class Components
• Props vs State
• Conditional Rendering
• Lists and Keys

ついでに

• イベントハンドリング
• React Devtools 拡張機能
• State のリフトアップ
• イミュータビリティの重要性

あたりも学べる。
こんな感じでコード書くのね〜というのが分かった。

Vue が this.msg = "hoge" のように単に代入で更新するのに対して React は setState メソッドで State を更新するのでコード量は増えそうと思った。 Hooks を使った場合はどうなのかまだわからない。
Vue は内部で依存関係を追跡するマジックによって State を透過的に扱えるようにするという思想で、React はプレーンな JavaScript オブジェクトをむき出しにすることで取り回しの柔軟性を重視する思想なのかな〜という印象で思想の違いを感じられた。

また子コンポーネントの変更を検知する方法として Vue は Event を使用するが、React はイベントハンドラを Props で渡す手段を取る。 ここらへんも思想の違いがある。

ところで Vue の Computed Property に相当する概念はないのかな？🤔

チュートリアル（犬画像ギャラリー）

Reactチュートリアル1：犬画像ギャラリーを作ろう
API を使った犬画像ギャラリーアプリを題材に公式チュートリアルでちょっと足りなかったあたりが学べる。

• CSS フレームワーク (Bulma)
• API fetch
• useEffect
• useState
• フォームの扱い
• Netlify へのデプロイ

初学者でもスムーズに取り組めそうなほど説明が丁寧だったので特に躓くこともなく。
公式チュートリアルやったあとにやるにはちょっと冗長だったかも。
せっかくなのでちゃんとデプロイまでやった。

React ガイド Main Concepts (Hello World ~ React の流儀)

Hello World – React

基本的に Vue と本質的にはあまり変わらないので新しい概念は特になかった。
クラスコンポーネントを使う際には、イベントハンドラの this を束縛しなきゃいけない点や、State の更新はシャローマージされる点などいくつか注意点があるが、基本的に関数コンポーネントを使うことになると思うのでここを気にすることはあまりなさそう？

React ガイド Hooks

フックの導入 – React

Hooks の導入経緯や useState, useEffect の動作イメージがなんとなく分かった。
他にも以下の Hooks について説明されているがちょっと多すぎてあまり頭に入ってこなかった。

• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

それぞれどういったときに使われるものなのか個別に掘り下げて調査することにする。