{"id":1350,"date":"2026-02-19T11:41:55","date_gmt":"2026-02-19T09:41:55","guid":{"rendered":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350"},"modified":"2026-03-05T12:07:10","modified_gmt":"2026-03-05T10:07:10","slug":"react-projekt","status":"publish","type":"page","link":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350","title":{"rendered":"React projekt"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Mis on React?<\/strong><\/h3>\n\n\n\n<p>React on populaarne JavaScripti teek, mida kasutatakse kasutajaliideste loomiseks. See p\u00f5hineb komponentidel, mis v\u00f5imaldab arendajatel jagada keerulised veebirakendused v\u00e4ikesteks taaskasutatavateks osadeks. Reacti peamine eelis on selle efektiivsus andmete uuendamisel ja kuvamisel, muutes d\u00fcnaamilised veebirakendused kiireks ja sujuvaks<\/p>\n\n\n\n<p><strong>Mis on komponent?<\/strong><br>See on modulaarne ja iseseisev osa rakendusest (nt nupud, men\u00fc\u00fcd, kaardid), mida saab uuesti kasutada ja mis sisaldab oma loogikat ja v\u00e4limust<\/p>\n\n\n\n<p><strong>Milleks kasutatakse state\u2019i?<\/strong> <br><em>State<\/em> on objekt, mis hoiab andmeid, mis v\u00f5ivad rakenduse t\u00f6\u00f6 ajal muutuda (nt otsingus\u00f5na v\u00f5i filmide nimekiri). Kui <em>state<\/em> muutub, uuendab React automaatselt ekraanil olevat pilti<\/p>\n\n\n\n<p><strong>Miks React on kasulik?<\/strong><br>See v\u00f5imaldab luua keerulisi liideseid koodi korduvkasutamise kaudu, on v\u00e4ga kiire t\u00e4nu Virtual DOM-ile ning omab suurt kogukonda ja \u00f6kos\u00fcsteemi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>M\u00f5isted<\/strong><\/h2>\n\n\n\n<p><strong>JSX:<\/strong> JavaScripti laiendus, mis v\u00f5imaldab kirjutada HTML-sarnast koodi otse JavaScripti faili.<\/p>\n\n\n\n<p><strong>Component:<\/strong> Rakenduse ehitusplokk, mis on tavaliselt JavaScripti funktsioon, mis tagastab JSX-i.<\/p>\n\n\n\n<p><strong>Props:<\/strong> L\u00fchend s\u00f5nast <em>properties<\/em>; neid kasutatakse andmete edastamiseks \u00fclemkomponendilt alamkomponendile.<\/p>\n\n\n\n<p><strong>State:<\/strong> Komponendi sise-m\u00e4lu, mis hoiab muutuvaid andmeid ja p\u00f5hjustab muutmise korral UI v\u00e4rskendamise.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">React projekti loomine<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nnpm create vite@latest front-end\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"454\" src=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png\" alt=\"\" class=\"wp-image-1352\" srcset=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png 621w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E-300x219.png 300w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E-150x110.png 150w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Komponentide kasutamine React<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>App.js<\/strong><br>Rakenduse juurkomponent, mis haldab marsruutimist (routing) ja peamisi lehti (Home ja Favorites)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MovieList.js<\/strong><br>\u00dcksik komponent, mis vastutab \u00fche filmi info (pilt, pealkiri, aasta) kuvamise ja &#8220;lemmikuks&#8221; m\u00e4rkimise eest.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MovieCard.js<\/strong><br>Halda filmide nimekirja kuvamist, andmete laadimist API-st ja otsingufunktsiooni.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Failid<\/h2>\n\n\n\n<p><strong>Pealeht<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224303-1024x459.png\" alt=\"\" class=\"wp-image-1368\" srcset=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224303-1024x459.png 1024w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224303-300x134.png 300w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224303-768x344.png 768w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224303-150x67.png 150w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224303.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Lemmikleht<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113-1024x490.png\" alt=\"\" class=\"wp-image-1366\" srcset=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113-1024x490.png 1024w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113-300x144.png 300w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113-768x368.png 768w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113-150x72.png 150w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113-1536x736.png 1536w, https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-19-224113.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>MovieCard.jsx<\/strong><\/h4>\n\n\n\n<p>Kood vastutab konkreetse filmi kaardi kuvamise ja selle lisamise eest \u201eLemmikute\u201c hulka.<\/p>\n\n\n\n<p>Kontekstiga t\u00f6\u00f6tamine (globaalne seisund)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst {isFavorite, addToFavorites, removeFromFavorites} = useMovieContext()\nconst favorite = isFavorite(movie.id)\n<\/pre><\/div>\n\n\n<p>Nupu \u201eS\u00fcdameke\u201d loogika<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction onFavoriteClick(e) {\n    e.preventDefault()\n    if (favorite) removeFromFavorites(movie.id)\n    else addToFavorites(movie)\n}\n<\/pre><\/div>\n\n\n<p>T\u00e4ielik kood<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport &quot;..\/css\/MovieCard.css&quot;\nimport { useMovieContext } from &quot;..\/contexts\/MovieContext&quot;\n\nfunction MovieCard({movie}) {\n    const {isFavorite, addToFavorites, removeFromFavorites} = useMovieContext()\n    const favorite = isFavorite(movie.id)\n\n    function onFavoriteClick(e) {\n        e.preventDefault()\n        if (favorite) removeFromFavorites(movie.id)\n        else addToFavorites(movie)\n    }\n\n    return &lt;div className=&quot;movie-card&quot;&gt;\n        &lt;div className=&quot;movie-poster&quot;&gt;\n            &lt;img src={`https:\/\/image.tmdb.org\/t\/p\/w500${movie.poster_path}`} alt={movie.title}\/&gt;\n            &lt;div className=&quot;movie-overlay&quot;&gt;\n                &lt;button className={`favorite-btn ${favorite ? &quot;active&quot; : &quot;&quot;}`} onClick={onFavoriteClick}&gt;\n                    \u2665\n                &lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div className=&quot;movie-info&quot;&gt;\n            &lt;h3&gt;{movie.title}&lt;\/h3&gt;\n            &lt;p&gt;{movie.release_date?.split(&quot;-&quot;)&#x5B;0]}&lt;\/p&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n}\n\nexport default MovieCard\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>App.jsx<\/strong><\/h4>\n\n\n\n<p>See kood on rakenduse <strong>App.jsx<\/strong> juurkomponent, mis paneb kokku kogu programmi struktuuri, haldab lehtede vahel liikumist ja jagab andmeid.<\/p>\n\n\n\n<p>T\u00e4ielik kood<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport &quot;.\/css\/App.css&quot;;\nimport Favorites from &quot;.\/pages\/Favorites&quot;;\nimport Home from &quot;.\/pages\/Home&quot;;\nimport { Routes, Route } from &quot;react-router-dom&quot;;\nimport { MovieProvider } from &quot;.\/contexts\/MovieContext&quot;;\nimport NavBar from &quot;.\/components\/NavBar&quot;;\n\nfunction App() {\n  return (\n    &lt;MovieProvider&gt;\n      &lt;NavBar \/&gt;\n      &lt;main className=&quot;main-content&quot;&gt;\n        &lt;Routes&gt;\n          &lt;Route path=&quot;\/&quot; element={&lt;Home \/&gt;} \/&gt;\n          &lt;Route path=&quot;\/favorites&quot; element={&lt;Favorites \/&gt;} \/&gt;\n        &lt;\/Routes&gt;\n      &lt;\/main&gt;\n    &lt;\/MovieProvider&gt;\n  );\n}\n\nexport default App;\n\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Home.jsx<\/strong><\/h4>\n\n\n\n<p>Seisundite haldamine (useState)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst &#x5B;searchQuery, setSearchQuery] = useState(&quot;&quot;);\nconst &#x5B;movies, setMovies] = useState(&#x5B;]);\nconst &#x5B;loading, setLoading] = useState(true);\n<\/pre><\/div>\n\n\n<p>Populaarsete filmide laadimine (useEffect)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nuseEffect(() =&gt; {\n  const loadPopularMovies = async () =&gt; {\n    const popularMovies = await getPopularMovies();\n    setMovies(popularMovies);\n  };\n  loadPopularMovies();\n}, &#x5B;]);\n<\/pre><\/div>\n\n\n<p>Otsingufunktsiooni k\u00e4ivitamine (handleSearch)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst handleSearch = async (e) =&gt; {\n  e.preventDefault();\n  const searchResults = await searchMovies(searchQuery);\n  setMovies(searchResults);\n};\n<\/pre><\/div>\n\n\n<p>D\u00fcnaamiline kuvamine (Konditsionaalne renderdamine)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{loading ? (\n  &amp;lt;div&gt;Loading...&amp;lt;\/div&gt;\n) : (\n  &amp;lt;div className=&quot;movies-grid&quot;&gt;\n    {movies.map((movie) =&gt; &amp;lt;MovieCard movie={movie} key={movie.id} \/&gt;)}\n  &amp;lt;\/div&gt;\n)}\n<\/pre><\/div>\n\n\n<p>T\u00e4ielik kood<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport MovieCard from &quot;..\/components\/MovieCard&quot;;\nimport { useState, useEffect } from &quot;react&quot;;\nimport { searchMovies, getPopularMovies } from &quot;..\/services\/api&quot;;\nimport &quot;..\/css\/Home.css&quot;;\n\nfunction Home() {\n  const &#x5B;searchQuery, setSearchQuery] = useState(&quot;&quot;);\n  const &#x5B;movies, setMovies] = useState(&#x5B;]);\n  const &#x5B;error, setError] = useState(null);\n  const &#x5B;loading, setLoading] = useState(true);\n\n  useEffect(() =&gt; {\n    const loadPopularMovies = async () =&gt; {\n      try {\n        const popularMovies = await getPopularMovies();\n        setMovies(popularMovies);\n      } catch (err) {\n        console.log(err);\n        setError(&quot;Failed to load movies...&quot;);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    loadPopularMovies();\n  }, &#x5B;]);\n\n  const handleSearch = async (e) =&gt; {\n    e.preventDefault();\n    if (!searchQuery.trim()) return\n    if (loading) return\n\n    setLoading(true)\n    try {\n        const searchResults = await searchMovies(searchQuery)\n        setMovies(searchResults)\n        setError(null)\n    } catch (err) {\n        console.log(err)\n        setError(&quot;Failed to search movies...&quot;)\n    } finally {\n        setLoading(false)\n    }\n  };\n\n  return (\n    &lt;div className=&quot;home&quot;&gt;\n      &lt;form onSubmit={handleSearch} className=&quot;search-form&quot;&gt;\n        &lt;input\n          type=&quot;text&quot;\n          placeholder=&quot;Search for movies...&quot;\n          className=&quot;search-input&quot;\n          value={searchQuery}\n          onChange={(e) =&gt; setSearchQuery(e.target.value)}\n        \/&gt;\n        &lt;button type=&quot;submit&quot; className=&quot;search-button&quot;&gt;\n          Search\n        &lt;\/button&gt;\n      &lt;\/form&gt;\n\n        {error &amp;&amp; &lt;div className=&quot;error-message&quot;&gt;{error}&lt;\/div&gt;}\n\n      {loading ? (\n        &lt;div className=&quot;loading&quot;&gt;Loading...&lt;\/div&gt;\n      ) : (\n        &lt;div className=&quot;movies-grid&quot;&gt;\n          {movies.map((movie) =&gt; (\n            &lt;MovieCard movie={movie} key={movie.id} \/&gt;\n          ))}\n        &lt;\/div&gt;\n      )}\n    &lt;\/div&gt;\n  );\n}\n\nexport default Home;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><a href=\"https:\/\/github.com\/Polopo232\/Veebirakenduste\/tree\/main\/ReactProj\" type=\"link\" id=\"https:\/\/github.com\/Polopo232\/Veebirakenduste\/tree\/main\/ReactProj\">GITHUB<\/a><\/strong><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Mis on React? React on populaarne JavaScripti teek, mida kasutatakse kasutajaliideste loomiseks. See p\u00f5hineb komponentidel, mis v\u00f5imaldab arendajatel jagada keerulised veebirakendused v\u00e4ikesteks taaskasutatavateks osadeks. Reacti peamine eelis on selle efektiivsus andmete uuendamisel ja kuvamisel, muutes d\u00fcnaamilised veebirakendused kiireks ja sujuvaks Mis on komponent?See on modulaarne ja iseseisev osa rakendusest (nt nupud, men\u00fc\u00fcd, kaardid), mida saab [&hellip;]<\/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-1350","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React projekt - Nikita Nikiforov Portfolio<\/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:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React projekt - Nikita Nikiforov Portfolio\" \/>\n<meta property=\"og:description\" content=\"Mis on React? React on populaarne JavaScripti teek, mida kasutatakse kasutajaliideste loomiseks. See p\u00f5hineb komponentidel, mis v\u00f5imaldab arendajatel jagada keerulised veebirakendused v\u00e4ikesteks taaskasutatavateks osadeks. Reacti peamine eelis on selle efektiivsus andmete uuendamisel ja kuvamisel, muutes d\u00fcnaamilised veebirakendused kiireks ja sujuvaks Mis on komponent?See on modulaarne ja iseseisev osa rakendusest (nt nupud, men\u00fc\u00fcd, kaardid), mida saab [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350\" \/>\n<meta property=\"og:site_name\" content=\"Nikita Nikiforov Portfolio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T10:07:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png\" \/>\n\t<meta property=\"og:image:width\" content=\"621\" \/>\n\t<meta property=\"og:image:height\" content=\"454\" \/>\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=\"3 minutit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350\",\"url\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350\",\"name\":\"React projekt - Nikita Nikiforov Portfolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png\",\"datePublished\":\"2026-02-19T09:41:55+00:00\",\"dateModified\":\"2026-03-05T10:07:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350#primaryimage\",\"url\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png\",\"contentUrl\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png\",\"width\":621,\"height\":454},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?page_id=1350#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React projekt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/\",\"name\":\"Nikita Nikiforov Portfolio\",\"description\":\"Noorem Tarkvarendaja\",\"publisher\":{\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/#organization\",\"name\":\"Nikita Nikiforov Portfolio\",\"url\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/0ce66b2c514f64099fc903d1deea8e5c-150x137-removebg-preview.png\",\"contentUrl\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/0ce66b2c514f64099fc903d1deea8e5c-150x137-removebg-preview.png\",\"width\":150,\"height\":137,\"caption\":\"Nikita Nikiforov Portfolio\"},\"image\":{\"@id\":\"https:\\\/\\\/nikitanikiforov24.thkit.ee\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React projekt - Nikita Nikiforov Portfolio","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:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350","og_locale":"et_EE","og_type":"article","og_title":"React projekt - Nikita Nikiforov Portfolio","og_description":"Mis on React? React on populaarne JavaScripti teek, mida kasutatakse kasutajaliideste loomiseks. See p\u00f5hineb komponentidel, mis v\u00f5imaldab arendajatel jagada keerulised veebirakendused v\u00e4ikesteks taaskasutatavateks osadeks. Reacti peamine eelis on selle efektiivsus andmete uuendamisel ja kuvamisel, muutes d\u00fcnaamilised veebirakendused kiireks ja sujuvaks Mis on komponent?See on modulaarne ja iseseisev osa rakendusest (nt nupud, men\u00fc\u00fcd, kaardid), mida saab [&hellip;]","og_url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350","og_site_name":"Nikita Nikiforov Portfolio","article_modified_time":"2026-03-05T10:07:10+00:00","og_image":[{"width":621,"height":454,"url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350","url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350","name":"React projekt - Nikita Nikiforov Portfolio","isPartOf":{"@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350#primaryimage"},"image":{"@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350#primaryimage"},"thumbnailUrl":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png","datePublished":"2026-02-19T09:41:55+00:00","dateModified":"2026-03-05T10:07:10+00:00","breadcrumb":{"@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350#primaryimage","url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png","contentUrl":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2026\/02\/268B9656-4A67-44F2-8C66-A0D67C46EF2E.png","width":621,"height":454},{"@type":"BreadcrumbList","@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?page_id=1350#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"React projekt"}]},{"@type":"WebSite","@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/#website","url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/","name":"Nikita Nikiforov Portfolio","description":"Noorem Tarkvarendaja","publisher":{"@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"},{"@type":"Organization","@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/#organization","name":"Nikita Nikiforov Portfolio","url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/","logo":{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/0ce66b2c514f64099fc903d1deea8e5c-150x137-removebg-preview.png","contentUrl":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/0ce66b2c514f64099fc903d1deea8e5c-150x137-removebg-preview.png","width":150,"height":137,"caption":"Nikita Nikiforov Portfolio"},"image":{"@id":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages\/1350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1350"}],"version-history":[{"count":12,"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages\/1350\/revisions"}],"predecessor-version":[{"id":1436,"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages\/1350\/revisions\/1436"}],"wp:attachment":[{"href":"https:\/\/nikitanikiforov24.thkit.ee\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}