Skip to main content

React 2 (React Movie Explorer - concept 13/1)

ChatGPT: Hier is een leuk projectidee dat studenten zowel enthousiast maakt als hen helpt om Vite + React te leren:

Projectnaam: "React Movie Explorer"

Beschrijving: Studenten bouwen een interactieve webapplicatie waarmee gebruikers informatie over films kunnen opzoeken. De applicatie gebruikt een externe API, zoals de OMDb API of een andere gratis films-API. Gebruikers kunnen zoeken naar films, details bekijken (zoals titel, genre, plot, en poster), en een lijst van favoriete films bijhouden.

Functionaliteiten:

  1. Zoekfunctionaliteit:

    • Gebruiker kan een film zoeken op naam.
    • Zoekresultaten worden dynamisch weergegeven.

  2. Film Details:

    • Klik op een film in de lijst om meer details te bekijken (bijvoorbeeld een aparte pagina of een popup).

  3. Favorieten:

    • Gebruikers kunnen films toevoegen aan een lijst met favorieten.
    • Favorieten worden opgeslagen in de localStorage, zodat ze blijven bestaan na het herladen van de pagina.

  4. Responsief Design:

    • De app werkt goed op zowel desktop als mobiel.

  5. Vite + React:

    • Vite zorgt voor een snelle ontwikkelomgeving.
    • Studenten leren component-gebaseerde ontwikkeling met React, inclusief statebeheer met useState en useEffect.

Extra Opties voor Gevorderde Studenten:

  • Filteren op genre of jaar: Voeg extra filters toe.
  • Paginering: Zorg dat zoekresultaten verdeeld worden over meerdere pagina's.
  • Themawisselaar: Laat gebruikers wisselen tussen een licht en donker thema.

Benodigde tools en kennis:

  1. Tools:

    • Vite: Voor snelle projectopzet.
    • React: Voor het bouwen van componenten.
    • API zoals OMDb API (registreer voor een gratis API-sleutel).
    • CSS-framework (optioneel): Tailwind, Bootstrap, of handgemaakte CSS.

  2. Kennis:

    • Basis JavaScript en ES6+ (bijv. fetch API).
    • React-beginselen (useState, useEffect, props, componenten).
    • Basis HTML/CSS.

Projectopbouw:

  1. Les 1: Introductie en opzet

    • Installeer Node.js, Vite, en maak een nieuw project.
    • Begrijp de folderstructuur van Vite + React.
    • Bouw een eenvoudige React-component die een "Hello World" bericht toont.

  2. Les 2: API-integratie

    • Leer hoe je de OMDb API gebruikt met fetch.
    • Bouw een zoekbalk en toon resultaten.

  3. Les 3: Statebeheer en favorieten

    • Gebruik useState voor statebeheer.
    • Voeg een favorietenfunctie toe en sla favorieten op in localStorage.

  4. Les 4: Styling en afronding

    • Voeg styling toe met CSS of een framework.
    • Maak de app responsive.
    • Voeg een themawisselaar toe als bonus.

Les 3: Statebeheer en favorieten

Doel van de les

Studenten leren hoe ze statebeheer met useState toepassen in React en een favorietenfunctionaliteit implementeren. Favorieten worden opgeslagen in localStorage, zodat deze behouden blijven na het herladen van de pagina.

Stap 1: Favorieten toevoegen aan state

  1. Pas de App.jsx aan:
    • Open het bestand App.jsx.
    • Voeg een nieuwe state toe voor het opslaan van favorieten: 
      import { useState, useEffect } from 'react';

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const [movies, setMovies] = useState([]);
  const [favorites, setFavorites] = useState([]);

  const API_KEY = 'JOUW_API_SLEUTEL_HIER';

  const searchMovies = async () => {
    const response = await fetch(`https://www.omdbapi.com/?apikey=${API_KEY}&s=${searchTerm}`);
    const data = await response.json();
    if (data.Search) {
      setMovies(data.Search);
    } else {
      setMovies([]);
    }
  };

  const addToFavorites = (movie) => {
    const updatedFavorites = [...favorites, movie];
    setFavorites(updatedFavorites);
    saveToLocalStorage(updatedFavorites);
  };

  const removeFromFavorites = (movie) => {
    const updatedFavorites = favorites.filter(fav => fav.imdbID !== movie.imdbID);
    setFavorites(updatedFavorites);
    saveToLocalStorage(updatedFavorites);
  };

  const saveToLocalStorage = (items) => {
    localStorage.setItem('favorites', JSON.stringify(items));
  };

  const loadFavoritesFromLocalStorage = () => {
    const storedFavorites = JSON.parse(localStorage.getItem('favorites')) || [];
    setFavorites(storedFavorites);
  };

  useEffect(() => {
    loadFavoritesFromLocalStorage();
  }, []);

  return (
    <div>
      <h1>React Movie Explorer</h1>
      <div>
        <input
          type="text"
          placeholder="Zoek een film..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button onClick={searchMovies}>Zoeken</button>
      </div>
      <div>
        <h2>Zoekresultaten</h2>
        {movies.length > 0 ? (
          <ul>
            {movies.map((movie) => (
              <li key={movie.imdbID}>
                <h2>{movie.Title}</h2>
                <p>{movie.Year}</p>
                <img src={movie.Poster} alt={movie.Title} />
                <button onClick={() => addToFavorites(movie)}>Voeg toe aan favorieten</button>
              </li>
            ))}
          </ul>
        ) : (
          <p>Geen films gevonden. Probeer een andere zoekterm.</p>
        )}
      </div>
      <div>
        <h2>Favorieten</h2>
        {favorites.length > 0 ? (
          <ul>
            {favorites.map((favorite) => (
              <li key={favorite.imdbID}>
                <h2>{favorite.Title}</h2>
                <p>{favorite.Year}</p>
                <img src={favorite.Poster} alt={favorite.Title} />
                <button onClick={() => removeFromFavorites(favorite)}>Verwijder uit favorieten</button>
              </li>
            ))}
          </ul>
        ) : (
          <p>Geen favorieten toegevoegd.</p>
        )}
      </div>
    </div>
  );
}

export default App;

Stap 2: Uitleg over de code

  1. Statebeheer:

    • favorites: Houdt een lijst bij van favoriete films.

  2. LocalStorage:

    • Functie saveToLocalStorage: Slaat de favorieten op in de browser.
    • Functie loadFavoritesFromLocalStorage: Laadt favorieten uit localStorage bij het laden van de app.

  3. Favorieten toevoegen/verwijderen:

    • Toevoegen: De film wordt toegevoegd aan de favorietenlijst en opgeslagen in localStorage.
    • Verwijderen: De film wordt uit de favorietenlijst verwijderd en de wijzigingen worden opgeslagen.

  4. Gebruik van useEffect:

    • useEffect wordt gebruikt om de opgeslagen favorieten te laden bij het opstarten van de applicatie.

Stap 3: Test de applicatie

  1. Start de ontwikkelserver: 
    npm run dev
  2. Voer een zoekopdracht uit:
    • Zoek een film en voeg deze toe aan de favorieten.
  3. Controleer de favorietenlijst:
    • Zie hoe de favorieten verschijnen onder de sectie "Favorieten".
  4. Herlaad de pagina:
    • Controleer of de favorieten behouden blijven dankzij localStorage.

Extra uitdaging (optioneel)

  • Voeg een knop toe om alle favorieten in één keer te verwijderen.
  • Voeg een melding toe wanneer een film al in de favorieten staat.

Samenvatting van de les

  • Studenten hebben geleerd hoe ze statebeheer toepassen met useState.
  • Ze hebben een favorietenfunctionaliteit geïmplementeerd.
  • Ze hebben localStorage gebruikt om gegevens op te slaan en te laden.

Voorbereiding voor les 4

  • Lees over CSS-styling en het verbeteren van gebruikersinterfaces.
  • Denk na over hoe je filters of paginering kunt toevoegen aan de zoekresultaten.

Back to top