straye

This also works:

    function Home(props) {
      return (
        <div>
          <h2>HELLO</h2>
          <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
          {
            props.location.query.home ?
              ( <p>You specified a home query: { props.location.query.home }</p> )
              : ( <p>No home query was specified.</p> )
          }
        </div>
      );
    }

It's strange to me to embed conditions in attributes - particularly the v-else case in a different tag. It requires several visual scans of the block of code to determine what's going on.

In my opinion the following requires less cognitive overhead:

    function Home(props) {
      var query = props.location.query.home ?
        ( <p>You specified a home query: { props.location.query.home }</p> )
        : ( <p>No home query was specified.</p> );
      return (
        <div>
          <h2>HELLO</h2>
          <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
          {query}
        </div>
      );
    }

Using <If> combines the worst aspects of custom SGML template markup languages and the complexity of React but with additional runtime overhead.

If you prefer html templates you're going to choose a framework like Vue, Angular or Svelte. If you prefer Javascript driving the show you'll be more comfortable with something like React. The two approaches are duals of each other.

Personally I prefer an all JS solution because it's better suited to handle conditions and loops as compared to using custom SGML markup with framework-specific tags and attributes. In my opinion SGML/XML should only be used for markup, not program logic.

There are a few things I think React got wrong though - handling of children being one. Having different code paths to handle a single child versus multiple children was a design mistake. The Children convenience module is awkward to use. The state life cycle and immutability in React takes a while to get used to. It does seem more complicated than it needs to be and has spawned a plethora of React state management add ons.