added footer and header

react-project/src/components/Footer.jsx

@@ -0,0 +1,9 @@
+function Footer() {
+  return (
+    <div id="foot">
+      <h3>The react project</h3>
+    </div>
+  );
+}
+
+export default Footer;

react-project/src/components/Header.jsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+function Header() {
+  const [count, setCount] = useState(0);
+  return (
+    <section id="center">
+      <div>
+        <h1>The react project</h1>
+        <p>
+          Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
+        </p>
+      </div>
+      <button
+        type="button"
+        className="counter"
+        onClick={() => setCount((count) => count + 1)}
+      >
+        Count is {count}
+      </button>
+    </section>
+  );
+}
+
+export default Header;