使用使用类而不是钩子的npx创建react应用

Question

我想使用npx create-react-app .来生成一个新的react应用程序，但是我希望更改版本，以便它使用类结构而不是新的hook结构来生成。

我尝试在package.json中更改react和React-DOM的版本并运行npm i，但它不会覆盖旧应用程序。

Answer 1

如果我没记错的话，创建的样板App.js根本不使用钩子，但确实使用了功能组件。只需将其替换为喜欢的东西即可：

功能组件版本：

import React from 'react';

function App() {
  return (
    < ...this will go inside the render() method... >
  );
}

类组件：

import React, { Component } from 'react';

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

不要忘记{ Component }的导入，或者使用extends React.Component。

Answer 2

昨天我确实使用了npx create-react-app，生成的应用程序基于类。

解决方案1）  尝试再次运行npx create-react-app

解决方案2）  如果您运行npx，则创建react-app，它仍会为您生成基于挂钩的应用。您可以删除基于挂钩的组件，并做自己的基于类的组件。此外，CRA提供了App.js，您可以轻松地更改它以适应您的需求。如果您使用的是Vscode，则有react扩展，可以轻松地帮助创建React类组件。

Answer 3

您可以在create-react-app之后使用--scripts-version {script version}。
示例：create-react-app --scripts-version 1.1.5

它将使用类而不是函数创建脚本。

查看所有脚本版本here