Where is my mistake? Who could help me find it?

programming web dev
1 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My first web-application on React.js</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>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        class HelloWorld extends React.Component {

            render() {

                return <p>Привет компонентизированный мир!</p>

            }

        }

        ReactDOM.render(

            <HelloWorld/>,

            <div>

                <p>Привет, мир!</p>

            </div>,

            document.querySelector('#container')

        )

    </script>

</body>

</html>
2

What is the error you are seeing? Does the Console show anything?

3

Error babel.js @anonymous

4

The error I saw in the Console when I ran your code is this:

image
image1584×454 59.5 KB

This narrowed down the problem, for what you had originally is the following:

    ReactDOM.render(
      <HelloWorld />,
        <div>
          <p>Привет, мир!</p>
        </div>,
      document.querySelector('#container')
    )

You have a comma after the <HelloWorld/>, which isn’t valid. You can only render a single parent element that can have multiple children inside it. The ReactDOM.render method takes two arguments - one for the blob of JSX you want to render and the other for the DOM element on the page you want to render the output to.

One way to fix your code would be to remove the comma and wrap all of your current content into another div element as follows:

    ReactDOM.render(
      <div>
        <HelloWorld />
        <div>
          <p>Привет, мир!</p>
        </div>
      </div>,
      document.querySelector('#container')
    )
5

Thank you very much!!

1 Like