Ubuntu环境下create-react-app默认生成类组件，如何修改？

问题详情 #

在Ubuntu机器上使用create-react-app初始化React项目时，默认生成的是旧版类组件形式的App.js，代码如下：

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

尝试过两种初始化方式：

npx create-react-app my-app

npm i -g create-react-app
create-react-app my-app

当前环境：Node版本v16.18.0，npm版本8.19.2（通过snap安装），项目创建后出现提示：

注意：该项目使用旧的不支持版本的工具初始化。
请更新到Node >=14和npm >=6以在新项目中获得支持的工具。

解决步骤 #

1. 卸载全局旧版create-react-app
   全局安装的旧版本会干扰npx拉取最新包，执行命令：

   npm uninstall -g create-react-app
   

2. 使用最新版create-react-app初始化项目
   直接指定@latest标签拉取最新版本的初始化工具，确保生成函数组件：

   npx create-react-app@latest my-app
   

3. 验证结果
   进入项目目录查看src/App.js，最新版默认生成的是函数组件结构，示例如下：

   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版本——即使你的Node/npm版本满足要求，全局安装的旧版工具或npx缓存的旧包会导致项目用旧模板初始化。指定@latest能强制拉取当前官方维护的最新版本，其默认模板已更新为函数组件。

内容的提问来源于stack exchange，提问作者HotSauceCoconuts