React not loading on html

Question

I am trying to add react to a html page without node.

function Hello(){
    return (
        <div>
            <p>Hello World</p>
        </div>
    )
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/babel" src="main.js"></script>
</html>

main.js is the javascript. Can you help me out with this? Thanks

Works for me... (but don't use Babel Standalone except for toy snippets you're demonstrating for others, and use createRoot in React 18) — CertainPerformance
– CertainPerformance, Commented Apr 7, 2022 at 2:03
Does this help? Maybe the issue is you're not enumerating your presets. stackoverflow.com/questions/40230101/… — Jacob
– Jacob, Commented Apr 7, 2022 at 2:05
@Macilquham No, I don't see any errors in the real version, not stacksnippets — SomeOneOnEarthWhoLives
– SomeOneOnEarthWhoLives, Commented Apr 7, 2022 at 2:37
If I run your code locally I get a cors error in chrome, if I deploy it to my local iis instance it works perfectly. — Macilquham
– Macilquham, Commented Apr 7, 2022 at 2:42

Satya S · Accepted Answer · 2022-04-07 02:18:39Z

1

Use ReactDOM.createRoot(rootNode).render(<App />);

Reference- https://17.reactjs.org/docs/concurrent-mode-reference.html#createroot

answered Apr 7, 2022 at 2:18

Satya S

2381 silver badge6 bronze badges

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

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

DevWolf31 · Accepted Answer · 2022-04-07 02:13:10Z

0

Maybe if you put the scripts inside the <body> it might work as the elements have to be loaded to be found by the selectors.

For example:

<body>
    <div id="root"></div>

    <!-- Scripts Here -->
</body>

In my browser (Firefox) it works!

edited Apr 7, 2022 at 2:13

answered Apr 7, 2022 at 2:06

DevWolf31

869 bronze badges

3 Comments

SomeOneOnEarthWhoLives Over a year ago

thanks, but it doesn't work

DevWolf31 Over a year ago

Do you see any error in the developer console?

DevWolf31 Over a year ago

In my browser this works perfectly locally and I don't get any CORS errors! I don't see the problem in the code. It may be an internal react or babel error.

SomeOneOnEarthWhoLives · Accepted Answer · 2022-04-07 02:54:01Z

Okay, I don't know why this happens but this only happens when the react code is in another file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
    <div id="ot"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/babel">
    var t = 0;
function App(){
  function enter(e){
    e.preventDefault()
    t++
   document.getElementById('ot').innerHTML = `You Clicked The Button ${t} times`
  }
  
  return (
    <div>
    <button onClick={enter}>Click me</button>
    </div>
    )
}

const root = document.getElementById('root');
ReactDOM.render(<App />, root)
</script>
</html>

So that works because for some reason react doesn't work for me in a different file, I have to use inline js. Thank you all for trying to help, and I hope I can help other poeple with this same problem. By the way, there were no errors in the console

Collectives™ on Stack Overflow

React not loading on html

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related