Reactjs 不理解 ES6？

Question

我对 reactjs 很陌生，我正在复制一个教程（链接：https://www.youtube.com/watch?v=Ke90Tje7VS0）。我目前在 Windows 上并在 cmd 上执行了以下操作（根据教程）：

npm i -g create-react-app@1.5.2
create-react-app

文件/目录等都已安装，但我注意到我的 App.js 具有以下语法：

function App()
{
    return(...);
}

虽然本教程（和许多其他演示）中的 App.js 使用这种语法，但据我了解它是 ES6：

class App extends Component
{
    render() 
    {
        return(...);
    }
}

我尝试将此语法复制到我的 App.js 上，但随后我的 react 应用程序（通过在 cmd 中键入 npm start）坏了。我该如何解决这个问题（即在不破坏我的项目的情况下使用 ES6 代码）？它是否与我上面的代码具有完全相同的功能？

这是我的错误信息：

  Line 8:  Parsing error: Unexpected token

   6 | class App extends Component {
   7 |   return (
>  8 |     <div className="App">
     |     ^
   9 |       <header className="App-header">
  10 |         <img src={logo} className="App-logo" alt="logo" />
  11 |         <p>

我真的怀疑这是一个解析错误，JSX 在 function App() 上运行良好，但是当我将其更改为 class App extends Component 而没有触及其他任何东西时，程序就崩溃了。

Answer 1

这里的问题是尝试直接从您的类返回 HTML/JSX，而不是从函数中返回。如果您使用的是类，则需要将返回的 HTML/JSX 包装在 render 函数中。

例如：

class App extends Component {
    render() {
        return (...)
    }
}

另外，关于您发布的两个语法示例之间的区别：第一个是所谓的功能组件，而第二个是基于类的组件。过去，基于类的组件用于任何需要状态（内部保存和操作的数据）或生命周期方法的事物，而功能组件用于仅表示的组件。使用 Hooks (introduced ，功能组件现在可以拥有状态和访问生命周期方法，因此两者几乎是等价的。简单地说，您可以将功能组件视为类的 render 方法-基于组件。

一般来说使用上的区别是这样的：

基于类：

class App extends Component {
    render() {
        return (...)
    }
}

功能：

const App = props => { // or function App(props) {
    return (...)
}

查看这些文档了解更多详情：

• 基于类的组件：https://reactjs.org/docs/react-component.html
• 功能组件讨论：https://reactjs.org/docs/components-and-props.html

Answer 2

-假设你是 React 的初学者，你需要使用下面的命令在你的机器上安装 react

npm i -g create-react-app@1.5.2

然后创建一个新的react app类型命令npx create-react-app yourAppName

你的问题是 React 是否理解 ES6 并且答案很重要

是的

当您成功安装并处理您的应用程序后，现在该看看 es6 如何与 React 完美配合

实例：

      // importing react library
      import React from 'react';
      // ES6 Function
      const App = () => {
      const data = [
     {
      firstname: 'Joe'
     },
     {
      firstname: 'Claire'
     },
     {
      firstname: 'John'
     }
    ]
      return  {data.map(data => <li key={data.firstname}>{data.firstname}</li>)}

}