React极简Codepen无法渲染Hello World，求紧急解决方案（面试在即）

别慌！离面试还有时间，我马上帮你搞定这个问题。

你的代码问题很明确：App组件的render方法没有返回JSX内容。React类组件要求render方法必须返回要渲染的元素，否则组件不知道该输出什么，自然就不会渲染任何内容。

下面是修正后的完整JS代码：

class App extends React.Component {
  render() {
    // 这里必须加上return，把JSX返回出去
    return (
      <div>
        <p>Hello!</p>
      </div>
    );
  }
}

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

简单解释下：

• 原来的代码里，你只是在render方法中写了JSX结构，但没有用return语句将它返回，React无法识别要渲染的内容
• 加上return后，组件就能正确把<div><p>Hello!</p></div>这段内容输出到页面上的#app容器里

你已经配置好Babel、引入了React和ReactDOM，HTML的<div id="app"></div>也没问题，只需要修改JS代码里的这一处就能正常渲染了。

内容的提问来源于stack exchange，提问作者J Seabolt