¿Cómo convertir un componente funcional a un componente de clase en ReactJS?

Si queremos convertir un componente de función en un componente de clase, debemos realizar los siguientes cambios importantes.

1. Cambiar la función a una clase
2. Agregar el método de renderizado
3. Convertir todas las funciones en un método
4. Agregar constructor
5. Reemplace los ganchos con métodos de ciclo de vida

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: componente funcional 

Escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from 'react';
  
function App(props) {
  
  const [counter, setCounter] = useState(0);
  const myFunction = (e) => {
    alert("The value of counter is " + counter)
    setCounter(counter + 1);
  }
  
  return (
    <div>
        
<p>Hello, {props.name}</p>
  
      <button onClick={myFunction}>Click me!</button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo: componente de clase 

Usando los pasos anteriores para convertir un componente de función en un componente de clase, hemos escrito el siguiente código en el archivo  App.js.

import React, { useState } from 'react';
  
  
class App extends React.Component {
  
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
    this.myFunction = this.myFunction.bind(this);
  }
  
  myFunction(e) {
    alert("The value of counter is " + this.state.counter)
    this.setState({ counter: this.state.counter + 1 })
  }
  
  render() {
    return (
      <div >
        <p>Hello From GFG</p>
  
        <button onClick={this.myFunction}>
         Click me!
        </button>
      </div>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: