{"id":6850,"date":"2026-08-09T17:00:42","date_gmt":"2026-08-09T13:30:42","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6850"},"modified":"2026-08-09T17:00:42","modified_gmt":"2026-08-09T13:30:42","slug":"%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%be%d9%88%d8%b4%d8%b4%db%8c-wrapper-components-%d8%af%d8%b1-rea","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%be%d9%88%d8%b4%d8%b4%db%8c-wrapper-components-%d8%af%d8%b1-rea\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc (Wrapper Components) \u062f\u0631 React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Props"},"content":{"rendered":"\n

\u0645\u0642\u062f\u0645\u0647<\/strong>
\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a React\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc (Wrapper Components) \u0631\u0627 \u0628\u0627 \u06a9\u0645\u06a9 Props \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0648\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u0646\u062f \u0648 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f (Child Components) \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0627\u0635\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u06a9\u0631\u0631 \u062f\u0631 \u06cc\u06a9 \u0637\u0631\u0627\u062d\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0645\u0648\u062f\u0627\u0644\u200c\u0647\u0627 (Modals)\u060c \u0635\u0641\u062d\u0627\u062a \u0642\u0627\u0644\u0628 \u0648 \u06a9\u0627\u0634\u06cc\u200c\u0647\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc (Information Tiles) \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n\n\n\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc\u060c \u0627\u0628\u062a\u062f\u0627 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc Rest \u0648 Spread \u0628\u0631\u0627\u06cc \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc Prop\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0646\u0634\u062f\u0647 \u0648 \u0627\u0631\u0633\u0627\u0644 \u0622\u0646\u200c\u0647\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648 (Nested Components) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 Prop \u062f\u0627\u062e\u0644\u06cc children<\/code> \u0628\u0631\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648 \u062f\u0631 JSX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062f\u0631\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u062a\u06af\u200c\u0647\u0627\u06cc HTML. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Props \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0627 \u067e\u0648\u0634\u0634\u200c\u0647\u0627\u06cc\u06cc \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u06a9\u062f\u0647\u0627\u06cc JSX \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u0627\u06cc\u200c\u062f\u0647\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n\n\n\n

\u062f\u0631 \u0637\u0648\u0644 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062d\u06cc\u0648\u0627\u0646\u0627\u062a \u0628\u0647 \u0634\u06a9\u0644 \u06a9\u0627\u0631\u062a (Card) \u062e\u0648\u0627\u0647\u06cc\u062f \u0633\u0627\u062e\u062a. \u0634\u0645\u0627 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062a\u0641\u06a9\u06cc\u06a9 \u06a9\u0631\u062f\u0647 \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc (Refactor) \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06a9\u0627\u0631\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a \u06a9\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 Prop \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627 \u0631\u0634\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0634\u0645\u0627 \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631 \u0648 \u0633\u0627\u0632\u06af\u0627\u0631 \u0645\u06cc\u200c\u0645\u0627\u0646\u0646\u062f.<\/p>\n\n\n\n

\u0646\u06a9\u062a\u0647: \u0645\u0631\u062d\u0644\u0647 \u0627\u0648\u0644 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062e\u0627\u0644\u06cc \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062a\u0645\u0631\u06cc\u0646\u0627\u062a \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0648\u06cc \u0622\u0646 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06af\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0627\u06cc \u0627\u0632 \u0642\u0628\u0644 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u06a9\u0627\u0631 \u0628\u0627 Props \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0645\u0631\u062d\u0644\u0647 \u06f2 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f.<\/em><\/p>\n\n\n\n

\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/strong>
\u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u06a9\u0647 Node.js \u0631\u0648\u06cc \u0622\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f. \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627 Node.js \u0646\u0633\u062e\u0647 20 \u0648 npm \u062a\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0622\u0646 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0639\u0627\u0645\u0644 \u0627\u0648\u0628\u0648\u0646\u062a\u0648 24.04\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0631\u0633\u0645\u06cc \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f (Parmin Cloud) \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Node.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Create React App<\/code> \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u062f\u0627\u0634\u062a\u0646 \u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 Props \u062f\u0631 React \u0648 \u062f\u0627\u0646\u0634 \u067e\u0627\u06cc\u0647\u200c\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c HTML \u0648 CSS \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u06cc\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n\n\n\n

\n\n\n\n

\u0645\u0631\u062d\u0644\u0647 \u06f1 \u2014 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062e\u0627\u0644\u06cc<\/h3>\n\n\n\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Create React App \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u067e\u0631\u0648\u0698\u0647 \u0646\u0645\u0648\u0646\u0647 \u0648 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0622\u0646 \u0631\u0627 \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n

\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u062f\u0631 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u062e\u0648\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f (\u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627 \u0627\u0632 \u0645\u06cc\u0631\u0648\u0631 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0633\u0631\u0639\u062a \u062f\u0627\u0646\u0644\u0648\u062f \u0628\u0627\u0644\u0627\u062a\u0631 \u0628\u0627\u0634\u062f):<\/p>\n\n\n\n

npx create-react-app wrapper-tutorial --registry=https:\/\/npm.parmincloud.ir<\/code><\/pre>\n\n\n\n
\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0646\u0635\u0628\u060c \u0648\u0627\u0631\u062f \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0622\u0646 \u0634\u0648\u06cc\u062f:<\/p>\n\n\n\n
cd wrapper-tutorial<\/code><\/pre>\n\n\n\n
\u062f\u0631 \u06cc\u06a9 \u062a\u0628 \u06cc\u0627 \u067e\u0646\u062c\u0631\u0647 \u062c\u062f\u06cc\u062f \u062a\u0631\u0645\u06cc\u0646\u0627\u0644\u060c \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0634\u0631\u0648\u0639 Create React App<\/code> \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f. \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627 \u0627\u0639\u0645\u0627\u0644 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0628\u0647\u200c\u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u0641\u0631\u0634 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n\n\n\n
npm start<\/code><\/pre>\n\n\n\n
\u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0645\u062d\u0644\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a. \u0627\u06af\u0631 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u0646\u0634\u062f\u060c \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0622\u062f\u0631\u0633 http:\/\/localhost:3000\/<\/code> \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0631\u06cc\u0645\u0648\u062a (\u0645\u0627\u0646\u0646\u062f \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f) \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0622\u062f\u0631\u0633 \u0628\u0647 \u0635\u0648\u0631\u062a http:\/\/your_domain:3000<\/code> \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n\n\n\n
\u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u0645\u062c\u0645\u0648\u0639\u0647 \u06a9\u0627\u0645\u0644\u0627\u064b \u062c\u062f\u06cc\u062f\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0628\u0627 \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06a9\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 src\/App.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/App.js<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n\n\n\n
import React from 'react';\nimport logo from '.\/logo.svg';\nimport '.\/App.css';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n        <p>\n          Edit <code>src\/App.js<\/code> and save to reload.\n        <\/p>\n        <a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Learn React\n        <\/a>\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\u062e\u0637 import logo from '.\/logo.svg';<\/code> \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u062a\u0645\u0627\u0645 \u0645\u0648\u0627\u0631\u062f \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u062f\u0633\u062a\u0648\u0631 return<\/code> \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06cc\u06a9 \u0645\u062c\u0645\u0648\u0639\u0647 \u062a\u06af \u062e\u0627\u0644\u06cc <><\/><\/code> \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f. \u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/App.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport '.\/App.css';\n\nfunction App() {\n  return <><\/>;\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0644\u0648\u06af\u0648\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
rm src\/logo.svg<\/code><\/pre>\n\n\n\n
\u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0633\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 components<\/code> \u062f\u0631 \u0645\u0633\u06cc\u0631 src<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
mkdir src\/components<\/code><\/pre>\n\n\n\n
\u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc App<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc App<\/code> \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
mkdir src\/components\/App\nmv src\/App.* src\/components\/App<\/code><\/pre>\n\n\n\n
\u0633\u067e\u0633\u060c \u0645\u0633\u06cc\u0631 Import \u062f\u0631 \u0641\u0627\u06cc\u0644 index.js<\/code> \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/index.js<\/code><\/pre>\n\n\n\n
\u062a\u063a\u06cc\u06cc\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062f\u0633\u062a\u0648\u0631 Import \u0628\u0647 \u0641\u0627\u06cc\u0644 \u0635\u062d\u06cc\u062d \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/index.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport App from '.\/components\/App\/App';\nimport * as serviceWorker from '.\/serviceWorker';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App \/>\n  <\/React.StrictMode>,\n  document.getElementById('root')\n);\nserviceWorker.unregister();<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u0645\u0631\u062d\u0644\u0647 \u06f2 \u2014 \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc Prop\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0646\u0634\u062f\u0647 \u0628\u0627 ...props<\/code><\/h3>\n\n\n\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062d\u06cc\u0648\u0627\u0646\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f (Parent) \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f (Child)\u060c \u0627\u0632 \u0639\u0645\u0644\u06af\u0631\u0647\u0627\u06cc Rest \u0648 Spread \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 Prop\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0646\u0634\u062f\u0647 \u0627\u0632 \u0648\u0627\u0644\u062f \u0628\u0647 \u0641\u0631\u0632\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0648\u0627\u0644\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0646\u062f \u0646\u0627\u0645 \u06cc\u0627 \u0646\u0648\u0639 Prop\u0647\u0627 \u0631\u0627 \u0628\u062f\u0627\u0646\u062f.<\/p>\n\n\n\n
\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a AnimalCard<\/strong>
\u0627\u0628\u062a\u062f\u0627\u060c \u0641\u0627\u06cc\u0644\u06cc \u062d\u0627\u0648\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062d\u06cc\u0648\u0627\u0646\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/App\/data.js<\/code><\/pre>\n\n\n\n
\u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
src\/components\/App\/data.js<\/strong><\/p>\n\n\n\n
export default [\n  {\n    name: 'Lion',\n    scientificName: 'Panthero leo',\n    size: 140,\n    diet: ['meat']\n  },\n  {\n    name: 'Gorilla',\n    scientificName: 'Gorilla beringei',\n    size: 205,\n    diet: ['plants', 'insects']\n  },\n  {\n    name: 'Zebra',\n    scientificName: 'Equus quagga',\n    size: 322,\n    diet: ['plants'],\n  }\n]<\/code><\/pre>\n\n\n\n
\u0633\u067e\u0633 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a AnimalCard<\/code> \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0641\u0627\u06cc\u0644 \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
mkdir src\/components\/AnimalCard\nnano src\/components\/AnimalCard\/AnimalCard.js<\/code><\/pre>\n\n\n\n
\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 name<\/code>\u060c diet<\/code> \u0648 size<\/code> \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u062f\u0631\u06cc\u0627\u0641\u062a \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalCard\/AnimalCard.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function AnimalCard({ diet, name, size }) {\n  return(\n    <div>\n      <h3>{name}<\/h3>\n      <div>{size}kg<\/div>\n      <div>{diet.join(', ')}.<\/div>\n    <\/div>\n  )\n}\n\nAnimalCard.propTypes = {\n  diet: PropTypes.arrayOf(PropTypes.string).isRequired,\n  name: PropTypes.string.isRequired,\n  size: PropTypes.number.isRequired,\n}<\/code><\/pre>\n\n\n\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0634\u0645\u0627 Prop\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0644\u06cc\u0633\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u062c\u062f\u0627 \u06a9\u0631\u062f\u0647 (Destructuring) \u0648 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 div<\/code> \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 App.js<\/code> \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/App\/App.js<\/code><\/pre>\n\n\n\n
\u062e\u0637\u0648\u0637 \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 App.js<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport '.\/App.css';\n\nimport animals from '.\/data';\nimport AnimalCard from '..\/AnimalCard\/AnimalCard';\n\nfunction App() {\n  return (\n    <div className=\"wrapper\">\n      {animals.map(animal =>\n        <AnimalCard\n          diet={animal.diet}\n          key={animal.name}\n          name={animal.name}\n          size={animal.size}\n        \/>\n      )}\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644\u060c \u0641\u0627\u06cc\u0644 App.css<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/App\/App.css<\/code><\/pre>\n\n\n\n
\u06a9\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
prop-tutorial\/src\/components\/App\/App.css<\/strong><\/p>\n\n\n\n
.wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    padding: 20px;\n}<\/code><\/pre>\n\n\n\n
\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Details<\/strong>
\u0627\u06a9\u0646\u0648\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 AnimalDetails<\/code> \u0628\u0633\u0627\u0632\u06cc\u0645 \u062a\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0645\u0648\u062c\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u062f. \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0648 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
mkdir src\/components\/AnimalDetails\nnano src\/components\/AnimalDetails\/AnimalDetails.js<\/code><\/pre>\n\n\n\n
\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0648\u0686\u06a9\u06cc \u06a9\u0647 \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalDetails\/AnimalDetails.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport '.\/AnimalDetails.css';\n\nfunction convertFood(food) {\n  switch(food) {\n    case 'insects':\n      return '\ud83d\udc1c';\n    case 'meat':\n      return '\ud83c\udf56';\n    case 'plants':\n    default:\n      return '\ud83c\udf31';\n  }\n}\n\nexport default function AnimalDetails({ diet }) {\n  return(\n    <div className=\"details\">\n      <h4>Details:<\/h4>\n      <div>\n        Diet: {diet.map(food => convertFood(food)).join(' ')}\n      <\/div>\n    <\/div>\n  )\n}\n\nAnimalDetails.propTypes = {\n  diet: PropTypes.arrayOf(PropTypes.string).isRequired,\n}<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 CSS \u0622\u0646 \u0631\u0627 \u0646\u06cc\u0632 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/AnimalDetails\/AnimalDetails.css<\/code><\/pre>\n\n\n\n
.details {\n    border-top: gray solid 1px;\n    margin: 20px 0;\n}<\/code><\/pre>\n\n\n\n
\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f AnimalDetails<\/code> \u0631\u0627 \u0628\u0647 AnimalCard<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 AnimalCard.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/AnimalCard\/AnimalCard.js<\/code><\/pre>\n\n\n\n
\u062f\u0633\u062a\u0648\u0631 diet.join<\/code> \u0631\u0627 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalCard\/AnimalCard.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport AnimalDetails from '..\/AnimalDetails\/AnimalDetails';\n\nexport default function AnimalCard({ diet, name, size }) {\n  return(\n    <div>\n      <h3>{name}<\/h3>\n      <div>{size}kg<\/div>\n      <AnimalDetails\n        diet={diet}\n      \/>\n    <\/div>\n  )\n}\n\nAnimalCard.propTypes = {\n  diet: PropTypes.arrayOf(PropTypes.string).isRequired,\n  name: PropTypes.string.isRequired,\n  size: PropTypes.number.isRequired,\n}<\/code><\/pre>\n\n\n\n
\u0639\u0628\u0648\u0631 \u062f\u0627\u062f\u0646 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u0632 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0627 ...props<\/code><\/strong>
\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0627\u0645\u0627 \u06cc\u06a9 \u0646\u0627\u06a9\u0627\u0631\u0622\u0645\u062f\u06cc \u06a9\u0648\u0686\u06a9 \u062f\u0631 AnimalCard<\/code> \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0634\u0645\u0627 \u0628\u0647 \u0635\u0631\u0627\u062d\u062a diet<\/code> \u0631\u0627 \u0627\u0632 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 Prop\u0647\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0627\u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0628\u0644\u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0631\u0627\u0647 \u0628\u0647\u062a\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 Prop\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0646\u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 AnimalCard<\/code> \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 AnimalDetails<\/code> \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0639\u0645\u0644\u06af\u0631 Rest \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 AnimalCard.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/AnimalCard\/AnimalCard.js<\/code><\/pre>\n\n\n\n
\u062f\u0627\u062e\u0644 \u0622\u0646\u060c diet<\/code> \u0631\u0627 \u0627\u0632 \u0622\u0628\u062c\u06a9\u062a \u062c\u062f\u0627 \u0634\u062f\u0647 (Destructured) \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0642\u06cc\u0647 Prop\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 props<\/code> \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 AnimalDetails<\/code> \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalCard\/AnimalCard.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport AnimalDetails from '..\/AnimalDetails\/AnimalDetails';\n\nexport default function AnimalCard({ name, size, ...props }) {\n  return(\n    <div>\n      <h3>{name}<\/h3>\n      <div>{size}kg<\/div>\n      <AnimalDetails\n        {...props}\n      \/>\n    <\/div>\n  )\n}\n\nAnimalCard.propTypes = {\n  name: PropTypes.string.isRequired,\n  size: PropTypes.number.isRequired,\n}<\/code><\/pre>\n\n\n\n
\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f PropType \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 diet<\/code> \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
\u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u06cc \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f scientificName<\/code> \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 AnimalCard<\/code> \u0628\u0647 AnimalDetails<\/code> \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645. \u0641\u0627\u06cc\u0644 App.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 scientificName<\/code> \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/App\/App.js<\/code><\/pre>\n\n\n\n
wrapper-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport '.\/App.css';\n\nimport animals from '.\/data';\nimport AnimalCard from '..\/AnimalCard\/AnimalCard';\n\nfunction App() {\n  return (\n    <div className=\"wrapper\">\n      {animals.map(animal =>\n        <AnimalCard\n          diet={animal.diet}\n          key={animal.name}\n          name={animal.name}\n          size={animal.size}\n          scientificName={animal.scientificName}\n        \/>\n      )}\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 AnimalDetails<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 Prop \u062c\u062f\u06cc\u062f \u0631\u0627 \u0645\u0635\u0631\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/AnimalDetails\/AnimalDetails.js<\/code><\/pre>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalDetails\/AnimalDetails.js<\/strong><\/p>\n\n\n\n
import React from 'react';\n...\nexport default function AnimalDetails({ diet, scientificName }) {\n  return(\n    <div className=\"details\">\n      <h4>Details:<\/h4>\n      <div>\n        Scientific Name: {scientificName}.\n      <\/div>\n      <div>\n        Diet: {diet.map(food => convertFood(food)).join(' ')}\n      <\/div>\n    <\/div>\n  )\n}\n\nAnimalDetails.propTypes = {\n  diet: PropTypes.arrayOf(PropTypes.string).isRequired,\n  scientificName: PropTypes.string.isRequired,\n}<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f. \u062c\u0632\u0626\u06cc\u0627\u062a \u062c\u062f\u06cc\u062f \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u062a\u063a\u06cc\u06cc\u0631\u06cc \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a AnimalCard<\/code> \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n\n\n\n
\n\n\n\n
\u0645\u0631\u062d\u0644\u0647 \u06f3 \u2014 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc \u0628\u0627 children<\/code><\/h3>\n\n\n\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0648\u0634\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06af\u0631\u0648\u0647\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f. React \u06cc\u06a9 Prop \u062f\u0627\u062e\u0644\u06cc \u0628\u0647 \u0646\u0627\u0645 children<\/code> \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 Card<\/code> \u0628\u0633\u0627\u0632\u06cc\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0648\u0634\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n\n\n\n
mkdir src\/components\/Card\nnano src\/components\/Card\/Card.js<\/code><\/pre>\n\n\n\n
\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 children<\/code> \u0648 title<\/code> \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 div<\/code> \u0628\u067e\u06cc\u0686\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/Card\/Card.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport '.\/Card.css';\n\nexport default function Card({ children, title }) {\n  return(\n    <div className=\"card\">\n      <div className=\"card-details\">\n        <h2>{title}<\/h2>\n      <\/div>\n      {children}\n    <\/div>\n  )\n}\n\nCard.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.element), \n    PropTypes.element.isRequired\n  ]),\n  title: PropTypes.string.isRequired,\n}<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 CSS \u0622\u0646 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/Card\/Card.css<\/code><\/pre>\n\n\n\n
.card {\n    border: black solid 1px;\n    margin: 10px;\n    padding: 10px;\n    width: 200px;\n}\n\n.card-details {\n    border-bottom: gray solid 1px;\n    margin-bottom: 20px;\n}<\/code><\/pre>\n\n\n\n
\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 AnimalCard.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/AnimalCard\/AnimalCard.js<\/code><\/pre>\n\n\n\n
\u0628\u0631\u062e\u0644\u0627\u0641 \u0633\u0627\u06cc\u0631 Prop\u0647\u0627\u060c \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a children<\/code> \u0631\u0627 \u0628\u0647 \u0635\u0631\u0627\u062d\u062a \u067e\u0627\u0633 \u0646\u062f\u0647\u06cc\u062f. \u062f\u0631 \u0639\u0648\u0636\u060c JSX \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0639\u0646\u0627\u0635\u0631 \u0641\u0631\u0632\u0646\u062f HTML \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalCard\/AnimalCard.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '..\/Card\/Card';\nimport AnimalDetails from '..\/AnimalDetails\/AnimalDetails';\n\nexport default function AnimalCard({ name, size, ...props }) {\n  return(\n    <Card title=\"Animal\">\n      <h3>{name}<\/h3>\n      <div>{size}kg<\/div>\n      <AnimalDetails\n        {...props}\n      \/>\n    <\/Card>\n  )\n}\n\nAnimalCard.propTypes = {\n  name: PropTypes.string.isRequired,\n  size: PropTypes.number.isRequired,\n}<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0641\u0631\u0634 \u0634\u062f\u0647 \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0627\u0631\u062a \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0634\u062f\u0647 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f. \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Card<\/code> \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0647\u0631 \u062a\u0639\u062f\u0627\u062f \u0641\u0631\u0632\u0646\u062f \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0631\u0627 \u0628\u067e\u0630\u06cc\u0631\u062f.<\/p>\n\n\n\n
\n\n\n\n
\u0645\u0631\u062d\u0644\u0647 \u06f4 \u2014 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Props<\/h3>\n\n\n\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Card<\/code> \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Props \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0634\u0645\u0627 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u06a9\u062f\u0647\u0627\u06cc JSX \u0631\u0627 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u0645\u062e\u062a\u0644\u0641 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n\n\n\n
\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Card<\/code> \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 React \u062f\u0644\u062e\u0648\u0627\u0647 \u0628\u0647 \u0646\u0627\u0645 details<\/code> \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f. \u0641\u0627\u06cc\u0644 Card<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/Card\/Card.js<\/code><\/pre>\n\n\n\n
\u06cc\u06a9 Prop \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 details<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0632\u06cc\u0631 \u062a\u06af <h2><\/code> \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/Card\/Card.js<\/strong><\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport '.\/Card.css';\n\nexport default function Card({ children, details, title }) {\n  return(\n    <div className=\"card\">\n      <div className=\"card-details\">\n        <h2>{title}<\/h2>\n        {details}\n      <\/div>\n      {children}\n    <\/div>\n  )\n}\n\nCard.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.element), \n    PropTypes.element.isRequired\n  ]),\n  details: PropTypes.element,\n  title: PropTypes.string.isRequired,\n}\n\nCard.defaultProps = {\n  details: null,\n}<\/code><\/pre>\n\n\n\n
\u0628\u0631\u0627\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 Prop\u060c \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 null<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
\u0627\u06a9\u0646\u0648\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f AnimalCard<\/code> \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645 \u062a\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0647 Card<\/code> \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u062f. \u0641\u0627\u06cc\u0644 AnimalCard<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
nano src\/components\/AnimalCard\/AnimalCard.js<\/code><\/pre>\n\n\n\n
\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Card<\/code> \u0627\u0632 \u0642\u0628\u0644 \u0627\u0632 children<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u06a9\u062f\u0647\u0627\u06cc JSX \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u0639\u0628\u0627\u0631\u062a “Mammal” (\u067e\u0633\u062a\u0627\u0646\u062f\u0627\u0631) \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalCard\/AnimalCard.js<\/strong><\/p>\n\n\n\n
import React from 'react';\n...\n\nexport default function AnimalCard({ name, size, ...props }) {\n  return(\n    <Card title=\"Animal\" details={<em>Mammal<\/em>}>\n      <h3>{name}<\/h3>\n      <div>{size}kg<\/div>\n      <AnimalDetails\n        {...props}\n      \/>\n    <\/Card>\n  )\n}\n...<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f. \u0639\u0628\u0627\u0631\u062a \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n\n\n\n
\u0627\u06cc\u0646 Prop \u0628\u0633\u06cc\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f JSX \u0628\u0627 \u0647\u0631 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u0631\u0627 \u0628\u067e\u0630\u06cc\u0631\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a \u062d\u062a\u0645\u0627\u064b JSX \u0628\u0627\u0634\u062f\u061b \u0627\u06af\u0631 \u0646\u0634\u0627\u0646\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u0627\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639\u060c AnimalDetails<\/code> \u0631\u0627 \u0628\u0647 Prop \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 details<\/code> \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
wrapper-tutorial\/src\/components\/AnimalCard\/AnimalCard.js<\/strong><\/p>\n\n\n\n
import React from 'react';\n...\n\nexport default function AnimalCard({ name, size, ...props }) {\n  return(\n    <Card\n      title=\"Animal\"\n      details={\n        <AnimalDetails\n          {...props}\n        \/>\n      }\n    >\n      <h3>{name}<\/h3>\n      <div>{size}kg<\/div>\n    <\/Card>\n  )\n}\n...<\/code><\/pre>\n\n\n\n
\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f. \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u06a9\u0627\u0631\u062a \u0638\u0627\u0647\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Card<\/code> \u062f\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f JSX \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0642\u0631\u0627\u0631 \u062f\u0647\u062f. \u0634\u0645\u0627 \u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u06cc\u06a9 Prop \u0646\u06cc\u0633\u062a\u06cc\u062f\u061b \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0647 \u0647\u0631 \u062a\u0639\u062f\u0627\u062f Prop \u06a9\u0647 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
\n\n\n\n
\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/strong>
\u0634\u0645\u0627 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u0646\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0638\u0627\u0647\u0631 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0642\u0627\u0628\u0644 \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u0634\u0645\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u0633\u0627\u062e\u062a\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f Prop\u0647\u0627\u06cc \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u0631\u0627 \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 Prop \u062f\u0627\u062e\u0644\u06cc children<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u062f. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0633\u0627\u062e\u062a\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f JSX \u06cc\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Prop \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f.<\/p>\n\n\n\n
\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0634\u0631\u0627\u06cc\u0637 \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0634\u0648\u06cc\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u06a9\u062f \u0648 \u06cc\u06a9\u067e\u0627\u0631\u0686\u06af\u06cc \u0622\u0646 \u0628\u0647 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0628\u0631\u0633\u06cc\u062f.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/strong><\/a> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0645\u0642\u062f\u0645\u0647\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a React\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc (Wrapper Components) \u0631\u0627 \u0628\u0627 \u06a9\u0645\u06a9 Props \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u067e\u0648\u0634\u0634\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0648\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u0646\u062f \u0648 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f (Child Components) \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0627\u0635\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u06a9\u0631\u0631 …<\/p>\n","protected":false},"author":9,"featured_media":6854,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[190,2183],"tags":[2198,2193,2188,2186,2197,2184,2157,2187,2189,2196,2190,2199,2191,2200,2195,2194,2192,2185],"class_list":["post-6850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-2183","tag-component-reusability","tag-react-children-prop","tag-react-props","tag-wrapper-components","tag--jsx","tag--react","tag-2157","tag-2187","tag-2189","tag-2196","tag-2190","tag---ui","tag-2200","tag-2195","tag--spread--rest","tag-2192","tag-2185"],"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=6850"}],"version-history":[{"count":0,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6854"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}