{"id":40028,"date":"2022-11-10T01:17:42","date_gmt":"2022-11-09T21:47:42","guid":{"rendered":"https:\/\/quera.org\/blog\/?p=40028"},"modified":"2023-07-22T12:00:44","modified_gmt":"2023-07-22T07:30:44","slug":"react-cheat-sheet","status":"publish","type":"post","link":"https:\/\/quera.org\/blog\/react-cheat-sheet\/","title":{"rendered":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React"},"content":{"rendered":"\n<p>\u0641\u0631\u0627\u0645\u0648\u0634 \u06a9\u0631\u062f\u0646 \u0627\u062a\u0641\u0627\u0642\u06cc\u200c\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc\u060c \u062d\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0646\u06cc\u0632 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0686\u0646\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u0627\u06af\u0631 <a href=\"https:\/\/quera.org\/college\/land\/college\/8565\/react\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0622\u0645\u0648\u0632\u0634 react<\/a> \u062f\u06cc\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0628\u0647 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0622\u0646 \u0645\u0633\u0644\u0637 \u0628\u0627\u0634\u06cc\u062f\u061b \u0647\u06cc\u0686\u200c\u06af\u0627\u0647 \u0641\u0631\u0627\u0645\u0648\u0634\u06cc \u06af\u0631\u06cc\u0628\u0627\u0646\u200c\u06af\u06cc\u0631\u062a\u0627\u0646 \u0646\u0634\u0648\u062f! \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u061b \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0632 <a href=\"https:\/\/quera.org\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u06a9\u0648\u0626\u0631\u0627 \u0628\u0644\u0627\u06af<\/a>\u060c \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 <strong>\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React<\/strong>\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">React.js<\/a> \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645. <\/p>\n\n\n\n<p>\u062e\u0628 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u062f\u0648\u0646 \u0645\u0642\u062f\u0645\u0647\u200c\u0686\u06cc\u0646\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<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:\/\/quera.org\/blog\/react-cheat-sheet\/#%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_React_Elements\" >\u0639\u0646\u0627\u0635\u0631 (React Elements)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#React_Fragments\" >React Fragments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#React_Components\" >React Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#React_Props\" >React Props<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#%D8%B4%D8%B1%D9%88%D8%B7_%D8%AF%D8%B1_React\" >\u0634\u0631\u0648\u0637 \u062f\u0631 React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#%D9%84%DB%8C%D8%B3%D8%AA%E2%80%8C%D9%87%D8%A7_%D8%AF%D8%B1_React\" >\u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u062f\u0631 React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#React_Context\" >React Context<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#React_Hooks\" >React Hooks<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"h-\u0639\u0646\u0627\u0635\u0631-react-elements\"><span class=\"ez-toc-section\" id=\"%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_React_Elements\"><\/span><strong>\u0639\u0646\u0627\u0635\u0631 (React Elements)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0639\u0646\u0627\u0635\u0631 React\u060c \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0639\u0646\u0627\u0635\u0631 Html \u062f\u0627\u0631\u0646\u062f \u0648 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u062a\u0645\u0627\u0645\u06cc \u0639\u0646\u0627\u0635\u0631 Html \u062f\u0631 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">&lt;h1&gt;My Header&lt;\/h1&gt;\n&lt;p&gt;My paragraph&lt;\/p&gt;\n&lt;button&gt;My button&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>\u062f\u0631 React \u0627\u06cc\u0646 \u0639\u0646\u0627\u0635\u0631 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u0627\u0628\u0632\u0627\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 JSX \u0646\u0648\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647\u200c\u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646\u06a9\u0647 JSX \u062f\u0631 \u062d\u0642\u06cc\u0642\u062a \u062a\u0648\u0627\u0628\u0639 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0646\u062d\u0648\u0647\u200c\u06cc \u0646\u06af\u0627\u0631\u0634 (Syntax) \u06a9\u0645\u06cc \u0628\u0627 Html \u062a\u0641\u0627\u0648\u062a \u062f\u0627\u0631\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0628\u0631\u200c\u062e\u0644\u0627\u0641 Html \u062a\u06af\u200c\u0647\u0627\u06cc \u0645\u0646\u0641\u0631\u062f (Single Tags) \u0628\u0627\u06cc\u062f \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u00ab\/\u00bb \u0628\u0633\u062a\u0647 \u0634\u0648\u0646\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">&lt;img src=\"my-image.png\" \/&gt;\n&lt;br \/&gt;\n&lt;hr \/&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0639\u0644\u0627\u0642\u0647\u200c\u0645\u0646\u062f \u0628\u0627\u0634\u06cc\u062f: <a href=\"https:\/\/quera.org\/blog\/what-is-react\/#:~:text=React%20%D8%A8%D8%B1%D8%A7%DB%8C%20%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF%20%D8%B1%D8%A7%D8%A8%D8%B7%E2%80%8C%D9%87%D8%A7%DB%8C%20%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C,%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%E2%80%8C%DB%8C%20%D9%85%D8%AC%D8%AF%D8%AF%20UI%20%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%20%DA%A9%D8%B1%D8%AF.\" target=\"_blank\" rel=\"noreferrer noopener\">React \u0686\u06cc\u0633\u062a\u061f \u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631\u0645\u0648\u0631\u062f \u0631\u06cc \u0627\u06a9\u062a<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>\u0648\u06cc\u0698\u06af\u06cc \u0639\u0646\u0627\u0635\u0631 (React Element Attributes)<\/strong><\/h3>\n\n\n\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 JSX \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u06cc\u062f \u0628\u0647\u200c\u0637\u0631\u0632 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 Html \u0631\u0641\u062a\u0627\u0631 \u06a9\u0646\u06cc\u0645. \u0686\u0648\u0646 JSX \u062f\u0631 \u062d\u0642\u06cc\u0642\u062a \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u0648 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0632 \u0642\u0627\u0639\u062f\u0647\u200c\u06cc camelCase \u067e\u06cc\u0631\u0648\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0632 Html \u0646\u0648\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0645\u062b\u0627\u0644 \u0631\u0627\u06cc\u062c \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0648\u06cc\u0698\u06af\u06cc class \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647\u200c\u0635\u0648\u0631\u062a className \u0646\u0648\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">&lt;div className=\"container\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>\u0627\u0633\u062a\u0627\u06cc\u0644 \u0639\u0646\u0627\u0635\u0631 (React Element Styles)<\/strong><\/h3>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644\u200c\u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062e\u0637\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u062e\u062a\u0644\u0641 \u0628\u0627\u06cc\u062f \u0628\u0647\u200c\u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u0628\u0644 \u06a9\u0648\u062a\u06cc\u0634\u0646 &#8220;&#8221; \u0627\u0632 \u062f\u0648 \u0628\u0631\u0627\u06a9\u062a \u062a\u0648\u200c\u062f\u0631\u200c\u062a\u0648 {{}} \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">&lt;h1 style={{ fontSize: 24, margin: '0 auto', textAlign: 'center' }}&gt;My header&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"React_Fragments\"><\/span><strong>React Fragments<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u062f\u0631 React \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0639\u0646\u0635\u0631\u06cc \u0628\u0647\u200c\u0646\u0627\u0645 Fragment \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f. \u062f\u0631 React \u0642\u0627\u0646\u0648\u0646\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u062a\u0645\u0627\u0645\u06cc \u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u06cc\u062f \u0632\u06cc\u0631\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f (Parent) \u0628\u0627\u0634\u0646\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0645\u0627 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0648 \u0639\u0646\u0635\u0631 h1 \u0648 p \u0631\u0627 \u0647\u0645\u200c\u0632\u0645\u0627\u0646 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc (return) \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">\/\/ \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0634\u062a\u0628\u0627\u0647 \u0627\u0633\u062a\nfunction MyComponent() {\n  return (\n    &lt;h1&gt;My header&lt;\/h1&gt;\n    &lt;\/p&gt;My paragraph&lt;\/p&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p>\u0627\u06af\u0631 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631\u0627\u06cc \u062d\u0644 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631\u06cc \u0645\u0627\u0646\u0646\u062f div \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 Fragment\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u062f\u0648 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">\/\/ \u0627\u0648\u0644\u06cc\u0646 \u0646\u0648\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647\n&lt;&gt; ... &lt;\/&gt;\n\/\/ \u062f\u0648\u0645\u06cc\u0646 \u0646\u0648\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647\n&lt;Fragment&gt; ... &lt;\/Fragment&gt;<\/code><\/pre>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0642\u0628\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">\/\/ \u0633\u0627\u062e\u062a\u0627\u0631 \u0635\u062d\u06cc\u062d\nfunction MyComponent() {\n  return (\n    &lt;&gt;\n      &lt;h1&gt;My header&lt;\/h1&gt;\n      &lt;\/p&gt;My paragraph&lt;\/p&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"React_Components\"><\/span><strong>React Components<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2023\/07\/React-Cheatsheet-1024x731.jpg\" alt=\"\" class=\"wp-image-43015\" width=\"840\" height=\"599\" srcset=\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2023\/07\/React-Cheatsheet-1024x731.jpg 1024w, https:\/\/quera.org\/blog\/wp-content\/uploads\/2023\/07\/React-Cheatsheet-300x214.jpg 300w, https:\/\/quera.org\/blog\/wp-content\/uploads\/2023\/07\/React-Cheatsheet-768x549.jpg 768w, https:\/\/quera.org\/blog\/wp-content\/uploads\/2023\/07\/React-Cheatsheet-1536x1097.jpg 1536w, https:\/\/quera.org\/blog\/wp-content\/uploads\/2023\/07\/React-Cheatsheet-2048x1463.jpg 2048w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption class=\"wp-element-caption\"><strong>\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\u062f\u0631 React \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u0645. \u06cc\u06a9 \u0646\u0648\u0639 \u0633\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc (function component) \u0647\u0645\u0627\u0646\u0646\u062f \u062a\u0648\u0627\u0628\u0639 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u0628\u0627 \u0686\u0646\u062f \u062a\u0641\u0627\u0648\u062a \u0632\u06cc\u0631:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0627\u0633\u0627\u0645\u06cc \u0628\u0627\u06cc\u062f \u0628\u0627 \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0634\u0631\u0648\u0639 \u0634\u0648\u0646\u062f (Mycomponent \u0628\u0647\u200c\u062c\u0627\u06cc mycomponent)<\/li>\n\n\n\n<li>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0644\u0632\u0648\u0645\u0627\u064b \u0628\u0627\u06cc\u062f \u0645\u0642\u062f\u0627\u0631 JSX \u0631\u0627 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc (return) \u06a9\u0646\u0646\u062f.<\/li>\n<\/ol>\n\n\n\n<p>\u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function App() {\n  return (\n     &lt;div&gt;Hello world!&lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"React_Props\"><\/span><strong>React Props<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0627\u0631\u0633\u0627\u0644 \u0646\u0645\u0627\u06cc\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 Props \u0645\u06cc\u200c\u06af\u0648\u06cc\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u062e\u0648\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n\n\n\n<p>\u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0645\u0627 \u0645\u0642\u062f\u0627\u0631 name \u0631\u0627 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a App \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a User \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function App() {\n  return &lt;User name=\"Mohammadreza Babayi\" \/&gt;\n}\n\nfunction User(props) {\n  return &lt;h1&gt;Hello, {props.name}&lt;\/h1&gt;; \/\/ Hello, Mohammadreza Babayi!\n}<\/code><\/pre>\n\n\n\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0647\u0645\u0627\u0646 \u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u062f\u06cc\u062f\u06cc\u0645\u060c \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u063a\u06cc\u0631\u062b\u0627\u0628\u062a \u062f\u0631 JSX \u0628\u0627\u06cc\u062f \u0627\u0632 \u0628\u0631\u0627\u06a9\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u0645\u0627\u0645\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc \u0627\u0632 \u062c\u0645\u0644\u0647 \u062f\u06cc\u06af\u0631 \u0639\u0646\u0627\u0635\u0631 \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>React Children Props<\/strong><\/h3>\n\n\n\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0642\u0631\u0627\u0631\u062f\u0627\u062f\u0646 \u0622\u0646\u200c\u0647\u0627 \u0628\u06cc\u0646 \u062a\u06af\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u06a9\u0631\u062f.<\/p>\n\n\n\n<p>\u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function App() {\n  return (\n   &lt;User&gt;\n     &lt;h1&gt;Hello, Mohammadreza Babayi!&lt;\/h1&gt;\n   &lt;\/User&gt;\n  );\n}\n\nfunction User({ children }) {\n  return children; \/\/ Hello, Mohammadreza Babayi!\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"%D8%B4%D8%B1%D9%88%D8%B7_%D8%AF%D8%B1_React\"><\/span><strong>\u0634\u0631\u0648\u0637 \u062f\u0631 React<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u062f\u0631 React \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0639\u0646\u0627\u0635\u0631 \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0634\u0631\u0637\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f. \u0631\u0648\u0634 \u0627\u0648\u0644 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc (return) \u0634\u0631\u0637\u06cc \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc if \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function App() {\n  const isAuthUser = useAuth();\n\n  if (isAuthUser) {\n    \/\/ \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0628\u0648\u062f \u0627\u062c\u0627\u0632\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u062f\u0647\n    return &lt;AuthApp \/&gt;;\n  }\n\n  \/\/ \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0646\u0634\u062f\u0647 \u0628\u0648\u062f \u0627\u062c\u0627\u0632\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0646\u062f\u0647\n  return &lt;UnAuthApp \/&gt;;\n}<\/code><\/pre>\n\n\n\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u0639\u0645\u0644\u06af\u0631 \u0634\u0631\u0637\u06cc \u0633\u0647\u200c\u062a\u0627\u06cc\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0631 JSX \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function App() {\n\tconst isAuthUser = useAuth();\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;My App&lt;\/h1&gt;\n      {isAuthUser ? &lt;AuthApp \/&gt; : &lt;UnAuthApp \/&gt;}\n    &lt;\/&gt;\n  ) \n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\u062f\u0631 \u0628\u062e\u0634 \u0628\u0639\u062f\u06cc \u0645\u0642\u0627\u0644\u0647 \u00ab<strong>\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React<\/strong>\u00bb\u060c \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06a9\u0645\u06cc \u0647\u0645 \u0628\u0647 \u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"%D9%84%DB%8C%D8%B3%D8%AA%E2%80%8C%D9%87%D8%A7_%D8%AF%D8%B1_React\"><\/span><strong>\u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u062f\u0631 React<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062e\u0631\u0648\u062c\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f. \u062a\u0627\u0628\u0639 ()map. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631 \u0631\u0648\u06cc \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc JSX \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0627\u0633\u0627\u0645\u06cc \u0641\u0648\u062a\u0628\u0627\u0644\u06cc\u0633\u062a\u200c\u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function SoccerPlayers() {\n  const players = [\"Messi\", \"Ronaldo\", \"Laspada\"];\n\n  return (\n    &lt;div&gt;\n      {players.map((playerName) =&gt; (\n        &lt;SoccerPlayer key={playerName} name={playerName} \/&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p>\u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0631\u0648\u06cc \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f \u06a9\u0644\u06cc\u062f (key) \u0645\u0646\u062d\u0635\u0631\u200c\u0628\u0647\u200c\u0641\u0631\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u062f\u0631 JSX \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0645\u0627 \u0627\u0632 \u0646\u0627\u0645 \u0628\u0627\u0632\u06cc\u06a9\u0646\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"React_Context\"><\/span>React Context<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0645\u0641\u0647\u0648\u0645 context \u062c\u0647\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc \u0628\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0631\u062e\u062a\u06cc (tree child) \u0648 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 props\u200c\u0647\u0627\u06cc \u062a\u0648\u200c\u062f\u0631\u200c\u062a\u0648 (props drilling) \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/p>\n\n\n\n<p>\u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0631\u062e\u062a\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0633\u0647 \u0644\u0627\u06cc\u0647 \u06cc\u0627 \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0632 \u062a\u0627\u0628\u0639 createContext \u062f\u0631 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 Provider \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc \u0642\u0627\u0628\u0644\u200c\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0627\u0634\u0646\u062f \u0648 \u0627\u0632 Consumer \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n<p>\u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { createContext } from 'react';\n\nconst NameContext = createContext('');\n\nfunction App() {\n  return (\n    &lt;NameContext.Provider value=\"Mohammadreza Babayi\"&gt;\n      &lt;Body \/&gt;\n    &lt;NameContext.Provider&gt;\n  );\n} \n\nfunction Body() {\n  return &lt;Greeting \/&gt;;\n} \n\nfunction Greeting() {\n  return (\n    &lt;NameContext.Consumer&gt;\n      {name =&gt; &lt;h1&gt;Welcome, {name}&lt;\/h1&gt;}\n    &lt;\/NameContext.Consumer&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\"><span class=\"ez-toc-section\" id=\"React_Hooks\"><\/span><strong>React Hooks<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0647\u0648\u06a9 \u0642\u0627\u0628\u0644\u06cc\u062a \u062c\u062f\u06cc\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0646\u0633\u062e\u0647 16.8 \u0628\u0647 React \u0627\u0636\u0627\u0641\u0647 \u0634\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 state \u0648 \u062f\u06cc\u06af\u0631 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc React \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 (Class Components)\u200c \u0645\u0645\u06a9\u0646 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 \u062a\u0627 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u0622\u0646\u200c\u0647\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n<p><strong>\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0639\u0644\u0627\u0642\u0647\u200c\u0645\u0646\u062f \u0628\u0627\u0634\u06cc\u062f: <a href=\"https:\/\/quera.org\/blog\/how-react-hooks-work-in-simple-words\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 Hook\u200c\u0647\u0627 \u062f\u0631 React \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647<\/a><\/strong><\/p>\n\n\n\n<p>\u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0647 \u0647\u0633\u062a\u0647\u200c\u06cc \u0627\u0635\u0644\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React \u0627\u0641\u0632\u0648\u062f\u0647 \u0634\u062f\u0646\u062f\u060c \u0627\u0645\u0627 \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062a\u0646\u0647\u0627 \u0628\u0647 \u0645\u0639\u0631\u0641\u06cc \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0622\u0646\u200c\u0647\u0627 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u06cc\u0645:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>useState<\/li>\n\n\n\n<li>useEffect<\/li>\n\n\n\n<li>useRef<\/li>\n\n\n\n<li>useContext<\/li>\n\n\n\n<li>useCallback<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>useState Hook<\/strong><\/h3>\n\n\n\n<p>\u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 state\u200c\u0647\u0627 (\u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0622\u0646\u200c\u0647\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f) \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u062f. \u062f\u0644\u06cc\u0644 \u0631\u0627\u06cc\u062c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u0646\u062c\u0627\u0645\u200c\u0634\u062f\u0647 \u0628\u0631 \u0631\u0648\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useState } from 'react';\n\nfunction MyComponent() {\n  const [stateValue, setStateValue] = useState(initialValue);\n}<\/code><\/pre>\n\n\n\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647\u200c\u0627\u06cc \u0631\u0627 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0628\u0647 state \u062e\u0648\u062f \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0648 \u0633\u067e\u0633 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc stateValue \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 state \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u062a\u0627\u0628\u0639 setStateValue \u0645\u0642\u062f\u0627\u0631 state \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f.<\/p>\n\n\n\n<p>\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useState \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  function updateCount() {\n    setCount(count + 1);\n  }\n\n  return &lt;button onClick={updateCount}&gt;Count is: {count}&lt;\/button&gt;;\n}<\/code><\/pre>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc count \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc setCount \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>useEffect Hook<\/strong><\/h3>\n\n\n\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u062a\u0641\u0627\u0642\u0627\u062a \u062e\u0627\u0631\u062c \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u06cc \u062e\u0648\u062f \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0627\u0628\u062a\u062f\u0627 \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646\u0650 \u0646\u062e\u0633\u062a \u0648 \u0633\u067e\u0633 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062f\u0648\u0645\u06cc\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useEffect } from 'react';\n\nfunction MyComponent() {\n   useEffect(() =&gt; {\n     \/\/ \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u0648 \u0627\u062b\u0631\u0627\u062a \u0631\u0627 \u0645\u06cc\u062a\u0648\u0627\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0639\u0645\u0627\u0644 \u0646\u0645\u0648\u062f\n   }, []);\n}<\/code><\/pre>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0632 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u067e\u0633\u062a\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0633\u067e\u0633 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645\u200c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useEffect } from 'react';\n\nfunction PostList() {\n\t const [posts, setPosts] = useState([]);\n\n   useEffect(() =&gt; {\n\t   fetch('https:\/\/api.yoursiteurl.com\/posts')\n       .then(response =&gt; response.json())\n       .then(posts =&gt; setPosts(posts));\n   }, []);\n\n   return posts.map(post =&gt; &lt;Post key={post.id} post={post} \/&gt;\n}<\/code><\/pre>\n\n\n\n<p>\u0648\u0642\u062a\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u06cc\u0631\u0648\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647\u200c\u06cc \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc useEffect \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0622\u0646 \u0645\u0642\u062f\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f\u060c \u062a\u0627\u0628\u0639 useEffect \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u06cc \u0628\u0647\u200c\u0646\u0627\u0645 open \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0646\u0648\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0628\u0627\u0632 \u0648 \u0628\u0633\u062a\u0647 \u0634\u062f\u060c \u06a9\u0644\u0627\u0633 overflow-hidden \u0631\u0627 \u0628\u0647 \u0628\u062f\u0646\u0647\u200c\u06cc JSX \u0627\u0636\u0627\u0641\u0647 \u0646\u0645\u0627\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function Mobile({ open }) {\n  useEffect(() =&gt; {\n    const body = document.querySelector(\"#__next\");\n\n    if (open) {\n      body.classList.add(\"overflow-hidden\");\n    } else {\n      body.classList.remove(\"overflow-hidden\");\n    }\n  }, [open]);\n \n  \/\/ ...\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>useRef Hook<\/strong><\/h3>\n\n\n\n<p>\u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0628\u0647 \u0645\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 JSX \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0635\u062f\u0627 \u0628\u0632\u0646\u06cc\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 \u06a9\u0647 \u06cc\u06a9 \u0627\u0634\u0627\u0631\u0647\u200c\u06af\u0631 (Reference) \u0645\u06cc\u200c\u0628\u0627\u0634\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0645\u0648\u0631\u062f\u200c\u0646\u0638\u0631 \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f.<\/p>\n\n\n\n<p>\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0631\u0627 \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useRef } from 'react';\n\nfunction MyComponent() {\n  const ref = useRef();\n\n  return &lt;div ref={ref} \/&gt;\n}<\/code><\/pre>\n\n\n\n<p>\u0628\u0647 \u0645\u062d\u0636 \u0627\u06cc\u0646\u06a9\u0647 ref \u0628\u0647 \u0639\u0646\u0635\u0631 \u062e\u0648\u062f\u0634 \u0645\u062a\u0635\u0644 \u0634\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc ref.current \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0648\u0642\u062a\u06cc \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06a9\u0644\u06cc\u062f\u200c\u0647\u0627\u06cc Ctrl + K \u0631\u0627 \u0641\u0634\u0631\u062f\u060c \u0633\u0631\u0686\u200c\u0628\u0627\u0631 \u0628\u0647 \u062d\u0627\u0644\u062a \u0641\u0648\u06a9\u0648\u0633 \u062f\u0631\u0622\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useWindowEvent } from \"@mantine\/hooks\";\nimport { useRef } from \"react\";\n\nfunction Header() {\n  const inputRef = useRef();\n\n  useWindowEvent(\"keydown\", (event) =&gt; {\n    if (event.code === \"KeyK\" &amp;&amp; event.ctrlKey) {\n      event.preventDefault();\n      inputRef.current.focus();\n    }\n  });\n  \n  return &lt;input ref={inputRef} \/&gt;\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>useContext Hook<\/strong><\/h3>\n\n\n\n<p>\u0628\u0647\u200c\u0648\u0633\u06cc\u0644\u0647\u200c\u06cc \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0631\u0648\u0634\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0627\u0632 Context.Consumer \u0628\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0633\u0631\u0627\u0633\u0631\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0646\u0627\u0645 Context \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u0631\u0627 \u0635\u062f\u0627 \u0628\u0632\u0646\u06cc\u0645. \u0645\u0642\u062f\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 (return) \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u0645\u0648\u0631\u062f\u200c\u0646\u0638\u0631 \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { useContext } from 'react';\n\nfunction MyComponent() {\n  const value = useContext(Context);\n\n  \/\/ ...\n}<\/code><\/pre>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u062b\u0627\u0644\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0628\u062e\u0634 Context \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u06cc\u0645 \u0628\u0627 \u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { createContext, useContext } from 'react';\n\nconst NameContext = createContext('');\n\nfunction App() {\n  return (\n    &lt;NameContext.Provider value=\"Mohammadreza Babayi\"&gt;\n      &lt;Body \/&gt;\n    &lt;NameContext.Provider&gt;\n  );\n} \n\nfunction Body() {\n  return &lt;Greeting \/&gt;;\n} \n\nfunction Greeting() {\n\tconst name = useContext(NameContext);\n\n  return (\n    &lt;h1&gt;Welcome, {name}&lt;\/h1&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:18px\"><strong>useCallback Hook<\/strong><\/h3>\n\n\n\n<p>\u0627\u06cc\u0646 \u0647\u0648\u06a9 \u0627\u0628\u0632\u0627\u0631\u06cc\u0633\u062a \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u0647\u0631\u0647\u200c\u0648\u0631\u06cc (Performance) \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u06cc \u0645\u0627\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u06a9\u0647 \u0627\u0632 \u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0646 \u0645\u062c\u062f\u062f \u062a\u0648\u0627\u0628\u0639 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u067e\u0631\u062f\u0627\u0632\u0634 \u0645\u06cc\u200c\u0634\u0648\u062f \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0645\u062b\u0627\u0644 PlayerList \u0627\u06af\u0631 \u0645\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0622\u0646 \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 (handleRemovePlayer) \u0627\u0632 \u0637\u0631\u06cc\u0642 props \u0628\u0647 \u0622\u0646 \u067e\u0627\u0633 \u062f\u0647\u06cc\u0645\u060c \u0647\u0631\u0628\u0627\u0631 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062e\u062a\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0627\u062a\u0641\u0627\u0642\u060c \u06a9\u0627\u0641\u06cc\u0633\u062a \u0627\u0632 useCallback \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 \u0648 \u062a\u0646\u0647\u0627 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0648\u0627\u0628\u0633\u062a\u0647 \u0631\u0627 \u062f\u0631 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627 \u0628\u06af\u0630\u0627\u0631\u06cc\u0645:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">function App() {\n  const [player, setPlayer] = React.useState(\"\");\n  const [players, setPlayers] = React.useState([\"Messi\", \"Ronaldo\", \"Laspada\"]);\n\n  function handleChangeInput(event) {\n    setPlayer(event.target.value);\n  }\n  function handleAddPlayer() {\n    setPlayers(players.concat(player));\n  }\n  const handleRemovePlayer = useCallback(player =&gt; {\n    setPlayers(players.filter((p) =&gt; p !== player));\n  }, [players])\n\n  return (\n    &lt;&gt;\n      &lt;input onChange={handleChangeInput} \/&gt;\n      &lt;button onClick={handleAddPlayer}&gt;Add Player&lt;\/button&gt;\n      &lt;PlayerList players={players} handleRemovePlayer={handleRemovePlayer} \/&gt;\n    &lt;\/&gt;\n  );\n}\n\nfunction PlayerList({ players, handleRemovePlayer }) {\n  return (\n    &lt;ul&gt;\n      {players.map((player) =&gt; (\n        &lt;li key={player} onClick={() =&gt; handleRemovePlayer(player)}&gt;\n          {player}\n        &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p>\u0627\u0632 \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u062a\u0634\u06a9\u0631\u0645 \u06a9\u0647 \u062a\u0627 \u0628\u0647 \u0627\u06cc\u0646\u062c\u0627\u06cc \u0645\u0637\u0644\u0628 \u00ab<strong>\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React<\/strong>\u00bb \u0631\u0627 \u0645\u0637\u0627\u0644\u0639\u0647 \u0646\u0645\u0648\u062f\u06cc\u062f\u060c \u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f \u0647\u0631\u06af\u0648\u0646\u0647 \u0633\u0624\u0627\u0644 \u06cc\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0645\u0637\u0644\u0628\u060c \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0645 \u06a9\u0647 \u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0628\u062e\u0634 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0641\u0631\u0627\u0645\u0648\u0634 \u06a9\u0631\u062f\u0646 \u0627\u062a\u0641\u0627\u0642\u06cc\u200c\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc\u060c \u062d\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0646\u06cc\u0632 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0686\u0646\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u0627\u06af\u0631 \u0622\u0645\u0648\u0632\u0634 react \u062f\u06cc\u062f\u0647&#8230;<\/p>\n","protected":false},"author":36,"featured_media":40031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,46,68,79],"tags":[],"class_list":["post-40028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","category-developer","category-react","category-frontend"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React - \u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af<\/title>\n<meta name=\"description\" content=\"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc React.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React - \u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af\" \/>\n<meta property=\"og:description\" content=\"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc React.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\" \/>\n<meta property=\"og:site_name\" content=\"\u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T21:47:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-22T07:30:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u062f\u0642\u06cc\u0642\u0647\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\"},\"author\":{\"name\":\"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc\",\"@id\":\"https:\/\/quera.org\/blog\/#\/schema\/person\/8e01307d514d44f4fac316cab1427efb\"},\"headline\":\"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\",\"datePublished\":\"2022-11-09T21:47:42+00:00\",\"dateModified\":\"2023-07-22T07:30:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\"},\"wordCount\":144,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/quera.org\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg\",\"articleSection\":[\"\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\",\"\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\",\"\u0631\u06cc\u200c\u0627\u06a9\u062a\",\"\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\"],\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\",\"url\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\",\"name\":\"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React - \u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af\",\"isPartOf\":{\"@id\":\"https:\/\/quera.org\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg\",\"datePublished\":\"2022-11-09T21:47:42+00:00\",\"dateModified\":\"2023-07-22T07:30:44+00:00\",\"description\":\"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc React.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.\",\"breadcrumb\":{\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/quera.org\/blog\/react-cheat-sheet\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage\",\"url\":\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg\",\"contentUrl\":\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg\",\"width\":1200,\"height\":800,\"caption\":\"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/quera.org\/blog\/react-cheat-sheet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u062e\u0627\u0646\u0647\",\"item\":\"https:\/\/quera.org\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\",\"item\":\"https:\/\/quera.org\/blog\/category\/developer\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\",\"item\":\"https:\/\/quera.org\/blog\/category\/developer\/technology\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\",\"item\":\"https:\/\/quera.org\/blog\/category\/developer\/technology\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"\u0631\u06cc\u200c\u0627\u06a9\u062a\",\"item\":\"https:\/\/quera.org\/blog\/category\/developer\/technology\/frontend\/react\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/quera.org\/blog\/#website\",\"url\":\"https:\/\/quera.org\/blog\/\",\"name\":\"\u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af\",\"description\":\"\u0647\u0645\u0647\u200c\u0686\u06cc\u0632 \u062f\u0631\u0628\u0627\u0631\u0647 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc\",\"publisher\":{\"@id\":\"https:\/\/quera.org\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/quera.org\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fa-IR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/quera.org\/blog\/#organization\",\"name\":\"\u06a9\u0648\u0626\u0631\u0627\",\"url\":\"https:\/\/quera.org\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\/\/quera.org\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/09\/logo-quera22-e1574766184574.png\",\"contentUrl\":\"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/09\/logo-quera22-e1574766184574.png\",\"width\":300,\"height\":300,\"caption\":\"\u06a9\u0648\u0626\u0631\u0627\"},\"image\":{\"@id\":\"https:\/\/quera.org\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/quera.ir\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/quera.org\/blog\/#\/schema\/person\/8e01307d514d44f4fac316cab1427efb\",\"name\":\"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\/\/quera.org\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e14916104b6510a751e7e09be4b274126d9223ed8f91a5233c6a01ae9b38dc07?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e14916104b6510a751e7e09be4b274126d9223ed8f91a5233c6a01ae9b38dc07?s=96&d=mm&r=g\",\"caption\":\"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc\"},\"description\":\"\u0633\u0644\u0627\u0645 \u060c \u0645\u0646 \u0645\u062d\u0645\u062f\u0631\u0636\u0627\u0645 \u0648 \u0639\u0644\u0627\u0642\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0628\u0647 \u0622\u0645\u0648\u062e\u062a\u0646 \u0648 \u0622\u0645\u0648\u0632\u0634 \u062f\u0627\u0631\u0645. \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0646\u0648\u0634\u062a\u0647\u200c\u0647\u0627\u0645 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u062c\u0627\u0644\u0628 \u0648 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u0646 :)\",\"sameAs\":[\"https:\/\/www.instagram.com\/m_babayiiii\/\",\"https:\/\/www.linkedin.com\/in\/mohammad-reza-b-7a2099123\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React - \u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af","description":"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc React.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.","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:\/\/quera.org\/blog\/react-cheat-sheet\/","og_locale":"fa_IR","og_type":"article","og_title":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React - \u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af","og_description":"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc React.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.","og_url":"https:\/\/quera.org\/blog\/react-cheat-sheet\/","og_site_name":"\u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af","article_published_time":"2022-11-09T21:47:42+00:00","article_modified_time":"2023-07-22T07:30:44+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg","type":"image\/jpeg"}],"author":"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc","twitter_card":"summary_large_image","twitter_misc":{"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a":"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc","\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646":"7 \u062f\u0642\u06cc\u0642\u0647"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#article","isPartOf":{"@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/"},"author":{"name":"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc","@id":"https:\/\/quera.org\/blog\/#\/schema\/person\/8e01307d514d44f4fac316cab1427efb"},"headline":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React","datePublished":"2022-11-09T21:47:42+00:00","dateModified":"2023-07-22T07:30:44+00:00","mainEntityOfPage":{"@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/"},"wordCount":144,"commentCount":2,"publisher":{"@id":"https:\/\/quera.org\/blog\/#organization"},"image":{"@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage"},"thumbnailUrl":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg","articleSection":["\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc","\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647","\u0631\u06cc\u200c\u0627\u06a9\u062a","\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f"],"inLanguage":"fa-IR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/quera.org\/blog\/react-cheat-sheet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/","url":"https:\/\/quera.org\/blog\/react-cheat-sheet\/","name":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React - \u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af","isPartOf":{"@id":"https:\/\/quera.org\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage"},"image":{"@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage"},"thumbnailUrl":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg","datePublished":"2022-11-09T21:47:42+00:00","dateModified":"2023-07-22T07:30:44+00:00","description":"\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647\u200c\u06cc \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React\u060c \u0645\u0631\u0648\u0631\u06cc \u0633\u0631\u06cc\u0639 \u0628\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647\u200c\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u06cc React.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.","breadcrumb":{"@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/quera.org\/blog\/react-cheat-sheet\/"]}]},{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#primaryimage","url":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg","contentUrl":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/11\/\u0628\u0631\u06af\u0647-\u062a\u0642\u0644\u0628-React.jpg","width":1200,"height":800,"caption":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React"},{"@type":"BreadcrumbList","@id":"https:\/\/quera.org\/blog\/react-cheat-sheet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u062e\u0627\u0646\u0647","item":"https:\/\/quera.org\/blog\/"},{"@type":"ListItem","position":2,"name":"\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647","item":"https:\/\/quera.org\/blog\/category\/developer\/"},{"@type":"ListItem","position":3,"name":"\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc","item":"https:\/\/quera.org\/blog\/category\/developer\/technology\/"},{"@type":"ListItem","position":4,"name":"\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f","item":"https:\/\/quera.org\/blog\/category\/developer\/technology\/frontend\/"},{"@type":"ListItem","position":5,"name":"\u0631\u06cc\u200c\u0627\u06a9\u062a","item":"https:\/\/quera.org\/blog\/category\/developer\/technology\/frontend\/react\/"},{"@type":"ListItem","position":6,"name":"\u0628\u0631\u06af\u0647 \u062a\u0642\u0644\u0628 React"}]},{"@type":"WebSite","@id":"https:\/\/quera.org\/blog\/#website","url":"https:\/\/quera.org\/blog\/","name":"\u06a9\u0648\u0626\u0631\u0627\u200c\u0628\u0644\u0627\u06af","description":"\u0647\u0645\u0647\u200c\u0686\u06cc\u0632 \u062f\u0631\u0628\u0627\u0631\u0647 \u062f\u0646\u06cc\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc","publisher":{"@id":"https:\/\/quera.org\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/quera.org\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fa-IR"},{"@type":"Organization","@id":"https:\/\/quera.org\/blog\/#organization","name":"\u06a9\u0648\u0626\u0631\u0627","url":"https:\/\/quera.org\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/quera.org\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/09\/logo-quera22-e1574766184574.png","contentUrl":"https:\/\/quera.org\/blog\/wp-content\/uploads\/2022\/09\/logo-quera22-e1574766184574.png","width":300,"height":300,"caption":"\u06a9\u0648\u0626\u0631\u0627"},"image":{"@id":"https:\/\/quera.org\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/quera.ir\/"]},{"@type":"Person","@id":"https:\/\/quera.org\/blog\/#\/schema\/person\/8e01307d514d44f4fac316cab1427efb","name":"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc","image":{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/quera.org\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e14916104b6510a751e7e09be4b274126d9223ed8f91a5233c6a01ae9b38dc07?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e14916104b6510a751e7e09be4b274126d9223ed8f91a5233c6a01ae9b38dc07?s=96&d=mm&r=g","caption":"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0628\u0627\u0628\u0627\u06cc\u06cc"},"description":"\u0633\u0644\u0627\u0645 \u060c \u0645\u0646 \u0645\u062d\u0645\u062f\u0631\u0636\u0627\u0645 \u0648 \u0639\u0644\u0627\u0642\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0628\u0647 \u0622\u0645\u0648\u062e\u062a\u0646 \u0648 \u0622\u0645\u0648\u0632\u0634 \u062f\u0627\u0631\u0645. \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0646\u0648\u0634\u062a\u0647\u200c\u0647\u0627\u0645 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u062c\u0627\u0644\u0628 \u0648 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u0646 :)","sameAs":["https:\/\/www.instagram.com\/m_babayiiii\/","https:\/\/www.linkedin.com\/in\/mohammad-reza-b-7a2099123\/"]}]}},"_links":{"self":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts\/40028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/comments?post=40028"}],"version-history":[{"count":23,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts\/40028\/revisions"}],"predecessor-version":[{"id":43016,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts\/40028\/revisions\/43016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/media\/40031"}],"wp:attachment":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/media?parent=40028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/categories?post=40028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/tags?post=40028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}