not being able to display button in reactJS

Question

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

You need to add type="module" but it still won't work, because you need babel to transform jsx into js — Konrad
– Konrad, Commented Jan 31, 2023 at 17:47
I preproccessed JSX by running the command.. npx babel --watch src --out-dir . --presets react-app/prod command — Michael36
– Michael36, Commented Jan 31, 2023 at 17:48
Doesn't <script type="module" src="lik.js"></script> fix the issue? — Konrad
– Konrad, Commented Jan 31, 2023 at 18:07
it fixed the error message but the button is not being displayed — Michael36
– Michael36, Commented Jan 31, 2023 at 18:12
Where are you using MyApp? I don't see it appended anywhere. — Nikki9696
– Nikki9696, Commented Jan 31, 2023 at 18:15

Nikki9696 · Accepted Answer · 2023-01-31 18:27:16Z

3

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);

answered Jan 31, 2023 at 18:27

Nikki9696

6,3681 gold badge32 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikki9696 Over a year ago

As an aside, you can also just render the button, without MyApp, if you wanted to, but I didn't want to change what you had, structurally, in case your exports change.

Collectives™ on Stack Overflow

not being able to display button in reactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related