在react问题上添加两次角色

// Header.js
import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Header Component</h1>
    </header>
  );
};

export default Header;

// Footer.js
import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>Footer Component</p>
    </footer>
  );
};

export default Footer;

// App.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <div>
      <Header />
      <h2>Main Content</h2>
      <Footer />
    </div>
  );
};

export default App;