React Js Scroll Indicator

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;
    function App() {
      const [scrollPercentage, setScrollPercentage] = useState(0);
      useEffect(() => {
        function handleScroll() {
          const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
          const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
          const scrolled = (winScroll / height) * 100;
          setScrollPercentage(scrolled);
        }

window.addEventListener('scroll', handleScroll);
        return () => {
          window.removeEventListener('scroll', handleScroll);
        };
      }, []);

return (
        <div>
          <div className="header">
            <h2>React Js Scroll Indicator</h2>
            <div className="progress-container">
              <div className="progress-bar" style={{ width: `${scrollPercentage}%` }}></div>
            </div>
          </div>

<div className="content">
            <p>This HTML snippet introduces a scroll tracking feature.</p>
            <p> An header prompts users to "Scroll Down to See The Effect." The subsequent  paragraphs explain that a "progress bar" demonstrates page scrolling progress, functioning both downwards and upwards.</p>
            <p> It emphasizes responsiveness by instructing users to resize the browser window for a dynamic display. This code informs visitors of a visually informative scrolling feature for enhanced user experience.</p>
            {/* Your content here */}
          </div>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    body {
      margin: 0;
      font-size: 28px;
      font-family: Arial, Helvetica, sans-serif;
      height: 1000px;
    }

.header {
      position: fixed;
      top: 0;
      z-index: 1;
      width: 100%;
      background-color: #f1f1f1;
    }

.header h2 {
      text-align: center;
    }

.progress-container {
      width: 100%;
      height: 8px;
      background: #ccc;
    }

.progress-bar {
      height: 8px;
      background: green;
      width: 0;
    }

.content {
      padding: 100px 0;
      margin: 50px auto 0 auto;
      width: 80%;
    }
  </style>
</body>

</html>