Mis on React?
React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse peamiselt kaasaegsete veebirakenduste arendamiseks, kus sisu peab muutuma kiiresti ilma lehe uuesti laadimiseta. React võimaldab jagada kasutajaliidese väikesteks komponentideks, mida saab korduvalt kasutada. See teeb koodi paremini organiseerituks ja lihtsamini hooldatavaks. React uuendab ainult neid lehe osi, mis muutuvad, mis teeb rakenduse kiiremaks.
Mis on komponent?
Komponent on iseseisev ja taaskasutatav kasutajaliidese osa React rakenduses, mis võib kuvada näiteks nuppu, kaarti või nimekirja.
Milleks kasutatakse state’i?
State’i kasutatakse andmete salvestamiseks komponendi sees, mis võivad aja jooksul muutuda ja mõjutavad seda, mida kasutajale ekraanil kuvatakse.
Miks React on kasulik veebirakenduste tegemiseks?
React on kasulik, sest see võimaldab luua kiireid ja interaktiivseid veebirakendusi, kus kood on jagatud väikesteks komponentideks ja kasutajaliides uuendub automaatselt ilma lehe uuesti laadimiseta.
Lemmikute komponenti kasutatakse kasutaja lemmikfilmide kuvamiseks. Komponendis kutsub funktsioon useMovieContext() välja nimekirja filmidest, mille kasutaja on lemmikutesse lisanud. Seejärel kontrollitakse, kas nimekiri sisaldab andmeid – kui jah, kuvatakse pealkiri ja filmide ruudustik.
Filmide kuvamiseks kasutatakse map() meetodit, mis läbib massiivi ja loob iga filmi jaoks MovieCard komponendi. Filmi info antakse edasi propside kaudu (movie={movie}). React nõuab loendite korrektseks töötlemiseks ka unikaalset key atribuuti.
Kui lemmikute nimekiri on tühi, ei kuvata filme, vaid näidatakse teadet, et kasutajal pole veel ühtegi lemmikut lisatud.
Komponent Home haldab rakenduse avalehte. Selle ülesanne on kuvada filmide loend, pakkuda otsinguvõimalust ning hallata erinevaid kasutajaliidese olekuid.
Andmete hoidmiseks kasutatakse useState hook’i.
searchQuerysalvestab kasutaja sisestatud otsingutekstimoviessisaldab kuvatavaid filmeerrorhoiab veateadetloadingnäitab, kas andmeid parasjagu laaditakse
useEffect hook’i abil laaditakse populaarsed filmid automaatselt kohe, kui leht esmakordselt avaneb. Selleks kutsutakse välja funktsioon getPopularMovies(). Kui päring õnnestub, salvestatakse saadud andmed movies olekusse. Kui tekib viga, uuendatakse error olekut. Laadimise lõpus muudetakse loading väärtuseks false.
Funktsioon handleSearch käivitub siis, kui kasutaja saadab otsinguvormi. See peatab vormi vaikimisi käitumise, kontrollib sisestatud teksti olemasolu ja veendub, et laadimine ei ole juba käimas. Seejärel kutsutakse searchMovies(searchQuery), mille tulemused salvestatakse movies olekusse. Vigade korral kuvatakse vastav teade.
Renderdamisel kuvatakse otsinguvorm koos sisestusväljaga ja nupuga. Sisendi väärtus on seotud state’iga (value) ning muudatusi jälgitakse onChange abil.
Kui tekib viga, kuvatakse vastav teade. Kasutatakse tingimuslikku renderdamist: kui loading on tõene, näidatakse teksti “Laadimine…”. Kui laadimine on lõppenud, kuvatakse filmide ruudustik.
Filmide kuvamiseks kasutatakse taas map() meetodit, mis loob iga filmi jaoks MovieCard komponendi. Filmiandmed edastatakse propside kaudu ning iga elemendi jaoks määratakse unikaalne key, et tagada korrektne renderdamine Reactis.
MovieCard komponenti kasutatakse ühe konkreetse filmi andmete kuvamiseks. See saab filmiobjekti props’i kaudu (movie).
Komponent kasutab useMovieContext() hook’i, et hallata lemmikutega seotud tegevusi: kontrollida, kas film on lemmikutes, ning seda vajadusel lisada või eemaldada. Funktsioon isFavorite(movie.id) määrab, kas vastav film kuulub lemmikute hulka.
Funktsioon handleFavoriteClick käivitub nupule vajutamisel. See peatab brauseri vaikekäitumise ning kontrollib filmi hetkeseisu. Kui film on juba lemmikutes, kutsutakse välja removeFromFavorites; kui ei ole, siis addToFavorites.
Renderdamisel kuvatakse filmi plakat, mis laetakse URL-i kaudu. Pildi peale on paigutatud südamekujuline nupp. Kui film on lemmik, lisatakse sellele nupule aktiivne klass, et muuta selle visuaalset stiili.
Kaardi alumises osas kuvatakse filmi põhiinfo: pealkiri ja väljalaskeaasta. Aasta saadakse kuupäeva väärtusest, kasutades split() meetodit.
See komponent annab kasutajale võimaluse lisada ja eemaldada filme lemmikute seast otse filmi kaardi vaates.
