ES6 Classes & Constructors

What design pattern is implemented by the Container class?

class Component {
  constructor(props = {}) {
    this.props = props;
  }
}

class Button extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return `<button class="${this.props.className || ''}">${this.props.label}</button>`;
  }
}

class Container extends Component {
  constructor(props) {
    super(props);
    this.children = props.children || [];
  }
  
  render() {
    return `<div>${this.children.map(child => child.render()).join('')}</div>`;
  }
}

Factory pattern
Composite pattern
The Container class implements the Composite pattern: 1) It allows composition of objects into tree structures, 2) It lets clients treat individual objects and compositions uniformly, 3) The Container can contain other Components, including other Containers, 4) Both leaf nodes (Button) and composite nodes (Container) share a common interface, 5) This pattern is common in UI frameworks for building component hierarchies, 6) It enables recursive composition which is powerful for complex structures.
Decorator pattern
Template pattern

Next Question (22/28)