React - Composition

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

Composition in React

Components that are “special cases” of other components.

For a decorator, see React - Higher Order Component (HOC)

3 - Example

For example, we might say that a WelcomeDialog is a special case of Dialog

  • The Base Components using the children props which makes it a container.
function Dialog(props) {
  return (
    <div className="dialog">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </div>
  );
}
  • The CSS
.dialog {
      border: 1px solid black;
      padding: 10px;
}
  • The specialized
function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for being you!" >
      <p>You are worth the whole world</p>
      </Dialog>
  );
}
  • The standard render and HTML placeholder
ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);
<div id="root"></div>

Advertising

4 - Documentation / Reference

web/javascript/react/composition.txt · Last modified: 2019/04/06 12:06 by gerardnico