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（介绍了，功能组件现在可以具有状态并可以访问生命周期方法，因此两者几乎等效。简而言之，您可以将功能组件视为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 type命令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>)}

}

Reactjs不了解ES6？

2 个答案: