// src/App.jsx

function Footer() {
  return (
    <footer>
      <p>Built while learning React, one chapter at a time.</p>
    </footer>
  );
}

function App() {
  return (
    <div className="app">
      <h1>My First React App</h1>
      <p>If you can see this, JSX is rendering correctly.</p>
      <Footer />
    </div>
  );
}

export default App;

/*
  Notes:
  - Footer is just another function that returns JSX — exactly the
    same shape as App itself.
  - <Footer /> uses Footer like an HTML tag inside App's JSX. The
    capital letter is what tells React this is a component rather
    than a built-in HTML element.
  - App's single root <div> now contains three children: the h1, the
    p, and the Footer component — still only one root element overall.
*/