{"id":1164,"date":"2026-02-17T11:09:14","date_gmt":"2026-02-17T09:09:14","guid":{"rendered":"https:\/\/illiablahun24.thkit.ee\/wp\/?page_id=1164"},"modified":"2026-03-05T12:17:44","modified_gmt":"2026-03-05T10:17:44","slug":"rera","status":"publish","type":"page","link":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/","title":{"rendered":"React"},"content":{"rendered":"\n

React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse d\u00fcnaamiliste ja interaktiivsete veebirakenduste arendamiseks. React v\u00f5imaldab jagada liidese v\u00e4ikesteks taaskasutatavateks osadeks ehk komponentideks. See teeb koodi paremini hallatavaks ja lihtsustab rakenduse uuendamist. React parandab j\u00f5udlust t\u00e4nu virtuaalsele DOM-ile.<\/p>\n\n\n\n

Mis on komponent?<\/strong>
Komponent on iseseisev UI osa, mida saab korduvalt kasutada.<\/p>\n\n\n\n

Milleks kasutatakse state\u2019i?<\/strong>
State\u2019i kasutatakse komponendi d\u00fcnaamiliste andmete ja muutuste haldamiseks.<\/p>\n\n\n\n

Miks on React kasulik veebirakenduste loomisel?<\/strong>
React teeb arenduse kiiremaks, koodi loetavamaks ja rakendused j\u00f5udluselt efektiivsemaks.<\/p>\n\n\n\n

Lemmikute komponenti kasutatakse lemmikfilmide kuvamiseks. Komponendi sees otsib funktsioon useMovieContext() kasutaja lemmikute hulka lisatud filmide nimekirja. Seej\u00e4rel tehakse kontroll: kui lemmikute nimekiri on olemas, kuvatakse lehel pealkiri ja filmide ruudustik.<\/p>\n\n\n\n

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\u00e4sitlemiseks v\u00f5tme omadust.<\/p>\n\n\n\n

Kui lemmikfilme pole, kuvatakse nimekirja asemel teade, mis n\u00e4itab, et kasutaja pole veel filme lemmikutesse lisanud.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Komponent Home vastutab rakenduse avalehe eest. See kuvab filmide loendi, otsingufunktsiooni ja mitmesuguseid liidese olekuid.<\/p>\n\n\n\n

Komponent kasutab andmete salvestamiseks funktsiooni useState. searchQuery salvestab teksti, mille kasutaja otsinguribale sisestab. Movies sisaldab kuvatavate filmide loendit. Error salvestab veateate. Loading n\u00e4itab, kas andmeid laaditakse.<\/p>\n\n\n\n

Funktsiooni useEffect abil laaditakse populaarsed filmid automaatselt lehe esmakordsel avamisel. Seda tehakse funktsiooni getPopularMovies() kutsumisega. Kui laadimine \u00f5nnestub, salvestatakse filmid kategooriasse movies. Vea ilmnemisel m\u00e4\u00e4ratakse teade v\u00e4\u00e4rtuseks error. Kui laadimine on l\u00f5ppenud, muudetakse laadimisolek v\u00e4\u00e4rtuseks false.<\/p>\n\n\n\n

Funktsioon handleSearch k\u00e4ivitatakse otsinguvormi esitamisel. See t\u00fchistab vormi vaikek\u00e4itumise, kontrollib, kas tekst on sisestatud ja kas laadimine on juba pooleli. Seej\u00e4rel kutsutakse funktsiooni searchMovies(searchQuery). Otsingutulemused salvestatakse kategooriasse movies. Vea ilmnemisel kuvatakse teade.<\/p>\n\n\n\n

M\u00e4rgistus kuvab otsinguvormi sisestusv\u00e4lja ja nupuga. Sisendv\u00e4\u00e4rtus on seotud olekuga v\u00e4\u00e4rtuse kaudu ja tekstimuudatusi k\u00e4sitletakse onChange’i kaudu.<\/p>\n\n\n\n

Vea korral kuvatakse teade. Sellisel juhul kasutatakse tingimuslikku renderdamist: kui laadimine on t\u00f5ene, kuvatakse teade “Laadimine\u2026”. Kui laadimine on l\u00f5ppenud, kuvatakse filmiruudustik.<\/p>\n\n\n\n

Filmide kuvamiseks kasutatakse meetodit map(), luues iga filmi jaoks MovieCard komponendi. Filmiandmed edastatakse propside kaudu ja v\u00f5tit kasutatakse loendi korrektse funktsionaalsuse tagamiseks Reactis.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

MovieCard komponenti kasutatakse \u00fcksiku filmi kohta teabe kuvamiseks. See aktsepteerib filmiobjekti props’i (movie) kaudu.<\/p>\n\n\n\n

Komponent kasutab useMovieContext() funktsiooni, et pakkuda funktsioone lemmikutega t\u00f6\u00f6tamiseks: filmi kontrollimiseks, lisamiseks ja eemaldamiseks. isFavorite(movie.id) m\u00e4\u00e4rab, kas film on lemmik.<\/p>\n\n\n\n

Funktsioon onFavoriteClick kutsutakse v\u00e4lja nupu kl\u00f5psamisel. See t\u00fchistab brauseri vaiketoimingu ja kontrollib filmi olekut. Kui film on juba lemmik, kutsutakse v\u00e4lja removeFromFavorites; vastasel juhul kutsutakse v\u00e4lja addToFavorites.<\/p>\n\n\n\n

M\u00e4rgistus kuvab URL-ilt laaditud filmiplakati. Pildi kohale asetatakse s\u00fcdamekujuline nupp. Kui film on lemmik, lisatakse nupule aktiivne klass, mis v\u00f5imaldab selle v\u00e4limust kohandada.<\/p>\n\n\n\n

Allpool kuvatakse filmi kohta k\u00e4iv teave: pealkiri ja ilmumisaasta. Aasta ekstraheeritakse kuup\u00e4evast split() abil.<\/p>\n\n\n\n

Komponent v\u00f5imaldab kasutajal filme lemmikutesse lisada ja eemaldada otse kaardilt.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Github
https:\/\/github.com\/TwoSao\/ReactUl\/<\/a>
<\/p>\n","protected":false},"excerpt":{"rendered":"

React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse d\u00fcnaamiliste ja interaktiivsete veebirakenduste arendamiseks. React v\u00f5imaldab jagada liidese v\u00e4ikesteks taaskasutatavateks osadeks ehk komponentideks. See teeb koodi paremini hallatavaks ja lihtsustab rakenduse uuendamist. React parandab j\u00f5udlust t\u00e4nu virtuaalsele DOM-ile. Mis on komponent?Komponent on iseseisev UI osa, mida saab korduvalt kasutada. Milleks kasutatakse state\u2019i?State\u2019i kasutatakse komponendi d\u00fcnaamiliste andmete […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1164","page","type-page","status-publish","hentry"],"yoast_head":"\nReact - Illia Blahun portfoolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React - Illia Blahun portfoolio\" \/>\n<meta property=\"og:description\" content=\"React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse d\u00fcnaamiliste ja interaktiivsete veebirakenduste arendamiseks. React v\u00f5imaldab jagada liidese v\u00e4ikesteks taaskasutatavateks osadeks ehk komponentideks. See teeb koodi paremini hallatavaks ja lihtsustab rakenduse uuendamist. React parandab j\u00f5udlust t\u00e4nu virtuaalsele DOM-ile. Mis on komponent?Komponent on iseseisev UI osa, mida saab korduvalt kasutada. Milleks kasutatakse state\u2019i?State\u2019i kasutatakse komponendi d\u00fcnaamiliste andmete […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/\" \/>\n<meta property=\"og:site_name\" content=\"Illia Blahun portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T10:17:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png\" \/>\n\t<meta property=\"og:image:width\" content=\"747\" \/>\n\t<meta property=\"og:image:height\" content=\"654\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/\",\"url\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/\",\"name\":\"React - Illia Blahun portfoolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png\",\"datePublished\":\"2026-02-17T09:09:14+00:00\",\"dateModified\":\"2026-03-05T10:17:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/#primaryimage\",\"url\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png\",\"contentUrl\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png\",\"width\":747,\"height\":654},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/rera\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/\",\"name\":\"Illia Blahun portfoolio\",\"description\":\"Noorem tarvaarendaja\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/illiablahun24.thkit.ee\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React - Illia Blahun portfoolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/","og_locale":"et_EE","og_type":"article","og_title":"React - Illia Blahun portfoolio","og_description":"React on JavaScripti teek kasutajaliideste loomiseks. Seda kasutatakse d\u00fcnaamiliste ja interaktiivsete veebirakenduste arendamiseks. React v\u00f5imaldab jagada liidese v\u00e4ikesteks taaskasutatavateks osadeks ehk komponentideks. See teeb koodi paremini hallatavaks ja lihtsustab rakenduse uuendamist. React parandab j\u00f5udlust t\u00e4nu virtuaalsele DOM-ile. Mis on komponent?Komponent on iseseisev UI osa, mida saab korduvalt kasutada. Milleks kasutatakse state\u2019i?State\u2019i kasutatakse komponendi d\u00fcnaamiliste andmete […]","og_url":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/","og_site_name":"Illia Blahun portfoolio","article_modified_time":"2026-03-05T10:17:44+00:00","og_image":[{"width":747,"height":654,"url":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/","url":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/","name":"React - Illia Blahun portfoolio","isPartOf":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/#primaryimage"},"image":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/#primaryimage"},"thumbnailUrl":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png","datePublished":"2026-02-17T09:09:14+00:00","dateModified":"2026-03-05T10:17:44+00:00","breadcrumb":{"@id":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/illiablahun24.thkit.ee\/wp\/rera\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/#primaryimage","url":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png","contentUrl":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/FB9CB630-9C51-4F05-B05B-D5755BE21D6F.png","width":747,"height":654},{"@type":"BreadcrumbList","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/rera\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/illiablahun24.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"React"}]},{"@type":"WebSite","@id":"https:\/\/illiablahun24.thkit.ee\/wp\/#website","url":"https:\/\/illiablahun24.thkit.ee\/wp\/","name":"Illia Blahun portfoolio","description":"Noorem tarvaarendaja","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/illiablahun24.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"}]}},"_links":{"self":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/1164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/comments?post=1164"}],"version-history":[{"count":6,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/1164\/revisions"}],"predecessor-version":[{"id":1244,"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/1164\/revisions\/1244"}],"wp:attachment":[{"href":"https:\/\/illiablahun24.thkit.ee\/wp\/wp-json\/wp\/v2\/media?parent=1164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}