1.0Artjom Põldsaar Portfoliohttps://artjompoldsaar24.thkit.ee/wp/engadminhttps://artjompoldsaar24.thkit.ee/wp/eng/author/admin/React - Artjom Põldsaar Portfoliorich600338<blockquote class="wp-embedded-content" data-secret="nKN6jFf0XD"><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=nKN6jFf0XD" width="600" height="338" title="“React” — Artjom Põldsaar Portfolio" data-secret="nKN6jFf0XD" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript">
/* <![CDATA[ */
/*! This file is auto-generated */
!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);
//# sourceURL=https://artjompoldsaar24.thkit.ee/wp/eng/wp-includes/js/wp-embed.min.js
/* ]]> */
</script>
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öötab komponentide süsteemiga, mis tähendab, et leht on jagatud väikesteks osadeks.Reacti kasutatakse palju tänapäeva 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õisted JSXJSX on viis kirjutada HTML-i sarnast koodi JavaScripti sees. ComponentKomponent on nagu väike tükk veebilehest, millel on oma ülesanne. Näiteks nupp või kaart filmi infoga.Komponent on eraldi kasutajaliidese osa, mida saab uuesti kasutada. PropsProps on andmed, mida üks komponent annab teisele. StateState hoiab andmeid, mis võivad muutuda. Kui state muutub, siis React uuendab automaatselt seda osa lehelt.State on muutuja komponendi sees, mis võib ajas muutuda. React projekti loomine React projekti saab teha käsurealt. See loob uue projekti ja paneb selle tööle brauseris. Komponentide kasutamine Reactis Selles projektis on kolm peamist komponenti: Rakenduse käivitamine (main.jsx) Failis main.jsx käivitatakse kogu rakendus: BrowserRouter võimaldab lehtede vahel liikumist.App on peamine komponent.StrictMode aitab arendamisel vigu leida. App.jsx – Rakenduse struktuur MovieProvider annab kogu rakendusele ligipääsu lemmikfilmide state’ile.NavBar on ülemine menüü.Routes määrab, milline leht kuvatakse. NavBar.jsx – Navigeerimine NavBar võimaldab liikuda: Home.jsx – Filmide kuvamine ja otsing Home komponendis on mitu state’i: Populaarsete filmide laadimine: Kui leht avaneb, laetakse populaarsed filmid API-st. api.js – 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 – Ühe filmi kuvamine MovieCard kuvab filmi pildi, pealkirja ja väljalaskeaasta. Lemmikute süsteem (Context API) Failis MovieContext: Lemmikutese lisamine: Eemaldamine: Kontroll kas on lemmik: Favorites.jsx – Lemmikute kuvamine Siin kuvatakse kõik filmid, mis on lisatud lemmikutesse. Kui lemmikuid pole, kuvatakse teade: