Document Object Model element-CodePudding

I got this error

Uncaught Error: Target container is not a DOM element.

when I want to create a header for my web page and the problem that I'm following a YouTube video to learn react, and I got this issues and in the YouTube video he didn't have the same problem as me

<!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>Document</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
    .w3-bar,h1,button {font-family: "Montserrat", sans-serif}
    .fa-anchor,.fa-coffee {font-size:200px}
    </style>
    </head>
    <body>
        <div className="Home"></div>
        <script type="text/babel">
                class Header extends React.Component {
                render(){
                    return(
                        <div className="w3-top">
      <div className="w3-bar w3-red w3-card w3-left-align w3-large">
        <a className="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i className="fa fa-bars"></i></a>
        <a href="#" className="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
        <a href="#" className="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
        <a href="#" className="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
        <a href="#" className="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
        <a href="#" className="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
      </div>
      </div>
                    )
    
    
                }
            }
    
    
    
    
            class Home extends React.Component {
                render(){
                    return(
                        <header />
                    )
    
    
                }
            }
            ReactDOM.render(<Home/>,document.getElementById("app"))
        </script>
    </body>
    </html>

CodePudding user response：

In reactDOM.render() you are rendering your app to document.getElementById("app") which does not exist on your page. You need to add an element with the id of app to your page so the react app can render to a valid element.

So somewhere in the body of your page add the element <div id="app"></div>

or if you are meaning to render your app to the Home element you need to change the function to say something like:

ReactDOM.render(<Home/>,document.querySelector(".Home")).

and then change your element to say something like:

<div ></div>

You only need to use className to specify a class inside of a react element. So <div className="Home"></div> is not valid html it should be <div ></div>. But inside a react element you would use <div className="your-class"></div>.

CodePudding user response：

when i use ReactDOM.render(,document.querySelector(".app")). it doesn't work but if i user ReactDOM.render(,document.querySelector("#app"))it work correctly same as if i use document.getElementsByClassName it don't work idk why i can't work with class in react