{"id":15077,"date":"2024-01-08T10:07:08","date_gmt":"2024-01-08T06:37:08","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner\/"},"modified":"2024-01-08T10:07:08","modified_gmt":"2024-01-08T06:37:08","slug":"%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner\/","title":{"rendered":"\u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0631 React \u0628\u0627 react-spinners \u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062e\u0627\u0631\u062c\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0622\u0646 \u0645\u062f\u062a\u06cc \u0637\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0634\u062f\u060c \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u062f\u0647 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u062d\u0641\u0638 \u062a\u0648\u062c\u0647 \u0622\u0646\u200c\u0647\u0627 \u0628\u0627 \u0644\u0648\u062f\u0631\u060c \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u062f\u0644\u067e\u0630\u06cc\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u06cc\u062f. \u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0641\u0647\u0645\u0646\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f \u0631\u0648\u06cc \u0628\u0647 \u062c\u0627\u06cc \u0631\u0641\u062a\u0646&#8230;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner\/#%d9%85%d8%b9%d8%b1%d9%81%db%8c\" >\u0645\u0639\u0631\u0641\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner\/#%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_sample_react_app\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 Sample React App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner\/#%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_react_spinner_%d8%af%d8%b1_%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87_%d9%85%d8%a7\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Spinner \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b1%d9%88%d8%b4-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%af%d8%b1-react-%d8%a8%d8%a7-react-spinner\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<h2 id=\"introduction\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b9%d8%b1%d9%81%db%8c\"><\/span>\u0645\u0639\u0631\u0641\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062e\u0627\u0631\u062c\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0622\u0646 \u0645\u062f\u062a\u06cc \u0637\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0634\u062f\u060c \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u062f\u0647 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u062d\u0641\u0638 \u062a\u0648\u062c\u0647 \u0622\u0646\u200c\u0647\u0627 \u0628\u0627 \u0644\u0648\u062f\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0644\u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0628\u0641\u0647\u0645\u0646\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc\u200c\u0627\u0641\u062a\u062f. \u0631\u0648\u06cc \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062d\u062f\u0633 \u0648 \u06af\u0645\u0627\u0646 \u0631\u0647\u0627 \u06a9\u0646\u06cc\u0645.<\/p>\n<blockquote>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0631\u0648\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0644\u0648\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u062d\u062a\u0648\u0627 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062e\u0627\u0631\u062c\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>react-spinners<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647<\/p>\n<\/blockquote>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0638\u0648\u0631 &#8211; \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0648\u0686\u06a9 \u0631\u0627 \u06a9\u0647 \u0628\u0647 \u0646\u0642\u0644 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u062f \u060c \u0628\u0627 \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0646\u0642\u0644 \u0642\u0648\u0644 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a \u060c \u0645\u06cc \u0633\u0627\u0632\u06cc\u0645:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/how-to-create-a-loading-animation-in-react-from-scratch-2.gif\" alt=\"react-loading-animation-example\" title=\"\"><\/p>\n<blockquote>\n<p>\u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u067e\u06cc\u0646\u0631\u0647\u0627 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u06a9\u0633\u0628 \u06a9\u0646\u06cc\u062f \u060c \u0645\u0627 \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f <em>&#8220;\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0648\u0627\u06a9\u0646\u0634 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f&#8221;<\/em>!<\/p>\n<\/blockquote>\n<h2 id=\"creatingasamplereactapp\"><span class=\"ez-toc-section\" id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_sample_react_app\"><\/span>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 Sample React App<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc React \u062e\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.  \u0627\u0635\u0648\u0644\u0627\u064b \u0645\u0627 \u062f\u0648 \u062a\u0627 \u062f\u0627\u0631\u06cc\u0645 <code>&lt;div&gt;<\/code> \u0639\u0646\u0627\u0635\u0631 \u062f\u0631 <em>\u0648\u0627\u0644\u062f\u06cc\u0646<\/em> <code>&lt;div&gt;<\/code>  (\u0628\u0647 \u062e\u0627\u0637\u0631 \u0633\u0627\u062f\u06af\u06cc) &#8211; \u06cc\u06a9\u06cc \u0627\u0633\u062a <code>loader-container<\/code> \u0648 \u062f\u0648\u0645\u06cc \u0627\u0633\u062a <code>main-content<\/code>:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> App = <span class=\"hljs-function\">() =&gt;<\/span> {\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"loader-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"spinner\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"main-content\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello World!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          This is a demo Project to show how to add animated loading with React.\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"buttons\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Read Article<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn get-quote\"<\/span>&gt;<\/span>\n            Generate Quote\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"quote-section\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">blockquote<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"quote\"<\/span>&gt;<\/span>\n            If you do not express your own original ideas, if you do not listen\n            to your own being, you will have betrayed yourself.\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">blockquote<\/span>&gt;<\/span>\n          - <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"author\"<\/span>&gt;<\/span>Rollo May<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/pre>\n<p>\u062a\u0627 \u06a9\u0646\u0648\u0646\u060c \u0645\u0627 \u0641\u0642\u0637 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>&lt;div&gt;<\/code> \u0628\u0631\u0627\u06cc \u0644\u0648\u062f\u0631 \u0645\u0627  \u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0648\u0642\u062a\u06cc \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u062d\u062a\u0648\u0627 \u0628\u0627\u0631\u0647\u0627\u06cc \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0622\u0646 \u0631\u0627 \u062a\u062d\u0631\u06cc\u06a9 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"alert alert-note\">\n<div class=\"flex\">\n<div class=\"flex-shrink-0 mr-3\"><\/div>\n<div class=\"w-full\">\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/strong> \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/olawanlejoel\/loader-anim\">\u0627\u06cc\u0646 \u0645\u062e\u0632\u0646<\/a> \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0647\u0646\u06af\u0627\u0645 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u060c \u06a9\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div><\/div><\/div>\n<h2 id=\"usingreactspinnersinourapplication\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87_%d8%a7%d8%b2_react_spinner_%d8%af%d8%b1_%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87_%d9%85%d8%a7\"><\/span>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Spinner \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/react-spinners\"><em><code>react-spinner<\/code><\/em><\/a>  \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0633\u067e\u06cc\u0646\u0631\u0647\u0627 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u062e\u0648\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Spinner \u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0631\u0627 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">$<\/span><span class=\"bash\"> npm install --save react-spinners<\/span>\n\/\/ Or\n<span class=\"hljs-meta\">$<\/span><span class=\"bash\"> yarn add react-spinners<\/span>\n<\/code><\/pre>\n<p>\u0648\u0642\u062a\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 import \u0644\u0648\u062f\u0631 \u062e\u0627\u0635\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 (\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u060c a <code>ClipLoader<\/code>) \u0648 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0646\u062f\u0627\u0632\u0647 \u0648 \u0631\u0646\u06af \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> React, { useState, useEffect } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> ClipLoader <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-spinners\/ClipLoader'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> App = <span class=\"hljs-function\">() =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> (loadingInProgress, setLoading) = useState(<span class=\"hljs-literal\">false<\/span>);\n  \n  &lt;!-- ... --&gt;\n  \n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n      {loadingInProgress ? (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"loader-container\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ClipLoader<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">{<\/span>'#<span class=\"hljs-attr\">fff<\/span>'} <span class=\"hljs-attr\">size<\/span>=<span class=\"hljs-string\">{150}<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      ) : (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"main-content\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello World!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            This is a demo Project to show how to add animated loading with\n            React.\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"buttons\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Read Article<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn get-quote\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{getRandomQuote}<\/span>&gt;<\/span>\n              Generate Quote\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"quote-section\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">blockquote<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"quote\"<\/span>&gt;<\/span>{quote.content}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">blockquote<\/span>&gt;<\/span>-{' '}\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"author\"<\/span>&gt;<\/span>{quote.author}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      )}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/pre>\n<p>\u0631\u0627 <code>react-spinner<\/code> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u0641\u06cc\u062f \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u062e\u0648\u0631\u062f\u0627\u0631 \u0627\u0633\u062a \u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u067e\u0631\u0627\u062a\u0648\u0631\u0647\u0627\u06cc \u0633\u0647 \u06af\u0627\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\">&lt;ClipLoader color={<span class=\"hljs-string\">'#fff'<\/span>} loading={loadingInProgress} size={<span class=\"hljs-number\">150<\/span>} \/&gt;\n<\/code><\/pre>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u067e\u0631\u0627\u062a\u0648\u0631 \u0633\u0647 \u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0627\u0631\u0632\u0634 <code>loadingInProgress<\/code> \u0645\u062a\u063a\u06cc\u0631\u060c \u0645\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 <code>loading={loadingInProgress}<\/code> \u0628\u062c\u0627\u06cc.<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 CSS \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 <code>spinner-icon<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 <code>override<\/code> \u0635\u0641\u062a:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { css } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@emotion\/react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> ClipLoader <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-spinners\/ClipLoader\"<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> override = css`<span class=\"css\">\n  <span class=\"hljs-attribute\">display<\/span>: block;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n  <span class=\"hljs-attribute\">border-color<\/span>: red;\n`<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">let<\/span> (loadingInProgress, setLoading) = useState(<span class=\"hljs-literal\">true<\/span>);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ClipLoader<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">{<\/span>'#<span class=\"hljs-attr\">fff<\/span>'} <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">{loadingInProgress}<\/span> <span class=\"hljs-attr\">css<\/span>=<span class=\"hljs-string\">{override}<\/span> <span class=\"hljs-attr\">size<\/span>=<span class=\"hljs-string\">{150}<\/span> \/&gt;<\/span>\n\n    \/\/ ...\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/pre>\n<div class=\"alert alert-note\">\n<div class=\"flex\">\n<div class=\"flex-shrink-0 mr-3\"><\/div>\n<div class=\"w-full\">\n<p><strong>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/strong> \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u06cc\u0634\u062a\u0631 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f <code>react-spinner<\/code> \u062f\u0631 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/react-spinners\"><em>\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/em><\/a>\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06af\u0646\u0627\u0647\u06a9\u0627\u0631\u0627\u0646 \u0645\u0648\u062c\u0648\u062f \u0631\u0627 \u0646\u06cc\u0632 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<\/p><\/div><\/div><\/div>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0648\u062a\u0627\u0647 \u060c \u0645\u0627 \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0645\u0627 \u0627\u0646\u062f\u0627\u062e\u062a\u0647 \u0627\u06cc\u0645 <code>react-spinners<\/code> \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0627\u0633\u067e\u06cc\u0646\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062f\u0631 React.<\/p>\n<\/div>\n<p>    (tagstotranslate)# JavaScript<br \/>\n<br \/><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-08 10:07:02<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;15077&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0631 React \u0628\u0627 react-spinners \u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062e\u0627\u0631\u062c\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0622\u0646 \u0645\u062f\u062a\u06cc \u0637\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0634\u062f\u060c \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u062f\u0647 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u062d\u0641\u0638 \u062a\u0648\u062c\u0647 \u0622\u0646\u200c\u0647\u0627 \u0628\u0627 \u0644\u0648\u062f\u0631\u060c \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u062f\u0644\u067e\u0630\u06cc\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0646\u06cc\u062f. \u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0641\u0647\u0645\u0646\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f \u0631\u0648\u06cc \u0628\u0647 \u062c\u0627\u06cc \u0631\u0641\u062a\u0646...&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0645\u0639\u0631\u0641\u06cc \u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc React \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0627\u0632 \u0645\u0646\u0627\u0628\u0639 \u062e\u0627\u0631\u062c\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0622\u0646 \u0645\u062f\u062a\u06cc \u0637\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0634\u062f\u060c \u0647\u0645\u06cc\u0634\u0647 \u0627\u06cc\u062f\u0647 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u062d\u0641\u0638 \u062a\u0648\u062c\u0647 \u0622\u0646\u200c\u0647\u0627 \u0628\u0627 \u0644\u0648\u062f\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0644\u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0628\u0641\u0647\u0645\u0646\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc\u200c\u0627\u0641\u062a\u062f. \u0631\u0648\u06cc \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u0646\u0647\u0627 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":15078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[],"class_list":["post-15077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/15077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=15077"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/15077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media\/15078"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=15077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=15077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=15077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}