React应用刷新后页面无内容显示，请求技术排查帮助

1. Greet组件缺少return语句 #

在Greet.js的箭头函数组件中，未返回JSX内容，导致组件渲染为空。箭头函数返回多行JSX时，需添加return或用圆括号包裹内容：

修复后的Greet.js：

import React from 'react';

const Greet = () => {
    return (
        <div>
             <h1> Hello this is mj</h1>
        </div>
    );
};

export default Greet;

也可简化为省略return的写法：

import React from 'react';

const Greet = () => (
    <div>
         <h1> Hello this is mj</h1>
    </div>
);

export default Greet;

2. React组件命名不符合规范 #

React要求自定义组件名必须以大写字母开头，你的meet组件为小写，会被识别为普通HTML标签而非自定义组件，无法正常渲染。需修改两处：

修复meet.js： #

import React , { Component } from 'react';

class Meet extends Component {
    render() {
        return <h1> writing react </h1>
    }
};

export default Meet;

修复App.js： #

import './App.css';
import Greet from './components/Greet';
import Meet from './components/Meet';


function App() {
  return (
    <div >
      <Greet />
      <Meet />
    </div>
  );
}

export default App;

完成以上修改后，重启开发服务器并刷新页面，内容即可正常显示。

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