React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse dünaamiliste ja interaktiivsete veebirakenduste arendamiseks. React võimaldab jagada liidese väikesteks taaskasutatavateks osadeks ehk komponentideks. See teeb koodi paremini hallatavaks ja lihtsustab rakenduse uuendamist. React parandab jõudlust tänu virtuaalsele DOM-ile.
Mis on komponent?
Komponent on iseseisev UI osa, mida saab korduvalt kasutada.
Milleks kasutatakse state’i?
State’i kasutatakse komponendi dünaamiliste andmete ja muutuste haldamiseks.
Miks on React kasulik veebirakenduste loomisel?
React teeb arenduse kiiremaks, koodi loetavamaks ja rakendused jõudluselt efektiivsemaks.
Lemmikute komponenti kasutatakse lemmikfilmide kuvamiseks. Komponendi sees otsib funktsioon useMovieContext() kasutaja lemmikute hulka lisatud filmide nimekirja. Seejärel tehakse kontroll: kui lemmikute nimekiri on olemas, kuvatakse lehel pealkiri ja filmide ruudustik.
Filmide kuvamiseks kasutatakse meetodit map(), mis itereerib massiivi ja loob iga filmi jaoks MovieCard komponendi. Filmiandmed edastatakse komponendile propside (movie={movie}) kaudu. React vajab loendite korrektseks käsitlemiseks võtme omadust.
Kui lemmikfilme pole, kuvatakse nimekirja asemel teade, mis näitab, et kasutaja pole veel filme lemmikutesse lisanud.
Komponent Home vastutab rakenduse avalehe eest. See kuvab filmide loendi, otsingufunktsiooni ja mitmesuguseid liidese olekuid.
Komponent kasutab andmete salvestamiseks funktsiooni useState. searchQuery salvestab teksti, mille kasutaja otsinguribale sisestab. Movies sisaldab kuvatavate filmide loendit. Error salvestab veateate. Loading näitab, kas andmeid laaditakse.
Funktsiooni useEffect abil laaditakse populaarsed filmid automaatselt lehe esmakordsel avamisel. Seda tehakse funktsiooni getPopularMovies() kutsumisega. Kui laadimine õnnestub, salvestatakse filmid kategooriasse movies. Vea ilmnemisel määratakse teade väärtuseks error. Kui laadimine on lõppenud, muudetakse laadimisolek väärtuseks false.
Funktsioon handleSearch käivitatakse otsinguvormi esitamisel. See tühistab vormi vaikekäitumise, kontrollib, kas tekst on sisestatud ja kas laadimine on juba pooleli. Seejärel kutsutakse funktsiooni searchMovies(searchQuery). Otsingutulemused salvestatakse kategooriasse movies. Vea ilmnemisel kuvatakse teade.
Märgistus kuvab otsinguvormi sisestusvälja ja nupuga. Sisendväärtus on seotud olekuga väärtuse kaudu ja tekstimuudatusi käsitletakse onChange’i kaudu.
Vea korral kuvatakse teade. Sellisel juhul kasutatakse tingimuslikku renderdamist: kui laadimine on tõene, kuvatakse teade “Laadimine…”. Kui laadimine on lõppenud, kuvatakse filmiruudustik.
Filmide kuvamiseks kasutatakse meetodit map(), luues iga filmi jaoks MovieCard komponendi. Filmiandmed edastatakse propside kaudu ja võtit kasutatakse loendi korrektse funktsionaalsuse tagamiseks Reactis.
MovieCard komponenti kasutatakse üksiku filmi kohta teabe kuvamiseks. See aktsepteerib filmiobjekti props’i (movie) kaudu.
Komponent kasutab useMovieContext() funktsiooni, et pakkuda funktsioone lemmikutega töötamiseks: filmi kontrollimiseks, lisamiseks ja eemaldamiseks. isFavorite(movie.id) määrab, kas film on lemmik.
Funktsioon onFavoriteClick kutsutakse välja nupu klõpsamisel. See tühistab brauseri vaiketoimingu ja kontrollib filmi olekut. Kui film on juba lemmik, kutsutakse välja removeFromFavorites; vastasel juhul kutsutakse välja addToFavorites.
Märgistus kuvab URL-ilt laaditud filmiplakati. Pildi kohale asetatakse südamekujuline nupp. Kui film on lemmik, lisatakse nupule aktiivne klass, mis võimaldab selle välimust kohandada.
Allpool kuvatakse filmi kohta käiv teave: pealkiri ja ilmumisaasta. Aasta ekstraheeritakse kuupäevast split() abil.
Komponent võimaldab kasutajal filme lemmikutesse lisada ja eemaldada otse kaardilt.
