无状态组件:必须返回有效的React元素(或null)

我刚开始有反应。
我正在尝试使用下面的代码显示Hello world,但我收到此错误消息:
我错过了什么?
app.js代码

//App.js`

import React from 'react';

const App = () => "<h1>Hello World!</h1>";

export default App;

index.js代码
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

/public/index.html的代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


最佳答案:

不能用引号括住JSX元素。
改变这个

const App = () => "<h1>Hello World!</h1>";

通过这个
const App = () => <h1>Hello World!</h1>;

你也可以这样写
const App = () => {    
  return <h1>Hello World!</h1>;
};

或者像这样
const App = () => {
  return (
    <h1>
      Hello World!
    </h1>
  );
};