create-react-app generates function instead of class in App.js

This is the default file when you generate a new project.

Here's the link to the file that's copied over. I believe the older versions of CRA did have classes, but in terms of forcing it to generate files with classes it's currently not set up to do that.


Yes, now days react is much better in functional components, we dont need class components more. You can use Hooks for creating states and so on.

Take a look into the docs:

https://reactjs.org/docs/hooks-overview.html


To answer your question, you can't force create-react-app to generate class, but you can use an older version of the package. The template is copied from https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/App.js into your newly created project, not generated.

A quick item to add, the class was generated in a previous version as an arrow function. They made the change back to what you are seeing in order to keep the Create-React-App consistent with the React documentation github.com/facebook/create-react-app/pull/6655


you can easily change it to a class like this:

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;