"Learning React" book Chapter 2, coding did not work

programming web dev
1

Hello Kirupa,
I am through this book, trying to learn REACT, as a beginner.
THis code below did not work for me. It did not display any text when I loaded them on a webpage.

<DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8">
    <title> React1</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>

    <style>
        #container {
            padding: 50px;
            background-color: #EEE;

        }
        #container h1 {
            font-size: 144px;
            font-family:sans-serif;
            color: #0080A9;
        }
    </style>

</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
	 var destination = document.querySelector("#container");
    ReactDOM.render(React.createElement(
        "h1",
        null,
        "Batman"), destination);

     </script>

</body>
</html>

</DOCTYPE>

I got some help stackoverlow.com and found that the following code works.

<DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> React1</title>
    <style>
        #container {
            padding: 50px;
            background-color: #EEE;

        }
        #container h1 {
            font-size: 144px;
            font-family:sans-serif;
            color: #0080A9;
        }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      var destination = document.querySelector("#container");
    ReactDOM.render(React.createElement(
        "h1",
        null,
        "Batman"), destination);
    </script>

  </body>
</html>

Please provide some clarification on the working code.
Thanks
Ram

2

If you look at the script declaration in the first example, the src attribute should be inside the script tag. Right now, it is outside of it. That means the scripts can’t load. If you fix that, your first example will work :grinning:

3

Thanks. That helps!!