React开发报错：Target container is not a DOM element求助

核心问题及修复步骤： #

• 目标容器不存在：你调用ReactDOM.render(<Home/>,document.getElementById("app"))时，页面中没有id为app的元素。同时原生HTML标签里不能用className（这是React JSX的语法），要改成class。把页面里的<div className="Home"></div>改成<div id="app"></div>。
• 组件调用错误：Home组件里返回的<header />是HTML原生标签，不是你定义的Header React组件，React自定义组件必须首字母大写，所以要改成<Header />。

修正后的完整代码： #

<!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 id="app"></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>

额外说明： #

• 原生HTML中定义元素类名用class属性，只有React的JSX语法里才用className，不要混淆两者。
• React组件命名必须首字母大写，否则会被识别为HTML原生标签，导致组件无法正常渲染。

内容的提问来源于stack exchange，提问作者Miral Kh