React has not rendered yet

Question

I am new at this field. I would like to ask for help. It was supposed to load a pictures; however, instead of that it is saying that I have not rendered yet. Someone could help me? Or recommend website when I can lear more about it?

Thank you in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--REACT LIBRARY-->
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <!--REACT DOM LIBRARY-->
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <!--BABEL LIBRARY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
     
    <title>FriendLy</title>
</head>
<body>
    <div id="app">React has not rendered yet</div>

    <script type="text/babel">

    //FriendLy Complex Component
    function FriendLy(){
        return( 
            <div>
                <Avatar/>
                <UserName/>
                <GetConnected/>
            </div>
        );
    }

    //Avatar Component
    function Avatar(){
        return (
            <img src="https://scontent.ftpf1-1.fna.fbcdn.net/v/t1.0-9/87995869_3235932739767864_4174493673800597504_n.jpg?_nc_cat=107&_nc_sid=09cbfe&_nc_ohc=BOdWu5KFnBwAX9X9FDz&_nc_ht=scontent.ftpf1-1.fna&oh=44631cd3c84d98db17c14bc9ea213f73&oe=5F1B1D6A" alt="profile pic"/>
        );
    }

    ReactDom.render(
        <FriendLy/>,
        document.getElementById("app")
    );
    
    
    
    </script>
    
</body>
</html>

score 2 · Answer 1 · answered Jul 11 '20 at 15:53

So the way this is set up is a bit un usual. I actually didn't know you could consume react this way without build tools, but this is pretty cool.

You just have a syntax error in here. You need to update this:

ReactDom.render(...) to ReactDOM.render(...)

So Dom should be in all caps DOM

Also, if you render your component it won't work since it isn't fully defined. You can test it out by just rendering your Avatar component instead.

Hope that helps!

React has not rendered yet

1 Answers1