反应不渲染？

Question

I'm trying/playing around with React and have some issues that I cant seem to find on google and there's nothing in my console log? Can anybody tell me why this isn't working? React and ReactDOM libraries are included...

HTML

<div id="app"></div>

JS

class App extends React.Component{
  render(){
    return (
       <div>Hello</div>
    )
  }
}

ReactDOM.render(App, document.getElementById('app'));

Answer 1

您应该渲染JSX元素：

ReactDOM.render(<App />, document.getElementById('app'));

Answer 2

You need to use:

ReactDOM.render(<App />, document.getElementById('app'));

You can't render a react component class, you need to render an element

Just so you understand why this is the case:

When you use JSX to create an element your build process will transform it from

<App />

to

h("App", {}, null)

But If you just pass the class this conversion will not happen

Answer 3

First You have to import the component:

import App from "./App";

Then render the component like <App /> :

ReactDOM.render(<App />, document.getElementById("app"));