How to create React.js app without a function in App.js

Question

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?

score 6 · Accepted Answer · answered Apr 28 '19 at 06:19

6

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>
      )
   }
}

answered Apr 28 '19 at 06:19

Chris Ngo

15,460
3
23
46

That's correct though but why default is Functional instead of Component? While it used to be `class` before. – Faizan Mubasher Jul 16 '19 at 06:10
5

@FaizanMubasher Facebook found that class Components were not very reusable, they were lacking the sense of interchangeability that was expected during their conceptualization. React developers would just throw everything in state, and that ended up just creating giant, unrecyclable components. The idea of hooks is that you can extrapolate state outside of the component and integrate them where needed. That is the change that Facebook wants to see with React moving forward. – Chris Ngo Jul 16 '19 at 06:20

Estus Flask · Answer 2 · 2020-03-05T15:33:34.800

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;

score 0 · Answer 3 · answered Nov 14 '19 at 01:25

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;

How to create React.js app without a function in App.js

3 Answers3

Linked