I just finish typing npx create react app to create a react app but for some reason my App.js is a function not a class eg)
result:
function App() {
return ()
I want something like:
Class app extends components{
render (return())
}
I could write it down manually but i want the class app as default when i create an app so could anyone tell me what is the cause of this?
That just comes out of the box now for React. You can make your App.js a stateless functional component OR a class component.
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
class before.
With the introduction of hooks in React 16.8 functional components can be stateful and supposed to replace class components in most cases. This is the reason why App is functional component in a project that is generated with create-react-app, more specifically react-scripts package.
It's possible to initialize the project with older react-scripts as a template:
create-react-app foo --scripts-version react-scripts@^2
And then update it to latest version:
npm -S react-scripts@^3
Since create-react-app provides static boilerplate for a project, and doesn't have scaffolding features, it's possible to copy and paste App from previous react-scripts version:
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;
As mentioned by @FaizanMubasher, the class Components were not very reusable, and they were lacking a sense of interchangeability. It makes no sense to copy class component code from previous versions. It will be ideal to use move away from class components and start using function components. here is an example for anyone seeking the right approach.
import React from 'react';
import Layout from './components/Layout/Layout';
function App() {
return (
<div className="App">
<Layout />
</div>
);
}
export default App;
function component Layout:
import React from 'react';
import Aux from '../../hoc/Aux';
const layout = (props) => (
<Aux>
<div>TOOLBAR, SIDEDRAWER, BACKDROP</div>
<main>
{props.children}
</main>
</Aux>
);
export default layout;
