React Base

コンポーネント・props・stateから、Reactの基本を確かめます。

JSX・props・イベント

基本の書き方と使い方

1コンポーネント・JSXJSXの式は値になり、コンポーネントを配置した場所に画面が作られる。 2props・childrenprops・children・省略時の既定値 3props が届く順路props / children / デフォルト値が効く条件 4onClick・イベントイベントには関数を渡す。通常のクリックは内側から親へ伝播する。 5コンポーネントは関数描画のたびに関数が呼ばれる / ローカル変数は残らない 6条件付き表示とリスト条件式の戻り値まで見る。mapで作る兄弟要素には安定したkeyを付ける。 7波括弧と条件付きレンダリング波括弧の中は式 / && が返すもの

useState

更新・入力・共有・Hookのルール

8useStatestateは表示ごとの値。更新は次の表示へ反映され、関数形式なら前の更新結果を受け取る。 9useState の3点セットstate を読む場所と書く場所 / 計算で出せるものは持たない 10入力フォーム入力値とstate・文字列の変換・送信 11配列とオブジェクトを更新する変更する部分まで新しく作る。外側のコピーだけでは入れ子の参照は共有される。 12stateの置き場所共有するstateは共通の親へ。計算で求められる値は表示中に導ける。 13リフトアップ共通の親に置く / 関数を props で渡す 14フックのルールReact はフックを呼ばれた順番で見分けている

useEffect

同期・後片付け・StrictMode

15useEffectEffectは外部との同期へ。依存が変わると古い後片付けから始める。 16useEffect の実行とクリーンアップ描画のあとに実行される / 次の Effect の前に片付ける 17StrictMode開発時だけの検査 / 何を見つけようとしているか

useRef・カスタムHook

値の保持・DOM・処理の再利用

18useRef・カスタムHookrefは保持、stateは表示の更新。カスタムフックを呼ぶたびstateは独立する。 19refで値とDOMを保持するstate との違い / DOM を掴めるタイミング 20カスタムHookと状態の持ち主カスタムHookはロジックを再利用します。

各Hookの基本

共有・計算・ID・優先度・フォーム

21useContextuseContextが読むProviderと既定値 22useReducerstateとactionから次のstateを求める 23useMemo・useCallbackuseMemoは計算結果、useCallbackは関数をキャッシュする最適化です。 24useIduseIdはアクセシビリティ属性を関連付けるIDを生成します。 25useTransition入力値はすぐ更新し、結果用の値はTransitionで更新します。 26useDeferredValue入力と表示用の値の更新を分ける 27useLayoutEffectDOM計測と描画前の補正 28useEffectEvent購読を変えずに最新の値を読む 29useActionStateReact 19のform actionから処理を呼びます。 30useFormStatususeFormStatusはreact-domからimportします。

教材の前提

JSX・props・stateから、Context・Reducer・キャッシュ・IDまで、小さな例で学ぶ基礎コース。JavaScriptの関数・配列・オブジェクトを学んだ方向けです。React 19.2.0、createRoot、StrictMode・React Compiler無効を基準にします。

← コース一覧へ

JS Baseで前提を確認

React Thinkで動きを読み解く

進捗はこのブラウザに保存します。file:// では保存できない場合もありますが、学習は続けられます。

プライバシーポリシー