Meet the React Component question

1

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/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/[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>
2

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:

image
image2288×1430 401 KB

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

3

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
5

I am just starting to learn about codes and I think these codes are great. I am not that great about it yet but I think it’s a small progress that I understand some of them