Search code examples
javascriptreactjsreact-dom

ReactDom is not defined?

enter image description hereI am trying to write a basic program in reactjs

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
        );
    </script>
</body>
</html>

The above program works fine. But when I move the content inside my script file to a separate app.jsx file it shows error that reactDom is not defined.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel" src="app.jsx">

    </script>
</body>
</html>

and my app.jsx looks like:

ReactDom.render(
    <h1>Hello React!!!</h1>,
    document.getElementById('example')
)
Solution

  • The global is ReactDOM (note DOM is all uppercase).