CODEWITHSUNDEEP
javascriptreactjs
user11196706
user11196706

Reputation:

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

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

Upvotes: 1

Views: 1198

Answers (2)

pvrforpranavvr
pvrforpranavvr

Reputation: 2938

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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074555

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.

Upvotes: 3

Related Questions