I am following a YouTube tutorial in order to learn React, but I noticed something annoying. When I create a new app with create-react-app, the app.js is using a function App(), and not a class. I know React can be coded both ways, but I would like to work with classes. Is there any way I can configure create-react-app to create a React app with classes? Something like adding an argument on the CLI, or maybe change an option on a setup page (I couldn't find any).
function App() {}
What I want:
class App extends Component {}
I am following a YouTube tutorial in order to learn React, but I noticed something annoying. When I create a new app with create-react-app, the app.js is using a function App(), and not a class. I know React can be coded both ways, but I would like to work with classes. Is there any way I can configure create-react-app to create a React app with classes? Something like adding an argument on the CLI, or maybe change an option on a setup page (I couldn't find any).
function App() {}
What I want:
class App extends Component {}
-
2
Why don't just change it to
class? – Dimitar Tsonev Commented Apr 24, 2019 at 14:18 - You aren't locked in to either class or function you can mix and match, so you can change the app function to a class and every new ponent you create you can create as class. – xDreamCoding Commented Apr 24, 2019 at 14:41
- I understand what both of you say, and I am perfectly aware that I can mix both notations. that was not my question :) I am looking for a way to make create-react-app to do it from start! – Jeremy S Commented Apr 24, 2019 at 15:24
- What you want to achieve is anti-pattern, as not all of your ponents need state nor need to be classes. If you’re looking for shorthand mands to create a boilerplate ponent class, then look into “snippets” for your IDE. – Matt Carlotta Commented Apr 24, 2019 at 17:04
3 Answers
Reset to default 6If you would like your create-react-app to generate class instead of a function then you need to use the following mand to create App with the older script version.
create-react-app my-app --scripts-version react-scripts@^2
What you are observing is not adjustable by configuration. They changed the App.js generation in create-react-app from class to function with mit e4fdac2 and mit b424737. You are using a version of create-react-app more recent than the videos you are watching. Either syntax is valid, depending on whether you need state or not, but you will have to alter the code yourself to use the former class syntax in App.js.
Actually there is a solution to your problem. You just need an older version of react-scripts and your project configuration will fall back to using classes. When creating your project use this mand:
create-react-app [Project Name] --scripts-version 2.0.3