{"version":"1.0","provider_name":"Artjom P\u00f5ldsaar Portfolio","provider_url":"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng","author_name":"admin","author_url":"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/author\/admin\/","title":"React - Artjom P\u00f5ldsaar Portfolio","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"u9wcT3Z0H1\"><a href=\"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/react\/\">React<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/react\/embed\/#?secret=u9wcT3Z0H1\" width=\"600\" height=\"338\" title=\"&#8220;React&#8221; &#8212; Artjom P\u00f5ldsaar Portfolio\" data-secret=\"u9wcT3Z0H1\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/\/# sourceURL=https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/wp-includes\/js\/wp-embed.min.js\n\/* ]]> *\/\n<\/script>\n","description":"Mis on React? React on JavaScripti teek, millega tehakse veebilehtede kasutajaliideseid.Reactiga saab teha selliseid veebirakendusi, mis muutuvad ilma et terve leht uuesti laadiks.See t\u00f6\u00f6tab komponentide s\u00fcsteemiga, mis t\u00e4hendab, et leht on jagatud v\u00e4ikesteks osadeks.Reacti kasutatakse palju t\u00e4nap\u00e4eva veebiarenduses, sest see teeb arendamise lihtsamaks ja kiiremaks.React teeb koodi organiseeritumaks ja lihtsamini hallatavaks. Samuti muudab see veebilehe kiiremaks, sest see ei lae tervet lehte iga kord uuesti. M\u00f5isted JSXJSX on viis kirjutada HTML-i sarnast koodi JavaScripti sees. ComponentKomponent on nagu v\u00e4ike t\u00fckk veebilehest, millel on oma \u00fclesanne. N\u00e4iteks nupp v\u00f5i kaart filmi infoga.Komponent on eraldi kasutajaliidese osa, mida saab uuesti kasutada. PropsProps on andmed, mida \u00fcks komponent annab teisele. StateState hoiab andmeid, mis v\u00f5ivad muutuda. Kui state muutub, siis React uuendab automaatselt seda osa lehelt.State on muutuja komponendi sees, mis v\u00f5ib ajas muutuda. React projekti loomine React projekti saab teha k\u00e4surealt. See loob uue projekti ja paneb selle t\u00f6\u00f6le brauseris. Komponentide kasutamine Reactis Selles projektis on kolm peamist komponenti: Rakenduse k\u00e4ivitamine (main.jsx) Failis main.jsx k\u00e4ivitatakse kogu rakendus: BrowserRouter v\u00f5imaldab lehtede vahel liikumist.App on peamine komponent.StrictMode aitab arendamisel vigu leida. App.jsx \u2013 Rakenduse struktuur MovieProvider annab kogu rakendusele ligip\u00e4\u00e4su lemmikfilmide state\u2019ile.NavBar on \u00fclemine men\u00fc\u00fc.Routes m\u00e4\u00e4rab, milline leht kuvatakse. NavBar.jsx \u2013 Navigeerimine NavBar v\u00f5imaldab liikuda: Home.jsx \u2013 Filmide kuvamine ja otsing Home komponendis on mitu state\u2019i: Populaarsete filmide laadimine: Kui leht avaneb, laetakse populaarsed filmid API-st. api.js \u2013 Andmete toomine API-st Siin kasutatakse fetch, et tuua filmid The Movie Database API-st. Otsingufunktsioon Kui kasutaja kirjutab otsingusse ja vajutab Search, siis: Filmid uuendatakse vastavalt otsingule. MovieCard.jsx \u2013 \u00dche filmi kuvamine MovieCard kuvab filmi pildi, pealkirja ja v\u00e4ljalaskeaasta. Lemmikute s\u00fcsteem (Context API) Failis MovieContext: Lemmikutese lisamine: Eemaldamine: Kontroll kas on lemmik: Favorites.jsx \u2013 Lemmikute kuvamine Siin kuvatakse k\u00f5ik filmid, mis on lisatud lemmikutesse. Kui lemmikuid pole, kuvatakse teade:"}