CODEWITHSUNDEEP
javascripthtmlreactjs
CR Sardar
CR Sardar

Reputation: 1018

ReactDOM.render is not rendering the page

I can't find out why this page isn't showing anything:

<!DOCTYPE html>
<html>
    <head>
        <script src="react-0.14.3.js"></script>
        <script src="react-dom-0.14.3.js"></script>
    </head>

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

        <script type="text/jsx">
            console.log("Hi Rect!");
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById('container')
            );
        </script>
    </body>
</html>

I have placed "react-0.14.3.js" & "react-dom-0.14.3.js" same directory where I have saved my this HTML page.

Upvotes: 0

Views: 2842

Answers (1)

meyi
meyi

Reputation: 8102

You can't use JSX in the browser without Babel. To fix that, add the script in head and change the type of script to text/babel. If you want Babel locally, just go to the script url and download the file. I also updated your React versions (which you should definitely do).

React CDN links (you can download the files from there as well): https://reactjs.org/docs/cdn-links.html

During development, use the development react scripts. During production, switch over to the production version. The exact links can be found with the other CDN links.

<!DOCTYPE html>
<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>

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

        <script type="text/babel">
            console.log("Hi React!");
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById('container')
            );
        </script>
    </body>
</html>

Documentation on how to add Babel to browser (source for answer), just click "In the browser" under "Prototyping"

Babel Standalone documentation: https://babeljs.io/docs/en/babel-standalone

NOTE: If you are using local files for Babel, add <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> to your head. More information on why can be found here and here

Upvotes: 3

Related Questions