Doubt about standard React class

Question

I am starting my first steps with React, I would like to know why the class is not being created in React, when I run the command npx create-react-app creates the structure below.

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;

My question is, why does React not create the default structure as below?

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> ande 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;**

I used the following commands:

npm install -g create-react-app

npx create-react-app nome-app

How can I maintain this structure?

Answer 1

My question is, why does React not create the default structure as below?

Must be using the latest version of reactjs(Version: >=16.8) that presents the Hooks. The great motivation for this adoption is to solve problems in the development of components.

Hooks allows use of Reactjs state and resources without writing classes and on your site reports the problems:

• It’s Difficult to Reuse Logic with State Between Components
• Complex Components Become Difficult to Understand
• Classes Confuse both People and Machines

All this happened in the creation of this first component based on the initial template, but if you want you can create the components based on classes, including the two forms work and can coexist in the same project, but it is still better to choose whether you want all class or Hooks, having this mixture often hinders future maintenance.

How can I maintain this structure?

At the time of installation the template is the latest (latest version) and so it is with Hooks, but, as I have already reported it is only to transform the function to class if so prefer to continue with development with classes, but, this is now with you.

Code implemented with Classes

class Source extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.handleIncrement = this.handleIncrement.bind(this);
  }
  handleIncrement() {
    const count = this.state.count + 1;
    this.setState({ count });
  }
  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}
ReactDOM.render( <Source/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Code implemented with Hooks

function Source() {
  const [count, setCount] = React.useState(0);
  const handleIncrement = () => setCount(count + 1);
  return (
    <div>
      <div>
        <div>{count}</div>
        <button onClick={handleIncrement}>Increment</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Source/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

It is clear that in class development the code is larger (verbose), full of rules that must be followed and with Hooks the code is simple, easy to understand and give maintenance. I remember that the two forms have the same output and that nothing prevents continuing with classes, Hooks is a better way to develop and bring a clear way a component in reactjs

^References:

• Introduction to the Hooks
• React V16.8: React with Hooks
• Hooks in summary form
• Using the Hook State
• Using Effect Hook (Effect Hook)
• Hooks rules
• Creating Your Own Hooks
• Hooks Reference API
• Hooks FAQ