Javascript React中的应用程序文件为'；nt识别jsx语法

这真的很奇怪。当App是函数时，我的（App.js）文件可以很好地识别jsx语法， 然而，当我将其转换为类时，它根本无法识别jsx

代码如下：

当应用程序是函数时识别jsx

从“/logo.svg”导入徽标；
导入“/App.css”；
从“./组件/计数器”导入计数器；
导入'bootstrap/dist/css/bootstrap.css'；
函数App（）{
报税表（
);
}
导出默认应用程序；

但当我将其转换为类时，它无法识别jsx：

从“/logo.svg”导入徽标；
导入“/App.css”；
从“./组件/计数器”导入计数器；
导入'bootstrap/dist/css/bootstrap.css'；
从“react”导入{Component}；
类应用程序扩展组件{
报税表（
);
}
导出默认应用程序；

我在跟随一个教程，在教程（应用程序）中是一个类，它工作得很好

---

任何帮助都将不胜感激。

当使用类组件时，return语句需要位于render方法中，如下所示：

import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';

class App extends Component {

  render() {
    return (<h1></h1>);
  }
}

export default App;

从“/logo.svg”导入徽标；
导入“/App.css”；
从“./组件/计数器”导入计数器；
导入'bootstrap/dist/css/bootstrap.css'；
从“react”导入{Component}；
类应用程序扩展组件{
render（）{
返回（）；
}
}
导出默认应用程序；

使用类组件时，您必须在render方法中编写模板。您必须在类中使用

render

方法

import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';

class App extends Component {
  return ( <h1></h1>
  );
}

export default App;

import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';

class App extends Component {

  render() {
    return (<h1></h1>);
  }
}

export default App;