1

src/App.css

+@import '~antd/dist/antd.css';
+
+
 .App {
   text-align: center;
 }

src/App.js

 import React from 'react';
-import logo from './logo.svg';
+import { Button } from 'antd';
 import './App.css';
 
-function App() {
-  const a = 1+2;
-  console.log(a)
-  return (
+const handleClick = async () => {
+  const response = await fetch('/api/todos');
+  const json = await response.json();
+  console.log(json.data);
+}
+
+const App = () => (
+
   <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload....
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React5
-        </a>
-      </header>
+    <Button type="primary" onClick={handleClick}>Click Me!</Button>
   </div>
-  );
-}
+);
 
 export default App;

src/Footer.js

 import React from 'react';
 
 function Footer() {
-    const handleClick = async () => {
-        const response = await fetch('/api/todos');
-        const json = await response.json();
-        console.log(json.data);
-    }
+   
     return (
         <div>
-            <button onClick={handleClick}>clickme!</button>
+            nothing here...
         </div>
     );
 

src/index.js

@@ -7,8 +7,8 @@ import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <Footer />
     <App />
+    <Footer />
   </React.StrictMode>,
   document.getElementById('root')
 );