Reactjs 如何在app.js中没有函数的情况下创建React.js app

我刚输入完npx create react app来创建一个react app，但出于某种原因，我的app.js是一个函数而不是一个类 （例如）

结果:

function App() {

  return ()

我想要像这样的东西：

Class app extends components{
   render (return())
}

---

我可以手动写下来，但我希望在创建应用程序时将类应用程序作为默认应用程序，那么有人能告诉我这是什么原因吗？

这是现在为React准备的。您可以将App.js设置为无状态功能组件或类组件

class App extends React.Component{
   render(){
      return(
        <div>Hello World</div>
      )
   }
}

类应用程序扩展了React.Component{
render（）{
返回(
你好，世界
)
}
}

在React 16.8中引入功能组件后，功能组件可以是有状态的，并且在大多数情况下可以替代类组件。这就是为什么

App

是使用

create react App

生成的项目中的功能组件，更具体地说是

react scripts

包

可以使用较旧的

react脚本

作为模板初始化项目：

create-react-app foo --scripts-version react-scripts@^2

然后将其更新为最新版本：

npm -S react-scripts@^3

由于

create react app

为项目提供静态样板文件，并且没有脚手架功能，因此可以复制和粘贴：

---

正如@FaizanMubasher所提到的，类组件不是很可重用，它们缺乏互换性。从以前的版本复制类组件代码是没有意义的。 它将是理想的使用远离类组件，并开始使用功能组件。 下面是一个例子，供任何寻求正确方法的人参考

import React from 'react';
import Layout from './components/Layout/Layout';

function App() {
  return (
    <div className="App">
      <Layout />
    </div>
  );
}

export default App;

从“React”导入React；
从“./components/Layout/Layout”导入布局；
函数App（）{
返回(
);
}
导出默认应用程序；

功能组件布局：

import React from 'react';
import Aux from '../../hoc/Aux';

const layout = (props) => (
  <Aux>
  <div>TOOLBAR, SIDEDRAWER, BACKDROP</div>
  <main>
    {props.children}
  </main>
  </Aux>
);

export default layout;

从“React”导入React；
从“../../hoc/Aux”导入辅助项；
常量布局=（道具）=>(
工具栏、侧抽屉、背景
{props.children}
);
导出默认布局；

这是正确的，但为什么默认值是功能性的而不是组件？虽然以前是

class

。@FaizanMubasher Facebook发现类组件不是很可重用，但它们缺乏概念化过程中所期望的互换性。React开发人员会将所有东西都置为状态，最终只会创建巨大的、不可回收的组件。钩子的思想是，您可以推断组件外部的状态，并在需要时集成它们。这正是Facebook希望看到的变革。

import React from 'react';
import Aux from '../../hoc/Aux';

const layout = (props) => (
  <Aux>
  <div>TOOLBAR, SIDEDRAWER, BACKDROP</div>
  <main>
    {props.children}
  </main>
  </Aux>
);

export default layout;