create-react-app 在 App.js 中生成函数而不是类答案

【问题标题】：create-react-app generates function instead of class in App.jscreate-react-app 在 App.js 中生成函数而不是类
【发布时间】：2019-10-11 08:55:21
【问题描述】：

我正在尝试使用 create-react-app 命令创建反应应用程序，并将 App.js 文件作为函数生成（没有类的 es5 语法）而不是类（以下代码中的示例）：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

如何强制 create-react-app 生成类？

【问题讨论】：

你的版本是什么？ create-react-app -V
您好，感谢您的快速回复，我有 3.0.1 版本
改成类就行了。问题是什么？如果您在改课时需要帮助，请更新您的问题。
为什么这很重要？它们是等效的，并且在它们之间切换相对容易（例如 IntelliJ/WebStorm 可以为您完成）。
@NadavShabtai 我认为你应该为你的代码编辑器安装 react sn-ps 扩展，这样你就可以轻松地创建类或其他东西。

标签： reactjs create-react-app

【解决方案1】：

是的，您实际上可以默认使用 create-react-app 来生成基于类的组件，但您必须指定脚本的先前版本（他们在 3.0 版中将其更改为功能组件 - 请参见此处：https://github.com/facebook/create-react-app/pull/6451 )

所以这应该有效：

npx create-react-app my-app --scripts-version react-scripts@^2 .

【讨论】：

像魅力一样工作！为什么在任何文档或课程中都没有明确规定？您的评论应该得到更多的赞许！
我同意 100% @GiacomoSantarnecchi ！谢谢你的好话....

【解决方案2】：

是的，现在 React 在功能组件方面要好得多，我们不再需要类组件。您可以使用 Hooks 来创建状态等。

查看文档：

https://reactjs.org/docs/hooks-overview.html

【讨论】：

reddit.com/r/reactjs/comments/blad60/…

【解决方案3】：

不要打扰自己，只需手动更改即可。

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> My first react project</h1>
      </div>
    );
  }
}

export default App;

【讨论】：

【解决方案4】：

这是您生成新项目时的默认文件。

Here's 复制过来的文件的链接。我相信旧版本的 CRA 确实有类，但在强制它生成带有类的文件方面，它目前还没有设置这样做。

【讨论】：

【解决方案5】：

您可以轻松地将其更改为这样的类：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
export default App;

【讨论】：

【解决方案6】：

要回答您的问题，您不能强制 create-react-app 生成类，但您可以使用旧版本的包。模板从https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/App.js 复制到您新创建的项目中，而不是生成。

快速添加项目，该类在以前的版本中作为箭头函数生成。为了使 Create-React-App 与 React 文档github.com/facebook/create-react-app/pull/6655

保持一致，他们将更改恢复为您所看到的内容

【讨论】：