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

Question

I'm trying to create react app using create-react-app command, and it's generating the App.js file as function (es5 syntax without class) instead of class (Example in the following code):

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;

How can I force create-react-app to generate class instead?

Just change it to a class. What is the issue? If you need assistance changing to a class please update your question. — Alexander Staroselsky
– Alexander Staroselsky, Commented May 24, 2019 at 18:42
Why does that matter? They're equivalent, and it's relatively easy to switch between them (e.g. IntelliJ/WebStorm can do it for you). — jonrsharpe
– jonrsharpe, Commented May 24, 2019 at 18:42
@NadavShabtai I think you should install react snippets extension for your code editor, so you can create easily classes or other things. — sametcodes
– sametcodes, Commented May 24, 2019 at 18:47

Richard · Accepted Answer · 2019-06-20 10:38:48Z

22

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;

answered Jun 20, 2019 at 10:38

Richard

4871 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zeeshan Bilal · Accepted Answer · 2019-11-21 20:43:33Z

12

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.

edited Nov 21, 2019 at 20:43

Zeeshan Bilal

1,2771 gold badge10 silver badges24 bronze badges

answered May 24, 2019 at 18:51

Chad

6185 silver badges16 bronze badges

Comments

Fábio BC Souza · Accepted Answer · 2020-01-11 05:21:52Z

5

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

answered Jan 11, 2020 at 5:21

Fábio BC Souza

1,22022 silver badges25 bronze badges

1 Comment

Samant Over a year ago

reddit.com/r/reactjs/comments/blad60/…

Brian Gerhards · Accepted Answer · 2019-05-24 19:01:42Z

3

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

answered May 24, 2019 at 19:01

Brian Gerhards

8495 silver badges12 bronze badges

Comments

Thomas M · Accepted Answer · 2020-07-19 17:53:17Z

2

Yes, you can actually use create-react-app to still generate class based components by default but you have to specify a previous version of the scripts (they changed it to functional components in version 3.0 - see here: https://github.com/facebook/create-react-app/pull/6451)

So this should work:

npx create-react-app my-app --scripts-version react-scripts@^2 .

answered Jul 19, 2020 at 17:53

Thomas M

3392 silver badges6 bronze badges

2 Comments

Giacomo Santarnecchi Over a year ago

Works like a charm! Why on earth is it not so clearly specified in any documentation or course? Your comment should have a lot more thumbs up!

Thomas M Over a year ago

I agree 100% @GiacomoSantarnecchi ! Thanks for your nice words....

Mohmud-Dayib · Accepted Answer · 2020-01-11 04:52:17Z

0

Don't bother yourself just change it manually.

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> My first react project</h1>
      </div>
    );
  }
}

export default App;

answered Jan 11, 2020 at 4:52

Mohmud-Dayib

92 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related