Trying to create new React app, nothing showing up-CodePudding

I'm new to learning React and am trying to create a simple app for learning. However, nothing is displaying on my browser when I run the app. I get no errors but there's only a blank white screen. I don't understand why nothing's showing up. Any help would be appreciated!

Header.js

import React from "react";

const Header = () => {
    <h1>Click the button!</h1>
}

export default Header;

Button.js

import React from "react";

const Button = () => {
    <button>Click me!</button>
}

export default Button;

App.js

import Header from "./components/Header";
import Button from "./components/Button";
import React from "react";

const App = () => {
    <div>    
        <Header />
        <Button />    
    </div>
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>To-Do List App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

CodePudding user response：

Your components are not returning anything, add the return :

const App = () => {
    return (<div>    
        <Header />
        <Button />    
    </div>)
}


const Button = () => {
    return (<button>Click me!</button>)
}


const Header = () => {
    return (<h1>Click the button!</h1>)
}