React.js Constructors Question

JavaScript
1

So, in a previous example in our modules, they had an example of a code snippet, that showed some construction of components and rendering to a DOM. I have it completed here:

const Navbar = () => {
    return (
        <div>
            <h1>NAVBAR</h1>
        </div>
    );
};

const Dashboard = () => {
    return (
        <div>
            <p>DASHBOARD</p>
        </div>
    );
};

const Footer = () => {
    return (
        <div>
            <p>FOOTER</p>
        </div>
    );
};

class WebApp extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <WebApp>
                <Navbar />
                <Dashboard />
                <Footer />
            </WebApp>
        );
    }
};

ReactDOM.render(<WebApp />, document.getElementsByClassName("web-app"));

I assumed that this was the correct way to put a constructor together, but after completing the “Write a React Component From Scratch” challenge, I realized that I may have misunderstood. Here is my answer to that challenge:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
    render() {
      return (
          <div>
            <h1>My First React Component!</h1>
          </div>
      );
    }
};

ReactDOM.render(<MyComponent />, document.getElementById("challenge-node"));

Can someone explain why the example in “Create a Component with Composition” uses this syntax (below) that I based the first code block off of and if there’s anything I’m missing between the two examples that would cause the second block not to use the tags of the class constructor in the same manner as “Create a Component with Composition”?

return (
     <App>
          <Navbar />
          <Dashboard />
          <Footer />
     </App>
)