我是React的新手，想开始使用它来提高用户稳定性和 Jmeter 板/UI的速度。我尝试使用React组件加载一些HTML代码，然后使用我创建的根div呈现它。（查看代码）我不确定我做错了什么，因为我在编辑器中没有收到任何错误。
dashboard.js:

class Cards extends React.Component {
    constructor(props) {
    return (
        <div className="cards">
            <div className="card-single">
                <h1>IT-Scan Form</h1>
                <a href="documents.html">Click here to start the IT-scan.</a>
            </div>
            <div className="parent">
                <div className="card-single">
                    <h1 className="las la-clipboard-list">1 Documents</h1>
                    <span></span>
                </div>

                <div className="card-single">
                    <h1>Automatic Pentest</h1>
                    <button className="red-btn">Start</button>
                </div>

                <div className="card-single">
                    <h1>SMB</h1>
                    <button className="red-btn">Start</button>
                </div>

                <div className="card-single">
                    <h1>Enterprise</h1>
                    <button className="white-btn">Start</button>
                </div>
            </div>

            <div className="popup-error" id="popup-error">
                <img src="../images/x.png" alt="" />
                <h2>Error</h2>
                <p className="error" id="error"></p>
                <button type="button" id="close" onClick={closeErrorPopup}>Reload</button>
            </div>

            <div className="messagebox" id="messagebox">
                <p className="las la-exclamation-triangle" style={{ fontSize: '30px', color: '#f56c6c' }}></p>
                <p className="messagebox-content" id="messagebox-content">This is a message box</p>
            </div>

            <div className="calculator">
                <label htmlFor="total">Total</label>
                <input type="number" id="total" value="0" placeholder="Enter value" />
                <label htmlFor="percentage" style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>Percentage %</span>
                    <span id="percentageText">0%</span>
                </label>
                <input type="range" id="percentage" onInput={calculate} onChange={calculate} />
                <label htmlFor="num" style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>Num</span>
                    <span id="numText">0</span>
                </label>
                <input type="number" id="num" onInput={calculate} onChange={calculate} />
                <div className="result" id="result">
                    <h5 style={{ margin: '8px 0', display: 'flex', justifyContent: 'space-between' }}>
                        <span>Result</span>
                        <span id="resultText" style={{ fontSize: '1.2rem' }}>__.__</span>

                    </h5>
                </div>
            </div>
        </div>
    );
    }
};


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Cards />);

这是我的HTML文件，我将在其中加载组件。
index.html:

<main>
                <div id="root"></div>
                      <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <script src="../reactJS/dashboard.js" ></script>

            </main>