SPAページに特化したJavascriptのライブラリのReact。
今回はコンポーネントやJSXの学習と復習もかねてポートフォリオを制作しています。
私がReactで便利だなとおもうことは以下の事が挙げられます。
1. 再利用性
再利用性は、ポートフォリオサイトのコンポーネント設計において大きな利点を提供します。Reactコンポーネントは独立した部品として設計されるため、同じレイアウトやデザイン要素を何度でも使い回すことができます。例えば、ナビゲーションバー、フッター、プロフィールカードなど、ポートフォリオの多くのセクションで同じデザインを繰り返し使用することができます。
具体的な例としては：
共通部分の再利用：ヘッダーやフッターなど、全ページで共通して表示される部分をコンポーネントとして切り出し、一度作成すれば複数ページで再利用できます。これにより、コードの重複を減らし、保守性を向上させることができます。
プロジェクトカード：ポートフォリオ内で複数のプロジェクトを表示する際、同じデザインのカードコンポーネントを再利用できます。プロジェクトごとの内容（タイトル、説明、リンク）を異なるプロパティ（props）として渡すことで、同じコンポーネントで異なる情報を表示できます。
再利用性により、コンポーネントの作成が効率的になり、変更が必要な場合も一箇所で修正すれば、全てのインスタンスに反映されるため、手間が大幅に減ります。
2. 宣言的なUI
宣言的なUIとは、アプリケーションがどのように表示されるかを状態に基づいて記述する手法です。Reactでは、状態が変わると自動的にUIが再描画されます。ポートフォリオサイトでは、訪問者の操作や状態の変化に応じてUIを動的に更新する必要がありますが、宣言的なUIを使うことで、これをシンプルかつ直感的に実現できます。
例えば：
スクロールによる表示の変更：ユーザーがページをスクロールしたときに、特定のセクション（例えば、プロジェクトの詳細や経歴）が動的に表示される仕組みを作ることができます。状態（例えば、スクロール位置）に基づいて、表示内容を変更することが簡単にできます。
フォームのバリデーション：コンタクトフォームや問い合わせフォームでは、ユーザーが入力する内容に応じて、エラーメッセージを表示するなど、UIが動的に変化します。Reactの状態管理を使えば、フォームの入力にリアルタイムで反応し、エラーメッセージや成功メッセージを即座に表示できます。
他にもクラスコンポーネント、関数コンポーネント便利な機能はありますが、宣言的なUIは、どの状態でどのような表示がされるべきかを明示的に記述するため、複雑な状態遷移やUI更新のロジックを整理しやすく、コードが読みやすくなるのが個人的に最も強みだと感じております。
