Using components with the props object

    <div id="root"></div>

    <script type="text/babel">
      function Header(props) {
        return (
          <header>
            <h1>{props.name} Kitchen</h1>
          </header>
        );
      }
      function Main(props) {
        return (
          <section>
            <p>
              We serve the most {props.adjective} food
              around
            </p>
          </section>
        );
      }
      
      function Footer(props) {
        return(
          <div>
            <p>Copyright {props.year}</p>  
          </div>
        )
      }

      function App() {
        return (
          <div>
            <Header name="Patrick" />
            <Main adjective="amazing" />
            <Footer year = {new Date().getFullYear()} />
          </div>
        );
      }

      ReactDOM.render(
        <App />,
        document.getElementById("root")
      );
    </script>