このセクションで学ぶこと
動画のテキスト【このセクションで学ぶこと】
ここまでReactとJavaScriptを紹介してきたので、本セクションからはいよいよReactの開発を進めましょう。最初に、本セクション以降の流れを簡単に説明します。
本セクションと次セクションの最終的なゴール地点は、下記Reactアプリを完成させることです。
「udon」や「salad」、「pasta」、「onigiri」と調べると、そのレシピが表示されます。存在しないレシピを調べると「sushi」が表示されます。またレシピの写真の下部にはコメント欄があり、デフォルトでは「コメントを書いてみよう」と表示されていますが、その下の入力フォームに料理を作ってみた感想を書くと投稿ができるようになっています。また直近5件の検索履歴を写真付きで表示する機能と、ダークモードへの切り替えも可能です。
本セクションだけでこの段階までアプリを完成させるのは負担が大きいので、「ダークモード機能」と「検索したレシピを表示する履歴機能」、「コメント投稿機能」の開発は次セクション以降に回し、本セクション終了時には下記の状態になっていることを目標にします。
なお、本セクションではReactバージョン18までの書き方で開発を進め、次セクションでバージョン19で導入された新しいコードで書き換えを行います。Reactコードに対する対応能力を向上させるために、従来までのコードとこれから利用されていくコードの両方に触れるのです。ダークモード機能、履歴機能、コメント投稿機能の開発は、バージョン19への書き換えが済んだあとに行います。
• React開発ツール • React + Vite • フォルダ構成の考え方 • Reactコード（コンポーネント）の構造 • Reactアプリの構造 • SPA • CSSの適用方法 • fetch() • Promise • 非同期処理（async／await） • state • state更新の方法（useState） • テンプレートリテラル • イベントの種類 • イベントの書き方のバリエーション • 単方向データフロー • ページの設定方法（react-router-dom） • ページの移動 • Layoutコンポーネント • ページタイトルの設定 • ローディング