React

Mis on React?

React on JavaScripti teek, millega tehakse veebilehtede kasutajaliideseid. Reactis jagatakse leht väikesteks osadeks ehk komponentideks. Kui andmed muutuvad, uuendab React ekraani automaatselt. Sellepärast on React hea interaktiivsete veebirakenduste tegemiseks, näiteks filminimekirja loomiseks.

Mis on komponent?
Komponent on UI osa (näiteks filmikaart), mida saab korduvalt kasutada.

Milleks kasutatakse state’i?
State hoiab muutuvaid andmeid, näiteks filmide listi või otsingut.

Miks React on kasulik?
Sest kood on organiseeritud ja leht uuendab ennast automaatselt.


Tähtsad mõisted
• JSX — HTML-sarnane kood JavaScripti sees.
• Component — korduvkasutatav UI osa.
• Props — andmed, mida antakse komponendile edasi.
• State — komponendi muutuvad andmed.

React Movie Library – konspekt

1. Projektistruktuur

Projekt on loodud Reacti ja Vite abil. Rakendus on jagatud loogilisteks osadeks:

• components – korduvkasutatavad UI osad (MovieCard, navbar)
• lehed – rakenduse erinevad leheküljed (Home, Search, Favorites)
• contekst – lemmikfilmide jagamine üle rakenduse
• api – välise andmeallika funktsioonid

Selline struktuur teeb koodi arusaadavaks ja organiseerituks.

2. App.jsx

App.jsx on rakenduse põhikomponent.
See kasutab React Routerit, et navigeerida erinevate lehtede vahel.

App.jsx:

“Kodu” lehel kuvatakse populaarsed filmid.
“Otsing” lehel saab kasutaja otsida filme.
“Lemmikud” lehel kuvatakse kasutaja lemmikfilmid.

3. Home.jsx ja Search.jsx

Home ja Search komponendis kasutatakse state’i, et hoida:

• filmide nimekirja
• otsingusõna
• laadimise staatust

Näide (Search.jsx):

Kui state muutub (nt otsingusõna), uuendab React automaatselt kuvatavat nimekirja.

Avalehe ja otsingu kujundus:

4. Filmide laadimine API kaudu

Filmid saadakse välisest andmeallikast – TVMaze API.

api.js:

Otsing toimub samuti API kaudu:

Täiskood:

6. MovieCard.jsx

MovieCard vastutab ühe filmi info kuvamise eest (pealkiri, pilt, nupp).

MovieCard.jsx:

Igal kaardil on nupp:

• Add to favorites
• Remove from favorites

Kujundus:

7. Lemmikud (Favorites + Context)

Lemmikfilmide hoidmiseks kasutatakse React Contexti.

Moviecontext.jsx:

import { createContext, useContext, useEffect, useState } from "react";

const MovieContext = createContext(null);

export const useMovieContext = () => useContext(MovieContext);

export const MovieProvider = ({ children }) => {
    const [favorites, setFavorites] = useState([]);

    useEffect(() => {
        const saved = localStorage.getItem("favorites");
        if (saved) setFavorites(JSON.parse(saved));
    }, []);

    useEffect(() => {
        localStorage.setItem("favorites", JSON.stringify(favorites));
    }, [favorites]);

    const addToFavorites = (movie) => {
        setFavorites((prev) => {
            if (prev.some((m) => m.id === movie.id)) return prev;
            return [...prev, movie];
        });
    };

    const removeFromFavorites = (id) => {
        setFavorites((prev) => prev.filter((m) => m.id !== id));
    };

    const isFavorite = (id) => favorites.some((m) => m.id === id);

    return (
        <MovieContext.Provider value={{ favorites, addToFavorites, removeFromFavorites, isFavorite }}>
            {children}
        </MovieContext.Provider>
    );
};

Favorites lehel kuvatakse ainult kasutaja lisatud filmid.
Andmed salvestatakse localStorage’i, et need säiliksid ka pärast lehe värskendamist.

Kujundus:

GITHUB KOOD