CODEWITHSUNDEEP
reactjscreate-react-app
Kirill
Kirill

Reputation: 115

How to get class declarations from create-react-app?

After creating a new react project using npx create-react-app new I'm getting functional js code in App.js:

import React from 'react';
import './App.css';

//need to have a class instead of a function here:
function App() {

  return (
    <div className="App">
    </div>
  );
}

export default App;

What command do I need to create a none functional react project? If functional is better than none functional please explain why.

Upvotes: 4

Views: 5309

Answers (5)

Gunnar Forsgren - Mobimation
Gunnar Forsgren - Mobimation

Reputation: 1379

There are situations where a developer would prefer the class based design so the --scripts-version argument is good to know about.

Upvotes: 0

Peter Oram
Peter Oram

Reputation: 6748

Use: create-react-app <project> --scripts-version 2.1.7 to create a new react project that start with a class based App component rather than functional.

Upvotes: 1

Penny Liu
Penny Liu

Reputation: 17438

You can migrate react-scripts v3.x to v2.x like so:

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

Upvotes: 3

grindlewald
grindlewald

Reputation: 338

When a new react app is created using create-react-app, it pulls the template from here https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/template

Functional components are preferred than Class components (ES6 class) because, Functional components are usually stateless i.e. without any state and lifecycle methods - check this https://reactjs.org/docs/state-and-lifecycle.html. Their performance is better over class components which have state. Therefore, as a good practice one should always prefer as many stateless components (Functional) over stateful (Class), which is also done in react starter app i.e. create-react-app

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

If you have install create-react-app for this project, then it is come up with all the new features from react 16.8.6 (latest version of react). The latest react version come up with concept of Hooks. That is why we are getting functional component by default instead of class based component to increase the performance.

If you want class based component by default they you have to come up with older version of create-react-app. Ref

Upvotes: 5

Related Questions