Question

我正在尝试学习React，并且正在关注一些教程。但是，当我从终端运行create-react-app命令时，我的App.js文件不是教程中看到的ES6版本。而是包含以下内容：

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;

代替ES6样式的语法...

class App extends React.Component {
  //...
}

这是为什么？如何更改它，以便在运行命令以创建应用程序时它会自动创建更新的版本？

谢谢

Answer 1

功能组件是具有基于类的组件的对等体。两者都不是最新的（除了挂钩）。不过，感谢hooks，功能组件的使用比以前更加频繁。（实际上，由于挂钩不能与基于类的组件一起使用，因此可能存在一个论点，即功能性组件可以访问比基于类的组件更多的新功能。）

看着create-react-app的命令行开关，它似乎没有为您创建基于类的App组件的选项。但是，当然，如果您希望将其作为基于类的组件，则在创建应用程序后立即进行一个小的更改。您只需编辑App.js（或App.tsx）文件。

Answer 2

创建 React 应用 2.0

我使用了以下对我有用的命令。我也通过了 react-scrips 版本。

npx

npx create-react-app my-app --scripts-version=react-scripts@2.0

npm

npm init react-app my-app --scripts-version=react-scripts@2.0

Create React App 2.0: Babel 7, Sass, and More

Create-react-app命令不使用ES6类

2 个答案: