{"id":1397,"date":"2026-02-25T22:37:50","date_gmt":"2026-02-25T19:37:50","guid":{"rendered":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397"},"modified":"2026-02-26T01:57:41","modified_gmt":"2026-02-25T22:57:41","slug":"react-project","status":"publish","type":"post","link":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397","title":{"rendered":"React project"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What is React?<\/h2>\n\n\n\n<p>React is a JavaScript library for creating user interfaces, especially for developing single-page applications (SPAs) React project.<br>It allows you to split the user interface into small, reusable components.<br>React uses a virtual DOM to make applications fast and efficient.<br>State and props can be used to dynamically display and update data.<br>It is used in many large web applications today.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a component?<\/h2>\n\n\n\n<p>A component is an independent and reusable part of the UI that returns JSX in React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is state used for?<\/h2>\n\n\n\n<p>State is used to store and dynamically update component data, which causes the UI to automatically re-render.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why is React useful for building web applications?<\/h2>\n\n\n\n<p>React makes code modular, fast, and easy to maintain, and allows you to create interactive user interfaces.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Important terms<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JSX <\/strong>&#8211; JavaScript extension that allows you to write HTML-like syntax inside React.<\/li>\n\n\n\n<li><strong>Component <\/strong>&#8211; reusable UI part that returns JSX.<\/li>\n\n\n\n<li><strong>Props <\/strong>&#8211; data passed from a parent component to a child component.<\/li>\n\n\n\n<li><strong>State <\/strong>&#8211; internal variable data of a component.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">React project creation<\/h2>\n\n\n\n<p>The most common way to start a React project is to use the create-react-app tool or the more modern Vite. (I used Visual Studio)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\n# Powershell\nnpx create-react-app movie-library\ncd movie-library\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1024x547.png\" alt=\"\" class=\"wp-image-1398\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1024x547.png 1024w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-300x160.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-768x411.png 768w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-150x80.png 150w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1536x821.png 1536w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1320x706.png 1320w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image.png 1734w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\n# Powershell\nnpm start\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"735\" height=\"313\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-7.png\" alt=\"\" class=\"wp-image-1405\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-7.png 735w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-7-300x128.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-7-150x64.png 150w\" sizes=\"auto, (max-width: 735px) 100vw, 735px\" \/><\/figure>\n\n\n\n<p><strong>Localhost:3000<\/strong> is being used<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-1024x637.png\" alt=\"\" class=\"wp-image-1399\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-1024x637.png 1024w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-300x187.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-768x478.png 768w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-150x93.png 150w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-1536x956.png 1536w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1-1320x822.png 1320w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-1.png 1557w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>about installing React: you can install it via docker but the easiest is just to download it via windows it&#8217;s down there:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-1024x445.png\" alt=\"\" class=\"wp-image-1400\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-1024x445.png 1024w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-300x130.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-768x334.png 768w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-150x65.png 150w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-1536x667.png 1536w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2-1320x574.png 1320w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-2.png 1885w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\">The link: <a href=\"https:\/\/nodejs.org\/en\/download\" type=\"link\" id=\"https:\/\/nodejs.org\/en\/download\">https:\/\/nodejs.org\/en\/download<\/a><br><em>you can just install via msi<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Components which we are using:<\/h2>\n\n\n\n<p class=\"has-small-font-size\"><em>after setting up our components there would be other stuff like other files and md file, you can just keep them<\/em> :3<\/p>\n\n\n\n<p><strong>App.js<\/strong> &#8211; This is the main (root) component. It holds all the application logic, manages the state of the movie list, and calls other components.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-3-1024x723.png\" alt=\"\" class=\"wp-image-1401\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-3-1024x723.png 1024w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-3-300x212.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-3-768x543.png 768w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-3-150x106.png 150w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-3.png 1172w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>MovieList.js<\/strong> &#8211;\u00a0Selle komponendi \u00fclesanne on v\u00f5tta vastu filmide nimekiri (props-ina) ja kuvada need. See toimib n-\u00f6 konteinerina filmikaartidele.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"416\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-4.png\" alt=\"\" class=\"wp-image-1402\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-4.png 671w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-4-300x186.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-4-150x93.png 150w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/figure>\n\n\n\n<p><strong>MovieCard.js<\/strong> &#8211; This is the smallest component, responsible for displaying information about a specific movie (image, title, year). It is used repeatedly for each movie.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"354\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-5.png\" alt=\"\" class=\"wp-image-1403\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-5.png 691w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-5-300x154.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-5-150x77.png 150w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using State to display movies<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: javafx; title: ; notranslate\" title=\"\">\nconst movies = &#x5B;\n  { id: 1, title: &quot;Inception&quot;, image: &quot;https:\/\/m.media-amazon.com\/images\/I\/912AErFSBHL._AC_SL1500_.jpg&quot; },\n  { id: 2, title: &quot;Interstellar&quot;, image: &quot;https:\/\/upload.wikimedia.org\/wikipedia\/en\/b\/bc\/Interstellar_film_poster.jpg&quot; },\n  { id: 3, title: &quot;The Matrix&quot;, image: &quot;https:\/\/m.media-amazon.com\/images\/I\/51EG732BV3L.jpg&quot; },\n  { id: 4, title: &quot;Avatar&quot;, image: &quot;https:\/\/m.media-amazon.com\/images\/I\/41kTVLeW1CL._AC_.jpg&quot; },\n  { id: 5, title: &quot;Titanic&quot;, image: &quot;https:\/\/m.media-amazon.com\/images\/I\/811lT7khIrL._SL1500_.jpg&quot; }\n];\n<\/pre><\/div>\n\n\n<p class=\"has-small-font-size\">If you want images displayed you will have to copy and paste from image url<\/p>\n\n\n\n<p><strong>State usage:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: javafx; title: ; notranslate\" title=\"\">\nconst &#x5B;movieList, setMovieList] = useState(movies);\n<\/pre><\/div>\n\n\n<p>When the state changes, the UI is automatically re-rendered.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a search function<\/h2>\n\n\n\n<p>To add a search function, we need two things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A place where the user can type (input field).<\/li>\n\n\n\n<li>A function that filters movies according to the text entered.<\/li>\n<\/ol>\n\n\n\n<p>This is usually done by creating a new state variable searchTerm and using an API query or the filter() method.<\/p>\n\n\n\n<p><strong>Logic:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The user types a word (e.g., &#8220;Batman&#8221;) into the search box.<\/li>\n\n\n\n<li>The onChange event updates the state of searchTerm.<\/li>\n\n\n\n<li>Pressing the search button triggers a function that searches for movies (either from the API or from an existing array) whose title contains the word &#8220;Batman&#8221;.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Input:<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\n&lt;input\n  type=&quot;text&quot;\n  placeholder=&quot;Search movie...&quot;\n  onChange={(e) =&gt; setSearch(e.target.value)}\n\/&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Filtering:<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nconst filteredMovies = movieList.filter(movie =&gt;\n  movie.title.toLowerCase().includes(search.toLowerCase())\n);\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Results:<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"435\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-1024x435.png\" alt=\"\" class=\"wp-image-1406\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-1024x435.png 1024w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-300x127.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-768x326.png 768w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-150x64.png 150w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-1536x652.png 1536w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8-1320x561.png 1320w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-8.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"438\" src=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-1024x438.png\" alt=\"\" class=\"wp-image-1407\" srcset=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-1024x438.png 1024w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-300x128.png 300w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-768x328.png 768w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-150x64.png 150w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-1536x656.png 1536w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9-1320x564.png 1320w, https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/image-9.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>What is React? React is a JavaScript library for creating user interfaces, especially for developing single-page applications (SPAs) React project.It allows you to split the user interface into small, reusable components.React uses a virtual DOM to make applications fast and efficient.State and props can be used to dynamically display and update data.It is used in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1415,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,26],"tags":[],"class_list":["post-1397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-maaratlemata","category-web-develompent"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React project - Hussein Tahmazov portfolio eng<\/title>\n<meta name=\"description\" content=\"A practical look at React basics. In this portfolio entry, I break down the creation of a Movie Database app, explaining JSX, Props.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React project - Hussein Tahmazov portfolio eng\" \/>\n<meta property=\"og:description\" content=\"A practical look at React basics. In this portfolio entry, I break down the creation of a Movie Database app, explaining JSX, Props.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397\" \/>\n<meta property=\"og:site_name\" content=\"Hussein Tahmazov portfolio eng\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-25T19:37:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-25T22:57:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"860\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hussein\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hussein\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397\"},\"author\":{\"name\":\"Hussein\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#\\\/schema\\\/person\\\/f75baafdedeb73cd9ef1d8d87311bbb0\"},\"headline\":\"React project\",\"datePublished\":\"2026-02-25T19:37:50+00:00\",\"dateModified\":\"2026-02-25T22:57:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397\"},\"wordCount\":475,\"image\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/02\\\/React_logo_wordmark-scaled.png\",\"articleSection\":[\"M\u00e4\u00e4ratlemata\",\"Web develompent\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397\",\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397\",\"name\":\"React project - Hussein Tahmazov portfolio eng\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/02\\\/React_logo_wordmark-scaled.png\",\"datePublished\":\"2026-02-25T19:37:50+00:00\",\"dateModified\":\"2026-02-25T22:57:41+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#\\\/schema\\\/person\\\/f75baafdedeb73cd9ef1d8d87311bbb0\"},\"description\":\"A practical look at React basics. In this portfolio entry, I break down the creation of a Movie Database app, explaining JSX, Props.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#primaryimage\",\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/02\\\/React_logo_wordmark-scaled.png\",\"contentUrl\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2026\\\/02\\\/React_logo_wordmark-scaled.png\",\"width\":2560,\"height\":860},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?p=1397#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#website\",\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/\",\"name\":\"Hussein Tahmazov portfolio eng\",\"description\":\"Junior Software Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/#\\\/schema\\\/person\\\/f75baafdedeb73cd9ef1d8d87311bbb0\",\"name\":\"Hussein\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g\",\"caption\":\"Hussein\"},\"sameAs\":[\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\"],\"url\":\"https:\\\/\\\/khusseintakhmazov24.thkit.ee\\\/wp\\\/eng\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React project - Hussein Tahmazov portfolio eng","description":"A practical look at React basics. In this portfolio entry, I break down the creation of a Movie Database app, explaining JSX, Props.","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:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397","og_locale":"en_GB","og_type":"article","og_title":"React project - Hussein Tahmazov portfolio eng","og_description":"A practical look at React basics. In this portfolio entry, I break down the creation of a Movie Database app, explaining JSX, Props.","og_url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397","og_site_name":"Hussein Tahmazov portfolio eng","article_published_time":"2026-02-25T19:37:50+00:00","article_modified_time":"2026-02-25T22:57:41+00:00","og_image":[{"width":2560,"height":860,"url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png","type":"image\/png"}],"author":"Hussein","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hussein","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#article","isPartOf":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397"},"author":{"name":"Hussein","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#\/schema\/person\/f75baafdedeb73cd9ef1d8d87311bbb0"},"headline":"React project","datePublished":"2026-02-25T19:37:50+00:00","dateModified":"2026-02-25T22:57:41+00:00","mainEntityOfPage":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397"},"wordCount":475,"image":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#primaryimage"},"thumbnailUrl":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png","articleSection":["M\u00e4\u00e4ratlemata","Web develompent"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397","url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397","name":"React project - Hussein Tahmazov portfolio eng","isPartOf":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#website"},"primaryImageOfPage":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#primaryimage"},"image":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#primaryimage"},"thumbnailUrl":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png","datePublished":"2026-02-25T19:37:50+00:00","dateModified":"2026-02-25T22:57:41+00:00","author":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#\/schema\/person\/f75baafdedeb73cd9ef1d8d87311bbb0"},"description":"A practical look at React basics. In this portfolio entry, I break down the creation of a Movie Database app, explaining JSX, Props.","breadcrumb":{"@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#primaryimage","url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png","contentUrl":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png","width":2560,"height":860},{"@type":"BreadcrumbList","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?p=1397#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng"},{"@type":"ListItem","position":2,"name":"React project"}]},{"@type":"WebSite","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#website","url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/","name":"Hussein Tahmazov portfolio eng","description":"Junior Software Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/#\/schema\/person\/f75baafdedeb73cd9ef1d8d87311bbb0","name":"Hussein","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e10dcd9bae99726932e7824a93117d2a279e021c0f4ff3cc2972016580127314?s=96&d=mm&r=g","caption":"Hussein"},"sameAs":["https:\/\/khusseintakhmazov24.thkit.ee\/wp"],"url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/wp-content\/uploads\/sites\/2\/2026\/02\/React_logo_wordmark-scaled.png","_links":{"self":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts\/1397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1397"}],"version-history":[{"count":4,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts\/1397\/revisions"}],"predecessor-version":[{"id":1414,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/posts\/1397\/revisions\/1414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=\/wp\/v2\/media\/1415"}],"wp:attachment":[{"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khusseintakhmazov24.thkit.ee\/wp\/eng\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}