# 課題

`map()` メソッドを使用して映画のリストをレンダリング。

`MovieList` コンポーネントには以下が含まれる必要があります：

1. `ul` 要素。

2. `li` 配列内の各映画に対して、`movies` を使って `map()` 要素をレンダリング。

3. 各 `li` 要素は以下を満たす必要があります：

* 映画タイトルの表示。
* 一意な `key` プロップとして `movie.id` を指定。

`App` コンポーネントはすでに `moviesData` 配列を `MovieList` コンポーネントに渡しています。


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

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-04-starter-render-a-movie-list?file=src%2FApp.jsx)



## 解答例

最終的な解答例と結果を下記で比較できます。

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-04-solution-render-a-movie-list?file=src%2FApp.jsx)

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

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

Reactにおけるpropsの主な目的は何ですか？

Reactでリストを描画する際によく使われるメソッドはどれですか？

リストを描画する際にkeyプロップが重要な理由は何ですか？

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

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

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

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

チャレンジ：映画リストをレンダリングする

課題

スターターコード

解答例