创建React新项目后页面空白无显示，无报错求助

你在学习React时创建的应用出现空白页面且无报错，问题出在所有函数组件都没有返回JSX元素。箭头函数组件如果要输出JSX，要么显式用return语句，要么把JSX用圆括号包裹（简洁写法）。以下是修正后的代码：

修正Header.js #

import React from "react";

// 方法1：用return语句返回
const Header = () => {
  return <h1>Click the button!</h1>;
}

// 方法2：用圆括号包裹JSX的简洁写法
// const Header = () => (
//   <h1>Click the button!</h1>
// )

export default Header;

修正Button.js #

import React from "react";

const Button = () => {
  return <button>Click me!</button>;
}

// 简洁写法
// const Button = () => (
//   <button>Click me!</button>
// )

export default Button;

修正App.js #

import Header from "./components/Header";
import Button from "./components/Button";
import React from "react";

const App = () => {
  return (
    <div>    
      <Header />
      <Button />    
    </div>
  );
}

// 简洁写法
// const App = () => (
//   <div>    
//     <Header />
//     <Button />    
//   </div>
// )

export default App;

为什么会出现空白？ #

React函数组件必须返回一个React元素（或null），你之前的写法只是在函数内部定义了JSX，但没有返回，组件默认返回undefined，React不会渲染任何内容，所以页面空白。这种情况不属于语法错误，因此控制台不会报错。

你的index.js和index.html代码是正常的，不需要修改。

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