React - props.children

HTML files would get rendered into PowerPoint-style presentations. Usually two columns per slide (see the row and col classes in the snippets). I added markdown section headings to make reading easier and only included several slides to showcase the format of files I've been working with

Composition and props.children

<section id="composition" class="chapter">
  <div>
    <h1>Composition and <br>props.children</h1>
  </div>
</section>

<section><h1>Composition vs. inheritance</h1>
  <div class="row">
    <div class="col-6">
      <p>
        You know the concept of
        <span class="is-text-bold">inheritance</span> from object-oriented programming. It means that a class can extend another class with new functionalities.
      </p>
      <p>While this is a good programming paradigm, it does not apply to React.</p>
    </div>

    <div class="col-6">
      <p>
        Beginner React programmers sometimes want to create components using inheritance (after all, we use classes).
      </p>
      <p>
        For example, it may seem that
        <span class="is-text-bold">a yes/no message</span> and an
        <span class="is-text-bold">informational message</span> can and should inherit from a
        <span class="is-text-bold">common, generic message component</span>.
      </p>
      <p>
        This is not the case, however –
        <span class="is-text-bold">in React, composition is always preferred</span>.
      </p>
    </div>
  </div>
</section>

Composition

<section><h1>Composition</h1>
  <div class="row">
    <div class="col-6">
      <p>Composition means that <span class="is-text-bold">more specific components return the more generic ones in their output</span>. Let's look at the example.</p>

      <p>The
        <span class="is-code">App</span> component returns components:</p>
      <ul>
        <li><span class="is-code">Wrapper</span></li>
        <li><span class="is-code">Child</span></li>
      </ul>

      <p>The
        <span class="is-code">Wrapper</span> component has the
        <span class="is-code">Child</span> component
        <span class="is-text-bold">nested</span> in it when it is called in the
        <span class="is-code">App</span>. How does it display its content?</p>

      <p>Through
        <span class="is-code">props.children</span>. The result of the nested
        <span class="is-code">Child</span> component is under the
        <span class="is-code">children</span> key in the
        <span class="is-code">props</span>.
      </p>
    </div>
    <div class="col-6">
      <pre><code class="javascript">const App = () => {
  return (
    &lt;Wrapper title=&quot;I am the wrapper&quot;&gt;
      &lt;Child body=&quot;Child component&quot; /&gt;
    &lt;/Wrapper&gt;
  );
};

const Wrapper = (props) => {
  return (
    &lt;div className=&quot;wrapper&quot;&gt;
      &lt;h1&gt;{props.title}&lt;/h1&gt;
      {props.children}
    &lt;/div&gt;
  );
};

const Child = (props) => {
  return &lt;p&gt;{props.body}&lt;/p&gt;;
};
</code></pre>
    </div>
  </div>
</section>

Composition - slide 2

<section><h1>Composition</h1>
  <div class="row">
    <div class="col-6">
      <p>
        Using
        <span class="is-code">props.children</span> or
        <span class="is-code">this.props.children</span> (in the case of a class component) we get all the elements and components that are placed
        <span class="is-text-bold">as children of this component, i.e. the</span>
        <span class="is-code">Child</span>
        <span class="is-text-bold">component</span>.
      </p>
    </div>

    <div class="col-6">
      <pre><code>const Wrapper = () => {
  return (
    &lt;div className=&quot;wrapper&quot;&gt;
      &lt;h1&gt;{props.title}&lt;/h1&gt;
      {props.children}
    &lt;/div&gt;
  );
};
</code></pre>
    </div>
  </div>
</section>