Pokémon-Listenseite in React nachbauen

[p-runge]

Neue Projekteinrichtung

• [x] Erstelle dir ein neues GitHub Repository.

Dieses Repo soll nicht nur für die Listenseite selbst, sondern letztendlich ein umfangreiches Wiki zum Thema Pokémon werden.

Vercel

Vercel ist eine Plattform, auf der man seine Webapps sehr einfach kostenlos öffentlich machen kann.

• [x] Erstelle dir einen Vercel Account
• [x] Importiere dein neues GitHub Projekt in Vercel

Initiales Deployment

• [x] Erstelle dir ein neues Projekt auf Basis von React und Next.js
• [x] Wechsle auf den develop Branch
• [x] Commite den initialen Stand und pushe ihn zu GitHub
• [x] Schaue bei Vercel in die Deployments für dein Projekt und schaue dir den deployten Stand online unter deiner persönlichen "vercel.app" Sub-Domain an

Git Flow

Git Flow ist die Art und Weise nach der die meisten Projekte Git verwenden und bezeichnet eine Vorgehensweise im Management mit Branches. Die verlinkte Grafik veranschaulicht das ganz gut. Für weitere Details gibt es zu dem Thema aber auch viele weitere Ressourcen.

• [x] Erstelle die einen neuen Feature Branch für die Erstellung deiner Listenseite

Nachabuen der Listenseite in React

• [x] Erstelle eine neue Seite in der Pages Directory
• [x] Erstelle dir im src Dir einen neuen Ordner components
• [x] Erstelle dir für die PokemonCard eine neue Datei im components Ordner und default exportiere dort deine Komponente
• [x] Baue die PokemonCard als React Komponente um
• [x] Baue auf deiner Seite eine Liste, die die PokemonCard Komponente verwendet
• [x] Implementiere das OnClick Behaviour der Type Filter Buttons
• [x] Implementiere das OnClick Behaviour des Type Reset Buttons
• [x] Implementiere das OnClick Behaviour des Schrei-Audio Buttons

Für das Filtern wirst du einen state benötigen. Dafür wirst du Berührungspunkte mit deinem ersten React Hook haben – dem useState Hook. Zu dem kannst du dir schonmal die Erklärung in den React Docs durchlesen.

Für das Abspielen des Schreis wirst du einen weiteren Hook benötigen, und zwar useRef. Mit useRef kann man z.B. das HTMLElement, das hinter einem ReactNode steckt, in einer Variable speichern, und damit programmatisch greifbar machen. Im Falle des Playbuttons, welcher ja ein Audio Element nehmen, und darauf play() ausführen soll, ist das also genau das, was wir brauchen. So kannst du mit const audioRef = useRef<HTMLAudioElement>(null); eine Referenz zu einem Audio Element erzeugen, und diese mit <audio ref={audioRef} ... dieses Audio Element referenzieren. Nun kannst du überall in der Komponente (z.B. auch im onClick Handler deines Buttons) über audioRef.current auf das HTML Element deines Ref-Objekts zugreifen, und z.B. die play() Funktion ausführen.

[p-runge]

Bisheriger Stand sieht schon sehr gut aus!

Einzig offene Sache ist noch die OnClick Behaviours der Buttons, also:

• Setzen des aktuellen Type Filters
• Resetten des Type Filters
• Abspielen des Schreis