Component Composition क्या है

Component composition का मतलब है एक बड़ा UI छोटे components से बनाना, बिल्कुल वैसे ही जैसे एक घर अलग-अलग बनाई गई walls, doors, और windows से बनता है।

In this page:

Components को एक साथ Compose करना
Inheritance की तुलना में Composition
Multiple Levels Deep Composing करना

Syntax

markup

function Parent() {
  return (
    <Wrapper>
      <ChildA />
      <ChildB prop={value} />
    </Wrapper>
  );
}

Components को एक साथ Compose करना

एक component अपने own JSX के अंदर दूसरे components render कर सकता है, बिल्कुल वैसे ही जैसे यह एक <div> या <p> render करता। यह आपको एक page को छोटे, well-defined pieces असेंबल करके बनाने देता है -- एक Header, एक Sidebar, एक Footer -- एक बड़े App component में।

Note: हर छोटे component को उस specific UI piece के नाम पर रखें जो यह represent करता है, जैसे Header या UserCard, composition को follow करना आसान रखने के लिए।

Warning: एक single composed component में बहुत सारे unrelated concerns nest करना इसे split करने के पूरे purpose को defeat करता है।

उदाहरण: Composing Components Together

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Header() {
      return <header><h1>My Site</h1></header>;
    }
    function Footer() {
      return <footer><p>&copy; 2024</p></footer>;
    }
    function App() {
      return (
        <div>
          <Header />
          <p>Main content goes here.</p>
          <Footer />
        </div>
      );
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Inheritance की तुलना में Composition

React components के बीच code reuse करने के लिए inheritance (एक base class extend करना) की तुलना में composition (components combine करना) को strongly favor करता है।

एक component की subclass बनाने के बजाय, आप props और children pass करते हैं एक shared component का behavior configure करने के लिए।

Note: अगर आप खुद को एक component को दूसरे से inherit करते देखें, तो उन्हें props के साथ compose करने का एक तरीका ढूंढें।

Warning: Object-oriented languages से आते हुए, React में class inheritance की ओर जाना tempting है -- यह generally composition के favor में discouraged है।

उदाहरण: Composition Over Inheritance

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Dialog({ title, children }) {
      return (
        <div style={{border: "1px solid #333", padding: "10px"}}>
          <h3>{title}</h3>
          {children}
        </div>
      );
    }
    function App() {
      return <Dialog title="Welcome"><p>This dialog is composed, not inherited.</p></Dialog>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Multiple Levels Deep Composing करना

Composition एक level तक सीमित नहीं है -- एक composed component खुद दूसरे composed components से बना हो सकता है, एक tree बनाते हुए। यह mirror करता है कि असली applications कैसे structured होते हैं: एक Page में Sections होते हैं, जिनमें Cards होते हैं, जिनमें और छोटे pieces होते हैं।

Note: Deeply nested composition React में normal और healthy है -- इस बारे में worry न करें कि आपका component tree कितना deep जाता है।

Warning: एक deeply composed tree में यह track खो जाना कि data कहां से originate होता है debugging को harder बना सकता है -- जैसे वे नीचे pass होते हैं prop names consistent रखें।

उदाहरण: Composing Multiple Levels Deep

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function Icon({ symbol }) { return <span>{symbol}</span>; }
    function IconButton({ symbol, label }) {
      return <button><Icon symbol={symbol} /> {label}</button>;
    }
    function Toolbar() {
      return <div><IconButton symbol="+" label="Add" /><IconButton symbol="-" label="Remove" /></div>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<Toolbar />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson Type-Checking Props with PropTypes Next Lesson → Reusable Component Patterns

Component Composition क्या है

Components को एक साथ Compose करना

Inheritance की तुलना में Composition

Multiple Levels Deep Composing करना

Chapter Quiz — Complete all 11 topics to unlock

Login to run this code