javascriptreactjs

Learning React, getting blank page


I'm getting started with React and I'm trying to start with the basics. This is my code:

index.html

<!DOCTYPE html >
<html>
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script type="text/babel" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script src="index.js" type = "text/babel "></script>
    </head> 
<body>
    <div id = 'try'></div>  
    <script type= "text/babel">
        const element = <Welcome />;
        ReactDOM.render(
          element,
          document.getElementById('try')
        );
    </script>
</body>
</html>

index.js

class Welcome extends React.Component {
    render(){
        return <h1> hello</h1>;
    };
};

It is supposed to show me "hello" on index.html, but the page is still blank. Where is the error?

pd: also tried using "text/jsx" instead of "text/babel"


Solution

  • Try this code, this should work:

    class Welcome extends React.Component {
        render(){
            return <h1> hello</h1>;
        };
    };
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> 
    </head>
    <body>
        <div id="try"></div>    
        <script type="text/babel">
            const element = <Welcome/>;
            ReactDOM.render(element, document.getElementById("try"));
        </script>
    </body>
    </html>