このセクションで学ぶこと
動画のテキスト【このセクションで学ぶこと】
このセクションのゴールは、下記React + TypeScriptアプリを完成させることです。アクセスして「sushi」、「udon」、「pancake」、「pasta」と検索すると、そのレシピが表示されるので確認してみましょう。レシピがない場合は「sushi」のレシピが表示されます。
このアプリは本コースの姉妹編にあたる「Reactマスター」で作ったアプリの簡易版です。本コースでもReactの解説も適宜加えますが、焦点はTypeScriptにあるので、React自体の知識や理解が足りないと感じる方は「Reactマスター」を参考にしてください。
本セクションでは、アプリをまずReactバージョン19の新機能は使わずに完成させ、その後、本セクション後半でバージョン19を導入します。バージョン19以前と以後、両方のReact + TypeScriptのコードを学ぶためです。
なお本コースの以前の版では、レシピデータの取得にTheMealDBという無料サービスを使っていました。
しかしこのTheMealDBのレシピはすべて英語で書かれており、またデータの構造に扱いにくさがあったため、今回からは、バックエンド（サーバー + データベース）を自分のコンピュータ内に用意する方法で進めていきます。コードは私の方で用意してあり、それをダウンロードするだけなので、バックエンド側の知識は不要です。
• React + Vite + TypeScriptのセットアップ • 型定義の書き方 • useStateの型 • propsの型 • 分割代入したpropsの型の記法 • イベントの型 • イベントの型の記法 • functionの型の構造 • 非同期処理の型 • 型を確認する方法 • 型推論 • any型 • 複雑な構造をしたデータの型 • Layoutコンポーネント • ローディングの設定 • childrenの型 • JSX.Element • React.ReactNode • React.ReactElement • Reactバージョン19による書き換え • formData • useActionState