Meet the React Component question

So I’ll start with a general question, do you offer the complete code to your chapter solutions? It would sometimes be easier to see where I went wrong if I could compare my code to yours.

That being said, I’m having an issue here in Chapter 3 where my Hello, World is not rendering.

Any thoughts:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello, World!</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

</head>

<body>
    <div id="container"></div>
    <script type="text/babel">
    class HelloWorld extends React.Component {
        render(){
            return <p>Hello componentized World!</p>
        }
    }
    ReactDom.render(
        <HelloWorld/>,
        document.querySelector("#container")
    )
    </script>
</body>
</html>

You can find the source code for the examples here: kirupa/reactjs at master · kirupa/kirupa · GitHub

For this problem (and many problems like this in general), take a look at your browser’s DevTools Console:

Notice the ReactDom error. The reason for this error is that the DOM part of ReactDOM is capitalized. Once you make that adjustment, your example should work just fine :slight_smile:

Cheers,
Kirupa

Thanks, just the type of tips I needed!

If the book goes to a next edition, I’d suggest putting the tip about using the DevTools console. I eyeballed between the text and my code but did not see the difference, the console brings it out in Hi Def color!

Regards,
Matt

1 Like