How to create React.js app without a function in App.js

Question

I just finish typing npx create react app to create a react app but for some reason my App.js is a function not a class eg)

result:

function App() {

  return ()

I want something like:

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

I could write it down manually but i want the class app as default when i create an app so could anyone tell me what is the cause of this?

Answer 1

That just comes out of the box now for React. You can make your App.js a stateless functional component OR a class component.

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

Answer 2

With the introduction of hooks in React 16.8 functional components can be stateful and supposed to replace class components in most cases. This is the reason why App is functional component in a project that is generated with create-react-app, more specifically react-scripts package.

It's possible to initialize the project with older react-scripts as a template:

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

And then update it to latest version:

npm -S react-scripts@^3

Since create-react-app provides static boilerplate for a project, and doesn't have scaffolding features, it's possible to copy and paste App from previous react-scripts version:

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;