{"id":66868,"date":"2024-06-16T10:29:46","date_gmt":"2024-06-16T06:59:46","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-component-design-in-react-521g\/"},"modified":"2024-06-16T10:29:46","modified_gmt":"2024-06-16T06:59:46","slug":"a-beginners-guide-to-component-design-in-react-521g","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/a-beginners-guide-to-component-design-in-react-521g\/","title":{"rendered":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc\u0627\u0646 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 React"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0645\u0639\u0631\u0641\u06cc<\/p>\n

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

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0686\u06cc\u0633\u062a\u061f<\/p>\n

\u0622 \u062c\u0632\u0621 \u062f\u0631 React \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u06a9\u062f \u06a9\u0648\u0686\u06a9 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc LEGO \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f. \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u0644\u06af\u0648 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc React \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u062b\u0627\u0644 \u0631\u0648\u0632\u0645\u0631\u0647:<\/p>\n

\u06cc\u06a9 \u0645\u0627\u0634\u06cc\u0646 \u0631\u0627 \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f. \u062e\u0648\u062f\u0631\u0648 \u0627\u0632 \u0642\u0637\u0639\u0627\u062a \u0628\u0633\u06cc\u0627\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0645\u0648\u062a\u0648\u0631\u060c \u0686\u0631\u062e \u0647\u0627 \u0648 \u0635\u0646\u062f\u0644\u06cc \u0647\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u06cc\u06a9 \u062c\u0632\u0621 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628\u060c \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0645\u0627\u0646\u0646\u062f \u0647\u062f\u0631\u060c \u067e\u0627\u0648\u0631\u0642\u06cc \u0648 \u0646\u0627\u062d\u06cc\u0647 \u0645\u062d\u062a\u0648\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u062c\u0632\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f \u062a\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f. \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0633\u0626\u0648\u0644 \u0627\u0631\u0627\u0626\u0647 \u0628\u062e\u0634 \u06a9\u0648\u0686\u06a9\u06cc \u0627\u0632 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a.<\/p>\n

\u0627\u0646\u0648\u0627\u0639 \u0642\u0637\u0639\u0627\u062a<\/p>\n

\u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc<\/p>\n

\u0622 \u062c\u0632\u0621 \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0633\u0627\u062f\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u06a9\u0647 props \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0639\u0646\u0635\u0631 React \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0646\u0648\u0634\u062a\u0646 \u0648 \u062f\u0631\u06a9 \u0627\u06cc\u0646 \u0627\u062c\u0632\u0627 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a.<\/p>\n

\u0645\u062b\u0627\u0644:<\/p>\n

function Welcome(props) {
\n return <h1>Hello, {props.name}!<\/h1>;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c Welcome \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644 \u0647\u0627 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u067e\u06cc\u0627\u0645 \u062a\u0628\u0631\u06cc\u06a9 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n

\u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc:<\/p>\n

\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u0633\u0627\u062f\u0647 \u0648 \u0628\u062f\u0648\u0646 \u062d\u0627\u0644\u062a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f
\n\u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u062a\u0631 \u062f\u0631 \u0627\u06a9\u062b\u0631 \u0645\u0648\u0627\u0631\u062f
\n\u0628\u0627 React Hooks\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062d\u0627\u0644\u062a \u0648 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u0646\u062f<\/p>\n

\u0627\u062c\u0632\u0627\u06cc \u06a9\u0644\u0627\u0633<\/p>\n

\u0622 \u062c\u0632\u0621 \u06a9\u0644\u0627\u0633 \u062c\u0632\u0621 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062d\u0627\u0644\u062a \u062e\u0648\u062f \u0631\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u062d\u0648 \u06a9\u0644\u0627\u0633 ES6 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0645\u062b\u0627\u0644:<\/p>\n

class Welcome extends React.Component {
\n render() {
\n return <h1>Hello, {this.props.name}!<\/h1>;
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c Welcome \u06cc\u06a9 \u062c\u0632\u0621 \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 props \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u062a\u0628\u0631\u06cc\u06a9 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n

\u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u06a9\u0644\u0627\u0633:<\/p>\n

\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u0634 \u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u06cc\u0627 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u062f\u0627\u0631\u06cc\u062f<\/p>\n

\u0633\u0627\u062e\u062a\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0633\u0627\u062f\u0647 \u0628\u0633\u0627\u0632\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645:<\/p>\n

\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 App.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:
\nimport React from ‘react’;<\/p>\n

function App() {
\n return (
\n <div>
\n <h1>My First Component<\/h1>
\n <Welcome name=”John” \/>
\n <\/div>
\n );
\n}<\/p>\n

function Welcome(props) {
\n return <h1>Hello, {props.name}!<\/h1>;
\n}<\/p>\n

export default App;<\/p>\n

\u0645\u0648\u0644\u0641\u0647 App \u0631\u0627 \u062f\u0631 index.js \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f:
\nimport React from ‘react’;
\nimport ReactDOM from ‘react-dom’;
\nimport App from ‘.\/App’;<\/p>\n

ReactDOM.render(<App \/>, document.getElementById(‘root’));<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u0627 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u0634\u200c\u0622\u0645\u062f\u06af\u0648\u06cc\u06cc \u0633\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 \u06a9\u0647 \u067e\u06cc\u0627\u0645 \u062a\u0628\u0631\u06cc\u06a9 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0645\u0624\u0644\u0641\u0647 App \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n

\u0627\u062c\u0632\u0627\u0621 \u0648 \u0648\u0636\u0639\u06cc\u062a<\/p>\n

\u0644\u0648\u0627\u0632\u0645 \u062c\u0627\u0646\u0628\u06cc<\/p>\n

\u0644\u0648\u0627\u0632\u0645 \u062c\u0627\u0646\u0628\u06cc \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u06cc\u06a9 \u062c\u0632\u0621 React \u0647\u0633\u062a\u0646\u062f. \u0622\u0646\u0647\u0627 \u0628\u0647 \u0647\u0645\u0627\u0646 \u0631\u0648\u0634\u06cc \u06a9\u0647 \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627 \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n

\u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0642\u0637\u0639\u0627\u062a \u067e\u0627\u0633:<\/p>\n

function Welcome(props) {
\n return <h1>Hello, {props.name}!<\/h1>;
\n}<\/p>\n

<Welcome name=”Alice” \/><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c name \u06cc\u06a9 \u067e\u0627\u06cc\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Welcome \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f<\/p>\n

\u062d\u0627\u0644\u062a<\/p>\n

\u062d\u0627\u0644\u062a \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f. State \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u0634\u0648\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useState Hook \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0631\u062f.<\/p>\n

\u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0627\u0644\u062a:<\/p>\n

import React, { useState } from ‘react’;<\/p>\n

function Counter() {
\n const [count, setCount] = useState(0);<\/p>\n

return (
\n <div>
\n <p>You clicked {count} times<\/p>
\n <button onClick={() => setCount(count + 1)}>
\n Click me
\n <\/button>
\n <\/div>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c Counter \u06cc\u06a9 \u062c\u0632\u0621 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 useState Hook \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0634\u0645\u0627\u0631\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0622\u0647\u0646\u06af\u0633\u0627\u0632\u06cc \u0627\u062c\u0632\u0627\u0621<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a UI \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0631\u062f. \u0628\u0647 \u0627\u06cc\u0646 \u0645\u06cc\u06af\u0646 \u06a9\u0627\u0645\u067e\u0648\u0632\u06cc\u062a \u0627\u062c\u0632\u0627.<\/p>\n

\u0645\u062b\u0627\u0644:<\/p>\n

function App() {
\n return (
\n <div>
\n <Header \/>
\n <Content \/>
\n <Footer \/>
\n <\/div>
\n );
\n}<\/p>\n

function Header() {
\n return <h1>This is the header<\/h1>;
\n}<\/p>\n

function Content() {
\n return <p>This is the content<\/p>;
\n}<\/p>\n

function Footer() {
\n return <p>This is the footer<\/p>;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c App \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc Header\u060c Content \u0648 Footer \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0631\u0627 \u06a9\u0648\u0686\u06a9 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f: \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u062f\u0631\u06a9 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0633\u0627\u0646\u0647 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc\u060c \u0628\u0647 \u062c\u0627\u06cc \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0632\u0631\u06af \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0644 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0647 \u06a9\u0627\u0631\u0628\u0631\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u06a9\u0648\u0686\u06a9\u062a\u0631 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f. ProfileHeader\u060c ProfilePicture\u060c ProfileBio\u060c \u0648 ProfilePosts. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u0633\u062a\u0642\u0644 \u0647\u0631 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f<\/p>\n

\/\/ ProfileHeader.js
\nimport React from ‘react’;<\/p>\n

function ProfileHeader({ name }) {
\n return <h1>{name}’s Profile;
\n}<\/p>\n

export default ProfileHeader;<\/p>\n

\/\/ ProfilePicture.js
\nimport React from ‘react’;<\/p>\n

function ProfilePicture({ imageUrl }) {
\n return ;
\n}<\/p>\n

export default ProfilePicture;<\/p>\n

\/\/ ProfileBio.js
\nimport React from ‘react’;<\/p>\n

function ProfileBio({ bio }) {
\n return {bio};
\n}<\/p>\n

export default ProfileBio;<\/p>\n

\/\/ ProfilePosts.js
\nimport React from ‘react’;<\/p>\n

function ProfilePosts({ posts }) {
\n return (<\/p>\n

{posts.map(post => (
\n {post.content}
\n ))}<\/p>\n

);
\n}<\/p>\n

export default ProfilePosts;<\/p>\n

\/\/ UserProfile.js
\nimport React from ‘react’;
\nimport ProfileHeader from ‘.\/ProfileHeader’;
\nimport ProfilePicture from ‘.\/ProfilePicture’;
\nimport ProfileBio from ‘.\/ProfileBio’;
\nimport ProfilePosts from ‘.\/ProfilePosts’;<\/p>\n

function UserProfile({ user }) {
\n return (<\/p>\n

);
\n}<\/p>\n

export default UserProfile;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0648\u0627\u062d\u062f: \u0647\u0631 \u062c\u0632\u0621 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u062a\u0633\u062a \u0648 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0622\u0646\u0647\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u06a9\u0646\u062f.<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc\u060c \u0627\u0644\u0641 ProductCard \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0645\u0633\u0626\u0648\u0644 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u062d\u0635\u0648\u0644 \u0628\u0627\u0634\u062f. \u0647\u0631 \u06af\u0648\u0646\u0647 \u0645\u0646\u0637\u0642 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062d\u0635\u0648\u0644 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 \u06cc\u06a9 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0634\u0648\u062f AddToCartButton \u062c\u0632\u0621. \u0627\u06cc\u0646 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0631 \u062c\u0632\u0621 \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0648\u0627\u062d\u062f \u0627\u0633\u062a.<\/p>\n

\/\/ ProductCard.js
\nimport React from ‘react’;<\/p>\n

function ProductCard({ product }) {
\n return (
\n <div>
\n <h2>{product.name}<\/h2>
\n <p>{product.description}<\/p>
\n <p>${product.price}<\/p>
\n <\/div>
\n );
\n}<\/p>\n

export default ProductCard;<\/p>\n

\/\/ AddToCartButton.js
\nimport React from ‘react’;<\/p>\n

function AddToCartButton({ onAddToCart }) {
\n return <button onClick={onAddToCart}>Add to Cart<\/button>;
\n}<\/p>\n

export default AddToCartButton;<\/p>\n

\/\/ ProductPage.js
\nimport React from ‘react’;
\nimport ProductCard from ‘.\/ProductCard’;
\nimport AddToCartButton from ‘.\/AddToCartButton’;<\/p>\n

function ProductPage({ product, onAddToCart }) {
\n return (
\n <div>
\n <ProductCard product={product} \/>
\n <AddToCartButton onAddToCart={onAddToCart} \/>
\n <\/div>
\n );
\n}<\/p>\n

export default ProductPage;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 Props \u0648 \u062d\u0627\u0644\u062a \u0639\u0627\u0642\u0644\u0627\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f: \u0627\u0632 props \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0627\u062f\u0647 \u0648 \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0627\u0644\u062a \u062f\u0631 \u0645\u06a9\u0627\u0646 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u0622\u0646 \u0631\u0627 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0646\u0637\u0642\u06cc \u0627\u0633\u062a \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0622\u0628 \u0648 \u0647\u0648\u0627\u060c \u0627\u0632 props \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627\u06cc \u0641\u0639\u0644\u06cc \u0628\u0647 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f WeatherDisplay \u062c\u0632\u0621. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062d\u0627\u0644\u062a \u062f\u0631 a WeatherFetcher \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0628 \u0648 \u0647\u0648\u0627. \u0627\u06cc\u0646 \u062c\u0631\u06cc\u0627\u0646 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0634\u0641\u0627\u0641 \u0648 \u0642\u0627\u0628\u0644 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n

\/\/ WeatherDisplay.js
\nimport React from ‘react’;<\/p>\n

function WeatherDisplay({ weather }) {
\n return (
\n <div>
\n <h2>Current Weather<\/h2>
\n <p>Temperature: {weather.temperature}\u00b0C<\/p>
\n <p>Condition: {weather.condition}<\/p>
\n <\/div>
\n );
\n}<\/p>\n

export default WeatherDisplay;<\/p>\n

\/\/ WeatherFetcher.js
\nimport React, { useState, useEffect } from ‘react’;
\nimport WeatherDisplay from ‘.\/WeatherDisplay’;<\/p>\n

function WeatherFetcher() {
\n const [weather, setWeather] = useState(null);<\/p>\n

useEffect(() => {
\n fetch(‘https:\/\/api.weatherapi.com\/v1\/current.json?key=YOUR_API_KEY&q=London’)
\n .then(response => response.json())
\n .then(data => setWeather(data.current));
\n }, []);<\/p>\n

return weather ? <WeatherDisplay weather={weather} \/> : Loading…p>;
\n}<\/p>\n

export default WeatherFetcher;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062a\u0631\u06a9\u06cc\u0628 \u0628\u06cc\u0634 \u0627\u0632 \u0627\u0631\u062b: \u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0631\u0627\u062b\u062a\u060c \u0627\u062c\u0632\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u062f \u0634\u0645\u0627 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u062a\u0631 \u0628\u0627\u0634\u062f \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0634\u0648\u062f.<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0627\u0634\u0628\u0648\u0631\u062f\u060c \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0627\u06cc\u0647 Widget \u06a9\u0644\u0627\u0633 \u0648 \u0627\u0631\u062b \u0628\u0631\u062f\u0646 \u0627\u0632 \u0622\u0646\u060c \u0627\u062c\u0632\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0645\u0627\u0646\u0646\u062f ChartWidget\u060c TableWidget\u060c \u0648 SummaryWidget. \u0627\u06cc\u0646 \u0627\u062c\u0632\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f Dashboard \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f UI \u0646\u0647\u0627\u06cc\u06cc. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u062a\u0631 \u0627\u0633\u062a \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0627\u0633\u062a.<\/p>\n

\/\/ ChartWidget.js
\nimport React from ‘react’;<\/p>\n

function ChartWidget() {
\n return <div>Chart Widget<\/div>;
\n}<\/p>\n

export default ChartWidget;<\/p>\n

\/\/ TableWidget.js
\nimport React from ‘react’;<\/p>\n

function TableWidget() {
\n return <div>Table Widget<\/div>;
\n}<\/p>\n

export default TableWidget;<\/p>\n

\/\/ SummaryWidget.js
\nimport React from ‘react’;<\/p>\n

function SummaryWidget() {
\n return <div>Summary Widget<\/div>;
\n}<\/p>\n

export default SummaryWidget;<\/p>\n

\/\/ Dashboard.js
\nimport React from ‘react’;
\nimport ChartWidget from ‘.\/ChartWidget’;
\nimport TableWidget from ‘.\/TableWidget’;
\nimport SummaryWidget from ‘.\/SummaryWidget’;<\/p>\n

function Dashboard() {
\n return (
\n <div>
\n <ChartWidget \/>
\n <TableWidget \/>
\n <SummaryWidget \/>
\n <\/div>
\n );
\n}<\/p>\n

export default Dashboard;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u062f \u0642\u0627\u0628\u0644 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc: \u06a9\u062f\u0647\u0627\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u062e\u0648\u0627\u0646\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f. \u0627\u0632 \u0646\u0627\u0645 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627 \u0648 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0645\u0646\u0637\u0642 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0646\u0638\u0631\u0627\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u067e\u0644\u062a \u0641\u0631\u0645 \u0648\u0628\u0644\u0627\u06af \u0646\u0648\u06cc\u0633\u06cc\u060c \u0627\u0632 \u0646\u0627\u0645 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f Post\u060c Comment\u060c \u0648 AuthorBio. \u0628\u0631\u0627\u06cc \u062a\u0648\u0636\u06cc\u062d \u0645\u0646\u0637\u0642 \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c \u0645\u0627\u0646\u0646\u062f \u0686\u06af\u0648\u0646\u06af\u06cc Post \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062c\u062f\u06cc\u062f \u062f\u0631\u06a9 \u06a9\u0646\u0646\u062f \u0648 \u062f\u0631 \u0622\u0646 \u0645\u0634\u0627\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f.<\/p>\n

\/\/ Post.js
\nimport React from ‘react’;<\/p>\n

\/\/ Post.js
\nimport React, { useState, useEffect } from ‘react’;<\/p>\n

function Post({ postId }) {
\n const [post, setPost] = useState(null);
\n const [loading, setLoading] = useState(true);<\/p>\n

\/\/ Fetch the post data when the component mounts
\n useEffect(() => {
\n async function fetchPost() {
\n try {
\n const response = await fetch(`https:\/\/api.example.com\/posts\/${postId}`);
\n const data = await response.json();
\n setPost(data);
\n } catch (error) {
\n console.error(‘Error fetching post:’, error);
\n } finally {
\n setLoading(false);
\n }
\n }<\/p>\n

fetchPost();
\n }, [postId]);<\/p>\n

if (loading) {
\n return <p>Loading…<\/p>;
\n }<\/p>\n

if (!post) {
\n return <p>Post not found<\/p>;
\n }<\/p>\n

return (
\n <div>
\n <h2>{post.title}<\/h2>
\n <p>{post.content}<\/p>
\n <\/div>
\n );
\n}<\/p>\n

export default Post;<\/p>\n

\/\/ Comment.js
\nimport React from ‘react’;<\/p>\n

function Comment({ author, text }) {
\n return (
\n <div>
\n <p><strong>{author}<\/strong>: {text}p>
\n <\/div>
\n );
\n}<\/p>\n

export default Comment;<\/p>\n

\/\/ AuthorBio.js
\nimport React from ‘react’;<\/p>\n

function AuthorBio({ author }) {
\n return (
\n <div>
\n <h3>About the Author<\/h3>
\n <p>{author.bio}<\/p>
\n <\/div>
\n );
\n}<\/p>\n

export default AuthorBio;<\/p>\n

\/\/ Blog.js
\nimport React, { useState, useEffect } from ‘react’;
\nimport Post from ‘.\/Post’;
\nimport Comment from ‘.\/Comment’;
\nimport AuthorBio from ‘.\/AuthorBio’;<\/p>\n

function Blog({ postId }) {
\n const [comments, setComments] = useState([]);
\n const [author, setAuthor] = useState(null);<\/p>\n

\/\/ Fetch comments and author data when the component mounts
\n useEffect(() => {
\n async function fetchComments() {
\n try {
\n const response = await fetch(`https:\/\/api.example.com\/posts\/${postId}\/comments`);
\n const data = await response.json();
\n setComments(data);
\n } catch (error) {
\n console.error(‘Error fetching comments:’, error);
\n }
\n }<\/p>\n

async function fetchAuthor() {
\n try {
\n const response = await fetch(`https:\/\/api.example.com\/posts\/${postId}\/author`);
\n const data = await response.json();
\n setAuthor(data);
\n } catch (error) {
\n console.error(‘Error fetching author:’, error);
\n }
\n }<\/p>\n

fetchComments();
\n fetchAuthor();
\n }, [postId]);<\/p>\n

return (
\n <div>
\n <Post postId={postId} \/>
\n {author && <AuthorBio author={author} \/>}
\n <h3>Comments<\/h3>
\n {comments.map((comment) => (
\n <Comment key={comment.id} author={comment.author} text={comment.text} \/>
\n ))}
\n <\/div>
\n );
\n}<\/p>\n

export default Blog;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f: \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u062e\u0644\u06cc React \u0627\u0632 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0645\u062c\u062f\u062f \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u062e\u0648\u062f\u062f\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f React.memo \u0648 useCallback.<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0686\u062a\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f React.memo \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u0645\u062c\u062f\u062f \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc MessageList \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f useCallback \u0628\u0631\u0627\u06cc \u0628\u0647 \u062e\u0627\u0637\u0631 \u0633\u067e\u0631\u062f\u0646 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 MessageInput \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u062a\u0648\u0627\u0628\u0639 \u062c\u062f\u06cc\u062f \u062f\u0631 \u0647\u0631 \u0631\u0646\u062f\u0631.<\/p>\n

\/\/ MessageList.js
\nimport React from ‘react’;<\/p>\n

const MessageList = React.memo(({ messages }) => {
\n return (
\n <ul>
\n {messages.map(message => (
\n <li key={message.id}>{message.text}<\/li>
\n ))}
\n <\/ul>
\n );
\n});<\/p>\n

export default MessageList;<\/p>\n

\/\/ MessageInput.js
\nimport React, { useState, useCallback } from ‘react’;<\/p>\n

function MessageInput({ onSendMessage }) {
\n const [text, setText] = useState(”);<\/p>\n

const handleChange = useCallback((e) => {
\n setText(e.target.value);
\n }, []);<\/p>\n

const handleSubmit = useCallback((e) => {
\n e.preventDefault();
\n onSendMessage(text);
\n setText(”);
\n }, [text, onSendMessage]);<\/p>\n

return (
\n <form onSubmit={handleSubmit}>
\n <input type=”text” value={text} onChange={handleChange} \/>
\n <button type=”submit”>Send<\/button>
\n <\/form>
\n );
\n}<\/p>\n

export default MessageInput;<\/p>\n

\/\/ ChatApp.js
\nimport React, { useState } from ‘react’;
\nimport MessageList from ‘.\/MessageList’;
\nimport MessageInput from ‘.\/MessageInput’;<\/p>\n

function ChatApp() {
\n const [messages, setMessages] = useState([]);<\/p>\n

const handleSendMessage = (text) => {
\n setMessages([…messages, { id: messages.length, text }]);
\n };<\/p>\n

return (
\n <div>
\n <MessageList messages={messages} \/>
\n <MessageInput onSendMessage={handleSendMessage} \/>
\n <\/div>
\n );
\n}<\/p>\n

export default ChatApp;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0645\u0646\u0633\u062c\u0645: \u0627\u0632 \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc CSS\u060c \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u0633\u0628\u06a9 \u06cc\u0627 \u0631\u0648\u0634 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u06cc\u0645 \u0634\u0645\u0627 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0645\u062b\u0627\u0644: \u062f\u0631 \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc\u060c \u0627\u0632 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0645\u062d\u062f\u0648\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0627\u0632 \u062a\u0636\u0627\u062f \u0633\u0628\u06a9 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u06cc\u0627 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f styled-components \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0628\u0631\u0646\u0627\u0645\u0647.<\/p>\n

\/\/ ProfileHeader.module.css
\n.header {
\n font-size: 2em;
\n color: blue;
\n}<\/p>\n

\/\/ ProfileHeader.js
\nimport React from ‘react’;
\nimport styles from ‘.\/ProfileHeader.module.css’;<\/p>\n

function ProfileHeader({ name }) {
\n return <h1 className={styles.header}>{name}’s Profile;
\n}<\/p>\n

export default ProfileHeader;<\/p>\n

\/\/ Profile.js
\nimport React from ‘react’;
\nimport ProfileHeader from ‘.\/ProfileHeader’;<\/p>\n

function Profile({ user }) {
\n return (<\/p>\n

);
\n}<\/p>\n

export default Profile;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc React \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0645\u0642\u06cc\u0627\u0633\u200c\u0628\u0646\u062f\u06cc \u0622\u0646\u200c\u0647\u0627 \u0622\u0633\u0627\u0646 \u0628\u0627\u0634\u062f.<\/p>\n

\u0646\u062a\u06cc\u062c\u0647<\/p>\n

\u0628\u0627 \u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 React\u060c \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u060c \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 React \u0647\u0633\u062a\u0646\u062f \u0648 \u062f\u0631\u06a9 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u0648\u062b\u0631 \u0648 \u062a\u0631\u06a9\u06cc\u0628 \u0622\u0646\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u06a9\u0648\u0686\u06a9 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0627\u062c\u0632\u0627\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0639\u0627\u0642\u0644\u0627\u0646\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0648 \u062d\u0627\u0644\u062a \u0647\u0627\u060c \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0633\u0627\u0632\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u0631\u0628\u0627\u0631\u0647 \u0622\u0646 \u062a\u062d\u0642\u06cc\u0642 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0645\u0627\u06cc\u0644 \u0628\u0648\u062f\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f \u062a\u0648\u06cc\u06cc\u062a\u0631. \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9! <\/p>\n

\u0645\u0645\u0646\u0648\u0646 \u06a9\u0647 \u062e\u0648\u0627\u0646\u062f\u06cc\u062f \ud83d\ude42<\/p>\n

\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n