完成と次のステップ

プロフィールサイトが完成しました

JavaScript で作ったプロフィールサイトを、React で丸ごと作り直しました。カードは props で動く部品になり、ダークモードとフォームと絞り込みは state で動き、時計は useEffect で動いています。最初のレッスンで見比べた「命令的と宣言的」の違いを、自分の手で最後まで書いたことになります。

身についたことを並べると、次のようになります。JSX で見た目を書くこと、props で値を渡すこと、useState で変わる値を持つこと、イベントで state を変えること、map と条件分岐でデータから画面を作ること、useEffect で外の世界とつなぐこと、そして画面を部品のツリーとして設計することです。これは React の土台のほぼ全部です。

ここから先の3つのコース

次に進む道は3つあり、この順番で受けるのがおすすめです。

1つ目は TypeScript 入門 です。このコースの途中で「props の名前を間違えて undefined になった」ことがあったはずです。TypeScript は、その手の間違いを書いている最中に教えてくれる仕組みです。React と組み合わせると props の受け渡しが一気に安全になるので、次はここが効きます。

2つ目は React 実践 です。第8章で体験した props のバケツリレーをどう解消するか、useContext やカスタムフックといった道具で学びます。サーバーからデータを取ってきて表示する、実務でいちばん多い形もここで扱います。

3つ目は Next.js 入門 です。React で作った画面を、ページの切り替えやサーバー側の処理まで含めて1つのアプリとして公開する枠組みです。React が分かっていることが前提なので、最後に置いています。

学び方の続け方

いちばん効くのは、このコースで作ったサイトを自分のものに書き換えることです。名前も作品も自分のものに変えて、公開してみてください。教材の題材ではなく自分の題材にした瞬間に、覚え方が変わります。

分からなくなったら、まず「どの state を変えれば、その画面になるか」に戻ります。React で迷ったときの立ち返り先は、いつもここです。

演習

最後に、完成したサイトへ締めのセクションを足します。これから学ぶことを自分の言葉で書いて、サイトを閉じましょう。