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>