Create-react-app command doesn't use ES6 classes

Question

I'm trying to learn React and am following a few tutorials. When I run the create-react-app command from my terminal however, my App.js file is not the ES6 version that I see with tutorials. Instead it contains the following:

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;

instead of the ES6 style syntax...

class App extends React.Component {
  //...
}

Why is this and how can I change it so that when I run the command to create an app it automatically creates a more up-to-date version?

Thank you

Using classes does not make app more up to date. In fact, react hooks are only available to function components. — zero298
– zero298, Commented Aug 6, 2019 at 13:57
Functions and classes are both valid/up-to-date ways to write components. The only way that is deprecated is React.createClass. — Joe Clay
– Joe Clay, Commented Aug 6, 2019 at 13:58
Further to @zero298 's comment, I believe that the code you have is in face more up to date than the example with the class syntax — OliverRadini
– OliverRadini, Commented Aug 6, 2019 at 13:58

T.J. Crowder · Accepted Answer · 2019-08-06 14:06:48Z

3

Functional components are peers with class-based components. Neither is more up-to-date than the other (hooks aside). Functional components are getting used much more often than they used to be, though, thanks to hooks. (In fact, since hooks can't be used with class-based components, there might be an argument that functional components have access to newer features than class-based ones do...)

Looking at create-react-app's command-line switches, it doesn't look like it has an option to create a class-based App component for you. But of course, it's a small change to make immediately after creating the app, if you prefer it be a class-based component. You just edit the App.js (or App.tsx) file.

edited Aug 6, 2019 at 14:06

answered Aug 6, 2019 at 13:59

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

pvrforpranavvr · Accepted Answer · 2020-12-27 09:39:07Z

1

Create React App 2.0

I have used the following command which works for me. I have passed the react-scrips version also.

npx

npx create-react-app my-app [email protected]

npm

npm init react-app my-app [email protected]

Create React App 2.0: Babel 7, Sass, and More

edited Dec 27, 2020 at 9:39

answered Dec 27, 2020 at 8:41

pvrforpranavvr

2,9783 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

Create-react-app command doesn't use ES6 classes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related