Discussion on: React Props complete guide for beginners

It's very similar to inheritance where some properties are passed from parent to child.

Inheritance is a is-a relationship. The relationship between a container and nested component is a has-a relationship.

Early React even described it as the owner-ownee relationship but community usage moved towards "parent-child" even though that makes absolutely no sense in reference to props.children.

function Avatar({username}) {
  return (
    <div>
      <ProfilePic username={username} />
      <ProfileLink username={username} />
    </div>
  );
}

Old usage:

• Owner: Avatar
• Ownees: div, ProfilePic, ProfileLink
• div is the parent to ProfilePic, ProfileLink
• ProfilePic, ProfileLink are children to div

Community Usage:

• Parent: Avatar
• Child: div, ProfilePic, ProfileLink
• div is the parent to ProfilePic, ProfileLink
• ProfilePic, ProfileLink are children to div

Note how the community usage makes matters a lot more confusing.

• Avatar is the Parent to div, ProfilePic, ProfileLink
• ProfilePic, ProfileLink are passed via props.children to div

Two entirely different sets of parent-child relationships for everyone. And worse div has very little "parental control" over props.children short of ignoring them which is largely what happens in user components even though props.children is React's equivalent to WC's unnamed slot.

You use

<Children childcard={card("Child")} />

What's wrong with using props.children instead:

<Children>
  <Card title="Child"/>
<Children/>

which preserves the familiarity with markup better?

you can actually send HTML to your child like any card body

There is no actual HTML or even DOM involved; that is all react-dom's job'. JSX is a DSL for representing the React component tree where each component instance is responsible for rendering ReactNodes.

"JSX is an XML-like syntax extension to ECMAScript without any defined semantics."
JSX specification

JSX doesn't follow HTML formatting rules but stricter XML rules and is a JavaScript extension that in some framework specific way compiles to some JavaScript code that will eventually lead to some DOM elements being manipulated/created.

In the case of React the component tree is assembled; in the case of SolidJS actual DOM nodes are created to be included in the page's DOM - no HTML.

JSX's representation evokes the familiarity of markup—but it isn't markup.