not being able to display button in reactJS-CodePudding

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <h1>Hello, 1234world</h1>;
root.render(element);
const root2 = ReactDOM.createRoot(document.getElementById('tworoot'));
const element2 = <h1>Hello, 5678world</h1>;
root2.render(element2);

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="root"></div>
    <div id="tworoot"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <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>

    <!-- Load your React component. -->
    <script src="lik.js"></script>

  </body>
</html>

Upon rendering my html page,I am getting console log error as Uncaught SyntaxError: Unexpected token 'export' and my Button is not being displayed.button.please advise me as I think I am nt getting the concepts right

CodePudding user response：

In order to render the Button, you have to render the component referencing it, in this case, MyApp.

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <h1>Hello, 1234world</h1>;
root.render(element);
const root2 = ReactDOM.createRoot(document.getElementById('tworoot'));
const element2 = <MyApp />;
root2.render(element2);