# Aufgabe

Eine Liste von Filmen mit der Methode `map()` rendern.

Die Komponente `MovieList` muss Folgendes enthalten:

1. Ein `ul`-Element.

2. Für jeden Film im Array `li` ein `movies`-Element mit `map()` rendern.

3. Jedes `li`-Element muss:

* Den Filmtitel anzeigen.
   * Eine eindeutige `key`-Prop mit dem Wert `movie.id` enthalten.

Die Komponente `App` übergibt das Array `moviesData` bereits an die Komponente `MovieList`.


## Startcode
Öffne das folgende Starter-Projekt und vervollständige die fehlenden Teile der Komponente.

[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)



## Lösung

Das Ergebnis kann mit der finalen Lösung unten verglichen werden.

[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)

Erkunden Sie die Grundlagen der Erstellung von Benutzeroberflächen mit React. Schwerpunkt auf Komponenten, JSX, Datenfluss, Zustand und Nebenwirkungen, wie sie in alltäglichen React-Anwendungen verwendet werden.

Untersuchung von React und dessen Rendering von Benutzeroberflächen. Schwerpunkt auf Komponenten, JSX-Syntax und der Anzeige von Elementen auf dem Bildschirm.

Was ist der Hauptzweck von Props in React?

Welche Methode wird am häufigsten verwendet, um eine Liste von Elementen in React darzustellen?

Warum ist das Key-Prop beim Rendern von Listen wichtig?

Vertiefung der Datenübergabe zwischen Komponenten und Steuerung der UI-Ausgabe. Schwerpunkt auf Props, bedingtem Rendern und dem Rendern von Datenlisten.

Erfahren Sie, wie Benutzerinteraktionen und externe Daten die Benutzeroberfläche im Laufe der Zeit verändern. Schwerpunkt auf dem Verwalten von Zustand und dem Umgang mit Seiteneffekten mithilfe von React Hooks.

Untersuchung gängiger Methoden zur Gestaltung von React-Komponenten. Schwerpunkt auf der Anwendung von Stilen mittels Inline-Styles und externer CSS.

Erfahren Sie, wie ein React-Projekt ausgeführt wird und wie dessen Struktur aufgebaut ist. Schwerpunkt auf dem Starten eines Projekts mit Vite und dem Navigieren durch die Projektdateien.

Herausforderung: Eine Filmliste Rendern

Aufgabe

Startcode

Lösung

Herausforderung: Eine Filmliste Rendern

Aufgabe

Startcode

Lösung