{"id":6678,"date":"2026-07-21T11:00:43","date_gmt":"2026-07-21T07:30:43","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6678"},"modified":"2026-07-21T11:00:43","modified_gmt":"2026-07-21T07:30:43","slug":"%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-state-%d8%af%d8%b1-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-%da%a9%d9%84%d8%a7%d8%b3%db%8c-%d8%b1%db%8c%d8%a7%da%a9","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-state-%d8%af%d8%b1-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-%da%a9%d9%84%d8%a7%d8%b3%db%8c-%d8%b1%db%8c%d8%a7%da%a9\/","title":{"rendered":"\u0645\u062f\u06cc\u0631\u06cc\u062a State \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc \u0631\u06cc\u200c\u0627\u06a9\u062a (React Class Components)"},"content":{"rendered":"

\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0631\u06cc\u200c\u0627\u06a9\u062a (React)\u060c \u0645\u0641\u0647\u0648\u0645 State<\/b> \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u0648 \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0635\u062d\u06cc\u062d State \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0644\u06cc\u062f\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648\u0628\u200c\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0633\u062a\u061b \u0627\u0632 \u0630\u062e\u06cc\u0631\u0647 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0641\u0631\u0645 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u0627\u0632 API.<\/p>\n

\n

\u0646\u06a9\u062a\u0647:<\/b> \u0627\u06af\u0631\u0686\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0631\u0633\u0645\u06cc \u0631\u06cc\u200c\u0627\u06a9\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Hooks<\/b> \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc (Functional Components) \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u062c\u062f\u06cc\u062f \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0627\u0645\u0627 \u062f\u0631\u06a9 \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a State \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u0647\u0645\u06cc\u062a \u0628\u0627\u0644\u0627\u06cc\u06cc \u062f\u0627\u0631\u062f. \u0627\u06cc\u0646 \u062f\u0627\u0646\u0634 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u062f\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc\u200c\u062a\u0631 (Legacy Code) \u0631\u0627 \u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u062e\u06cc \u0645\u062a\u062f\u0647\u0627\u06cc \u0645\u062a\u062f\u0627\u0648\u0644 \u0645\u0627\u0646\u0646\u062f componentDidCatch<\/code> (\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u0647\u0627) \u062a\u0646\u0647\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<\/blockquote>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 State \u0631\u0627 \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062b\u0627\u0628\u062a (Static) \u0648 \u0645\u062a\u063a\u06cc\u0631 (\u0628\u0631 \u0627\u0633\u0627\u0633 State \u0642\u0628\u0644\u06cc) \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631\u060c \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0633\u0627\u062f\u0647 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a.<\/p>\n

\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n

\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n

    \n
  • \n

    Node.js \u0648 npm:<\/b> \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0632 \u0646\u0633\u062e\u0647 \u0645\u062f\u0631\u0646 Node.js (\u0646\u0633\u062e\u0647 LTS \u0645\u0627\u0646\u0646\u062f v18 \u06cc\u0627 v20) \u0648 npm \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<\/li>\n

  • \n

    \u0622\u0634\u0646\u0627\u06cc\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 JavaScript (ES6)\u060c HTML \u0648 CSS.<\/b><\/p>\n<\/li>\n<\/ul>\n

    \u06af\u0627\u0645 \u06f1 \u2014 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/h2>\n

    \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0631\u06cc\u200c\u0627\u06a9\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n

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

    \n
    \n
    \n
    \n

    Bash<\/span><\/p>\n

    <\/div>\n<\/div>\n
    npx create-react-app state-class-tutorial\r\ncd<\/span> state-class-tutorial\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u062a\u0646\u0638\u06cc\u0645 registry \u067e\u06a9\u06cc\u062c \u0645\u0646\u06cc\u062c\u0631 npm (\u0648\u06cc\u0698\u0647 \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f)<\/h3>\n
    \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u062f\u0627\u0646\u0644\u0648\u062f \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627 \u0648 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a \u062a\u062d\u0631\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0645\u06cc\u0631\u0648\u0631 \u0631\u0633\u0645\u06cc \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/b> \u0628\u0631\u0627\u06cc npm \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    Bash<\/span><\/p>\n
    <\/div>\n<\/div>\n
    npm config set<\/span> registry https:\/\/npm.parmincloud.ir\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u0633\u067e\u0633 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    Bash<\/span><\/p>\n
    <\/div>\n<\/div>\n
    npm start\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0648\u06cc \u0622\u062f\u0631\u0633 http:\/\/localhost:3000<\/code> \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u06a9\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636<\/h3>\n
    \u06f1. \u0641\u0627\u06cc\u0644 src\/App.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0632\u06cc\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    JavaScript<\/span><\/p>\n
    <\/div>\n<\/div>\n
    import<\/span> React from<\/span> 'react'<\/span>;\r\nimport<\/span> '.\/App.css'<\/span>;\r\n\r\nfunction<\/span> App<\/span>() <\/span>{\r\n  return<\/span> <><\/span><\/><\/span><\/span>;\r\n}\r\n\r\nexport<\/span> default<\/span> App;\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u06f2. \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    Bash<\/span><\/p>\n
    <\/div>\n<\/div>\n
    rm src\/logo.svg\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u06f3. \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647\u200c\u0627\u06cc \u0645\u0646\u0638\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    Bash<\/span><\/p>\n
    <\/div>\n<\/div>\n
    mkdir -p src\/components\/App\r\nmv src\/App.* src\/components\/App\/\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u06f4. \u0645\u0633\u06cc\u0631 import \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 src\/index.js<\/code> \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    JavaScript<\/span><\/p>\n
    <\/div>\n<\/div>\n
    import<\/span> React from<\/span> 'react'<\/span>;\r\nimport<\/span> ReactDOM from<\/span> 'react-dom\/client'<\/span>;\r\nimport<\/span> '.\/index.css'<\/span>;\r\nimport<\/span> App from<\/span> '.\/components\/App\/App'<\/span>;\r\n\r\nconst<\/span> root = ReactDOM.createRoot(document<\/span>.getElementById('root'<\/span>));\r\nroot.render(\r\n  <React.StrictMode<\/span>><\/span>\r\n    <App<\/span> \/><\/span>\r\n  <\/React.StrictMode<\/span>><\/span><\/span>\r\n);\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u06af\u0627\u0645 \u06f2 \u2014 \u062a\u0639\u0631\u06cc\u0641 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 State \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/h2>\n
    \u062d\u0627\u0644\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u062d\u0635\u0648\u0644 (Product) \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u062f\u0647\u06cc\u0645.<\/p>\n
    \u067e\u0648\u0634\u0647 \u0648 \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    Bash<\/span><\/p>\n
    <\/div>\n<\/div>\n
    mkdir -p src\/components\/Product\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u0641\u0627\u06cc\u0644 src\/components\/Product\/Product.js<\/code> \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    JavaScript<\/span><\/p>\n
    <\/div>\n<\/div>\n
    import<\/span> React, { Component } from<\/span> 'react'<\/span>;\r\nimport<\/span> '.\/Product.css'<\/span>;\r\n\r\nexport<\/span> default<\/span> class<\/span> Product<\/span> extends<\/span> Component<\/span> <\/span>{\r\n  \/\/ \u062a\u0639\u0631\u06cc\u0641 State \u0627\u0648\u0644\u06cc\u0647<\/span>\r\n  state = {\r\n    cart<\/span>: [],\r\n    total<\/span>: 0<\/span>\r\n  }\r\n\r\n  currencyOptions = {\r\n    minimumFractionDigits<\/span>: 2<\/span>,\r\n    maximumFractionDigits<\/span>: 2<\/span>,\r\n  }\r\n\r\n  \/\/ \u0645\u062a\u062f\u06cc \u0628\u0631\u0627\u06cc \u0641\u0631\u0645\u062a\u200c\u062f\u0647\u06cc \u0642\u06cc\u0645\u062a<\/span>\r\n  getTotal = () =><\/span> {\r\n    return<\/span> this<\/span>.state.total.toLocaleString(undefined<\/span>, this<\/span>.currencyOptions);\r\n  }\r\n\r\n  render<\/span>()<\/span> {\r\n    return<\/span> (\r\n      <div<\/span> className<\/span>=\"wrapper\"<\/span>><\/span>\r\n        <div<\/span>><\/span>\r\n          \u0633\u0628\u062f \u062e\u0631\u06cc\u062f: {this.state.cart.length} \u0622\u06cc\u062a\u0645\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span>><\/span>\u0645\u062c\u0645\u0648\u0639 \u0642\u06cc\u0645\u062a: {this.getTotal()} \u0647\u0632\u0627\u0631 \u062a\u0648\u0645\u0627\u0646<\/div<\/span>><\/span>\r\n\r\n        <div<\/span> className<\/span>=\"product\"<\/span>><\/span>\r\n          <span<\/span> role<\/span>=\"img\"<\/span> aria-label<\/span>=\"ice cream\"<\/span>><\/span>\ud83c\udf66<\/span<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <button<\/span>><\/span>\u0627\u0641\u0632\u0648\u062f\u0646<\/button<\/span>><\/span>\r\n        <button<\/span>><\/span>\u062d\u0630\u0641<\/button<\/span>><\/span>\r\n      <\/div<\/span>><\/span><\/span>\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062f\u0631 src\/components\/Product\/Product.css<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    CSS<\/span><\/p>\n
    <\/div>\n<\/div>\n
    .product<\/span> span<\/span> {\r\n    font-size<\/span>: 100px<\/span>;\r\n}\r\n\r\n.wrapper<\/span> {\r\n    padding<\/span>: 20px<\/span>;\r\n    font-size<\/span>: 20px<\/span>;\r\n    direction<\/span>: rtl;\r\n    text-align<\/span>: right;\r\n}\r\n\r\n.wrapper<\/span> button<\/span> {\r\n    font-size<\/span>: 18px<\/span>;\r\n    margin<\/span>: 5px<\/span>;\r\n    padding<\/span>: 5px<\/span> 15px<\/span>;\r\n    background<\/span>: none;\r\n    border<\/span>: 1px<\/span> solid #ccc<\/span>;\r\n    cursor<\/span>: pointer;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u0633\u067e\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Product<\/code> \u0631\u0627 \u062f\u0631 src\/components\/App\/App.js<\/code> \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    JavaScript<\/span><\/p>\n
    <\/div>\n<\/div>\n
    import<\/span> React from<\/span> 'react'<\/span>;\r\nimport<\/span> Product from<\/span> '..\/Product\/Product'<\/span>;\r\n\r\nfunction<\/span> App<\/span>() <\/span>{\r\n  return<\/span> <Product<\/span> \/><\/span><\/span>;\r\n}\r\n\r\nexport<\/span> default<\/span> App;\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u06af\u0627\u0645 \u06f3 \u2014 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc State \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u062b\u0627\u0628\u062a (Static)<\/h2>\n
    \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0646 State \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a\u060c \u0647\u0631\u06af\u0632 \u0646\u0628\u0627\u06cc\u062f this.state<\/code> \u0631\u0627 \u0628\u0647 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/b>. \u062f\u0631 \u0639\u0648\u0636\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u0645\u062a\u062f \u0648\u06cc\u0698\u0647 this.setState()<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0645\u062a\u063a\u06cc\u0631 \u0648\u0627\u0628\u0633\u062a\u0647 \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0622\u0646 \u0646\u06cc\u0633\u062a (\u0645\u062b\u0644\u0627\u064b \u062f\u0631\u06cc\u0627\u0641\u062a \u06cc\u06a9 \u062f\u0627\u062f\u0647 \u062c\u062f\u06cc\u062f \u0627\u0632 API \u06a9\u0647 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0642\u0628\u0644\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f)\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 Object \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 setState<\/code> \u067e\u0627\u0633 \u062f\u0647\u06cc\u062f.<\/p>\n
    \u0641\u0627\u06cc\u0644 src\/components\/Product\/Product.js<\/code> \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    JavaScript<\/span><\/p>\n
    <\/div>\n<\/div>\n
    import<\/span> React, { Component } from<\/span> 'react'<\/span>;\r\nimport<\/span> '.\/Product.css'<\/span>;\r\n\r\nexport<\/span> default<\/span> class<\/span> Product<\/span> extends<\/span> Component<\/span> <\/span>{\r\n  state = {\r\n    cart<\/span>: [],\r\n    total<\/span>: 0<\/span>\r\n  }\r\n\r\n  \/\/ \u0645\u062a\u062f \u0627\u0641\u0632\u0648\u062f\u0646 \u0622\u06cc\u062a\u0645 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u062b\u0627\u0628\u062a<\/span>\r\n  add = () =><\/span> {\r\n    this<\/span>.setState({\r\n      cart<\/span>: ['\u0628\u0633\u062a\u0646\u06cc'<\/span>],\r\n      total<\/span>: 50<\/span>\r\n    });\r\n  }\r\n\r\n  \/\/ \u0645\u062a\u062f \u062e\u0627\u0644\u06cc \u06a9\u0631\u062f\u0646 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/span>\r\n  remove = () =><\/span> {\r\n    this<\/span>.setState({\r\n      cart<\/span>: []\r\n    });\r\n  }\r\n\r\n  currencyOptions = {\r\n    minimumFractionDigits<\/span>: 2<\/span>,\r\n    maximumFractionDigits<\/span>: 2<\/span>,\r\n  }\r\n\r\n  getTotal = () =><\/span> {\r\n    return<\/span> this<\/span>.state.total.toLocaleString(undefined<\/span>, this<\/span>.currencyOptions);\r\n  }\r\n\r\n  render<\/span>()<\/span> {\r\n    return<\/span> (\r\n      <div<\/span> className<\/span>=\"wrapper\"<\/span>><\/span>\r\n        <div<\/span>><\/span>\r\n          \u0633\u0628\u062f \u062e\u0631\u06cc\u062f: {this.state.cart.length} \u0622\u06cc\u062a\u0645\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span>><\/span>\u0645\u062c\u0645\u0648\u0639 \u0642\u06cc\u0645\u062a: {this.getTotal()} \u0647\u0632\u0627\u0631 \u062a\u0648\u0645\u0627\u0646<\/div<\/span>><\/span>\r\n\r\n        <div<\/span> className<\/span>=\"product\"<\/span>><\/span>\r\n          <span<\/span> role<\/span>=\"img\"<\/span> aria-label<\/span>=\"ice cream\"<\/span>><\/span>\ud83c\udf66<\/span<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <button<\/span> onClick<\/span>={this.add}<\/span>><\/span>\u0627\u0641\u0632\u0648\u062f\u0646<\/button<\/span>><\/span>\r\n        <button<\/span> onClick<\/span>={this.remove}<\/span>><\/span>\u062d\u0630\u0641<\/button<\/span>><\/span>\r\n      <\/div<\/span>><\/span><\/span>\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645 \u062f\u0631\u0628\u0627\u0631\u0647 Arrow Functions:<\/b> \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u062f\u0647\u0627\u06cc add<\/code> \u0648 remove<\/code> \u0628\u0647 \u0635\u0648\u0631\u062a Arrow Function (() => {}<\/code>) \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0644\u06cc\u062f\u0648\u0627\u0698\u0647 this<\/code> \u0628\u0647 \u0628\u0627\u0641\u062a (Context) \u062e\u0648\u062f\u0650 \u06a9\u0644\u0627\u0633 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u062f \u0648 \u0647\u0646\u06af\u0627\u0645 \u0627\u062c\u0631\u0627\u06cc this.setState<\/code> \u0628\u0627 \u062e\u0637\u0627 \u0645\u0648\u0627\u062c\u0647 \u0646\u0634\u0648\u06cc\u062f.<\/p>\n<\/blockquote>\n
    \u06af\u0627\u0645 \u06f4 \u2014 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc State \u0628\u0631 \u0627\u0633\u0627\u0633 State \u0642\u0628\u0644\u06cc<\/h2>\n
    \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u060c \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f State \u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644\u06cc \u0622\u0646 \u0648\u0627\u0628\u0633\u062a\u0647 \u0627\u0633\u062a (\u0645\u062b\u0644\u0627\u064b \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0622\u06cc\u062a\u0645 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u06cc\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0642\u06cc\u0645\u062a \u06a9\u0644).<\/p>\n
    \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0631\u06cc\u200c\u0627\u06a9\u062a \u062c\u0647\u062a \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0631\u0627\u06cc\u06cc\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc setState<\/code> \u0631\u0627 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc (Batch) \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u0631\u062c\u0627\u0639 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 this.state<\/code> \u062f\u0631\u0648\u0646 setState<\/code> \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627\u0639\u062b \u0627\u06cc\u062c\u0627\u062f \u0628\u0627\u06af \u0648 \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0642\u062f\u06cc\u0645\u06cc \u0634\u0648\u062f. \u0631\u0627\u0647 \u062d\u0644 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u060c \u067e\u0627\u0633 \u062f\u0627\u062f\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 setState<\/code><\/b> \u0627\u0633\u062a.<\/p>\n
    \u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0645\u062a\u062f\u0647\u0627\u06cc add<\/code> \u0648 remove<\/code> \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n
    \n
    \n
    \n
    \n
    JavaScript<\/span><\/p>\n
    <\/div>\n<\/div>\n
    import<\/span> React, { Component } from<\/span> 'react'<\/span>;\r\nimport<\/span> '.\/Product.css'<\/span>;\r\n\r\nconst<\/span> products = [\r\n  { emoji<\/span>: '\ud83c\udf66'<\/span>, name<\/span>: '\u0628\u0633\u062a\u0646\u06cc'<\/span>, price<\/span>: 50<\/span> },\r\n  { emoji<\/span>: '\ud83c\udf69'<\/span>, name<\/span>: '\u062f\u0648\u0646\u0627\u062a'<\/span>, price<\/span>: 25<\/span> },\r\n  { emoji<\/span>: '\ud83c\udf49'<\/span>, name<\/span>: '\u0647\u0646\u062f\u0648\u0627\u0646\u0647'<\/span>, price<\/span>: 40<\/span> }\r\n];\r\n\r\nexport<\/span> default<\/span> class<\/span> Product<\/span> extends<\/span> Component<\/span> <\/span>{\r\n  state = {\r\n    cart<\/span>: [],\r\n  }\r\n\r\n  \/\/ \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062d\u0635\u0648\u0644 \u0628\u0647 \u0633\u0628\u062f \u0628\u0627 \u062d\u0641\u0638 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0642\u0628\u0644\u06cc<\/span>\r\n  add = (product<\/span>) =><\/span> {\r\n    this<\/span>.setState(prevState<\/span> =><\/span> ({\r\n      cart<\/span>: [...prevState.cart, product],\r\n    }));\r\n  }\r\n\r\n  \/\/ \u062d\u0630\u0641 \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0627\u0632 \u0645\u062d\u0635\u0648\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647<\/span>\r\n  remove = (product<\/span>) =><\/span> {\r\n    this<\/span>.setState(prevState<\/span> =><\/span> {\r\n      const<\/span> cart = [...prevState.cart];\r\n      const<\/span> productIndex = cart.findIndex(p<\/span> =><\/span> p.name === product.name);\r\n      \r\n      if<\/span> (productIndex < 0<\/span>) {\r\n        return<\/span>; \/\/ \u0627\u06af\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u0631 \u0633\u0628\u062f \u0646\u0628\u0648\u062f\u060c \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f<\/span>\r\n      }\r\n      \r\n      cart.splice(productIndex, 1<\/span>);\r\n      return<\/span> { cart };\r\n    });\r\n  }\r\n\r\n  currencyOptions = {\r\n    minimumFractionDigits<\/span>: 2<\/span>,\r\n    maximumFractionDigits<\/span>: 2<\/span>,\r\n  }\r\n\r\n  \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u062c\u0645\u0648\u0639 \u0642\u06cc\u0645\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0628\u062f<\/span>\r\n  getTotal = () =><\/span> {\r\n    const<\/span> total = this<\/span>.state.cart.reduce((totalCost, item<\/span>) =><\/span> totalCost + item.price, 0<\/span>);\r\n    return<\/span> total.toLocaleString(undefined<\/span>, this<\/span>.currencyOptions);\r\n  }\r\n\r\n  render<\/span>()<\/span> {\r\n    return<\/span> (\r\n      <div<\/span> className<\/span>=\"wrapper\"<\/span>><\/span>\r\n        <div<\/span>><\/span>\r\n          \u0633\u0628\u062f \u062e\u0631\u06cc\u062f: {this.state.cart.length} \u0622\u06cc\u062a\u0645\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span>><\/span>\u0645\u062c\u0645\u0648\u0639 \u0642\u06cc\u0645\u062a: {this.getTotal()} \u0647\u0632\u0627\u0631 \u062a\u0648\u0645\u0627\u0646<\/div<\/span>><\/span>\r\n\r\n        <div<\/span>><\/span>\r\n          {products.map(product => (\r\n            <div<\/span> key<\/span>={product.name}<\/span>><\/span>\r\n              <div<\/span> className<\/span>=\"product\"<\/span>><\/span>\r\n                <span<\/span> role<\/span>=\"img\"<\/span> aria-label<\/span>={product.name}<\/span>><\/span>{product.emoji}<\/span<\/span>><\/span>\r\n              <\/div<\/span>><\/span>\r\n              <button<\/span> onClick<\/span>={()<\/span> =><\/span> this.add(product)}>\u0627\u0641\u0632\u0648\u062f\u0646<\/button<\/span>><\/span>\r\n              <button<\/span> onClick<\/span>={()<\/span> =><\/span> this.remove(product)}>\u062d\u0630\u0641<\/button<\/span>><\/span>\r\n            <\/div<\/span>><\/span>\r\n          ))}\r\n        <\/div<\/span>><\/span>\r\n      <\/div<\/span>><\/span><\/span>\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634:<\/h3>\n
    \u06f1. \u0639\u062f\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 (Immutability):<\/b> \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0622\u0631\u0627\u06cc\u0647 cart<\/code> \u0627\u0628\u062a\u062f\u0627 \u0628\u0627 Spread Operator ([...prevState.cart]<\/code>) \u06cc\u06a9 \u06a9\u067e\u06cc \u0627\u0632 \u0622\u0646 \u062a\u0647\u06cc\u0647 \u06a9\u0631\u062f\u06cc\u0645. \u06f2. \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0636\u0627\u0641\u06cc:<\/b> \u062f\u0631 \u0645\u062a\u062f remove<\/code> \u0627\u06af\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u0631 \u0633\u0628\u062f \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0645\u0642\u062f\u0627\u0631 undefined<\/code> \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0631\u06cc\u200c\u0627\u06a9\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u06cc\u200c\u062f\u0644\u06cc\u0644 \u0645\u062c\u062f\u062f\u0627\u064b \u0631\u0646\u062f\u0631 \u0646\u06a9\u0646\u062f.<\/p>\n
    \u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/h2>\n
    \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a State \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc \u0631\u06cc\u200c\u0627\u06a9\u062a \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u062f. \u0622\u0645\u0648\u062e\u062a\u06cc\u062f \u06a9\u0647 \u0686\u0637\u0648\u0631 State \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u0642\u0627\u062f\u06cc\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062a\u062f setState<\/code> \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u06cc\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 State \u0642\u0628\u0644\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 (Mutation) \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n
    <\/div>","protected":false},"excerpt":{"rendered":"
    \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0631\u06cc\u200c\u0627\u06a9\u062a (React)\u060c \u0645\u0641\u0647\u0648\u0645 State \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u0648 \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0635\u062d\u06cc\u062d State \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u0644\u06cc\u062f\u06cc\u200c\u062a\u0631\u06cc\u0646 \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648\u0628\u200c\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0633\u062a\u061b \u0627\u0632 \u0630\u062e\u06cc\u0631\u0647 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0641\u0631\u0645 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u0627\u0632 API. \u0646\u06a9\u062a\u0647: \u0627\u06af\u0631\u0686\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a […]<\/p>\n","protected":false},"author":9,"featured_media":6680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[190,67],"tags":[1840,1841,1839,1843,1837,1838,1834,1835,1836,1842,1572],"class_list":["post-6678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-67","tag-class-components---","tag--setstate--react","tag-1839","tag---state---","tag--state--react","tag--class-component--functional-component","tag-1834","tag-1835","tag--componentdidcatch---","tag-1842"],"aioseo_notices":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6678","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=6678"}],"version-history":[{"count":2,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6678\/revisions"}],"predecessor-version":[{"id":6681,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6678\/revisions\/6681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6680"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}