# 課題

`useState`フックを使用して、動作する「いいね」カウンター付きのシンプルなソーシャルメディア投稿カードを作成。

コンポーネントに含める内容：

1. `likes`という名前の状態変数。初期値は`120`。

2. 見出し（`h2`要素）。テキスト内容は`Exploring Iceland`。

3. 段落（`p`要素）。テキスト内容は`One of the most beautiful trips I've ever had.`。

4. もう一つの段落（`p`要素）。`Likes:`の後に現在の`likes`の値を表示。

5. ボタン（`button`要素）。テキスト内容は`Like Post`。

6. ボタンがクリックされたとき、`likes`の状態を`1`増加。

## スターターコード
以下のスタータープロジェクトを開き、コンポーネントの不足部分を完成させる。

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-05-starter-build-a-social-media-post-like-button?file=src%2FApp.jsx)



## 解答例

最終的な解答例と結果を下記で比較可能。

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-05-solution-build-a-social-media-post-like-button?file=src%2FApp.jsx)

Reactを使用したユーザーインターフェース構築の基礎を学びます。コンポーネント、JSX、データフロー、状態管理、日常的なReactアプリケーションで使用される副作用に焦点を当てます。

Reactとは何か、そしてどのようにユーザーインターフェースをレンダリングするかを学びます。コンポーネント、JSX構文、画面上への要素の表示に焦点を当てます。

関数コンポーネントで状態を管理するために使用されるフックはどれですか？

`useEffect`フックは、依存配列がない場合、デフォルトでいつ実行されますか？

コンポーネント間でデータを渡し、UI出力を制御する方法を学びます。props、条件付きレンダリング、データリストのレンダリングに焦点を当てます。

ユーザーの操作や外部データが時間の経過とともにUIをどのように変化させるかを学びます。Reactフックを使用した状態管理と副作用の処理に焦点を当てます。

Reactコンポーネントをスタイリングする一般的な方法を学びます。インラインスタイルと外部CSSを使用したスタイルの適用に焦点を当てます。

Reactプロジェクトの実行方法とその構造について学びます。Viteを使用したプロジェクトの開始と、プロジェクトファイルのナビゲーションに焦点を当てます。

チャレンジ：ソーシャルメディア投稿の「いいね」ボタンを作成する

課題

スターターコード

解答例