Estados simples: React.Component vs. useState

El estado en los class components tambien se puede declarar de esta forma, omitiendo el metodo contructor.

Resumen de la clase:

Conoceremos las diferencias entre los componentes creados con clases utilizando React.component y los componentes creados con funciones utilizanod React Hook en el manejo de las propiedades y el estado.

Envio de propiedades (props)
Se envia de la misma forma, sea el componente creado con clase o función:

import { UseState } from './UseState';
import { ClassState } from './ClassState';
import './App.css';

function App() {
  return (
    <div className="App">
      <UseState name="Use State" />
      <ClassState name="Class State" />
    </div>
  );
}

export default App;

Manejo de propiedades en funciones
Para el manejo de propiedades debemos recibirlo como parámetro props el cual puede ser destructurado en las propiedades enviadas

function UseState({ name }) {
    const [error, setError] = React.useState(true);

    return (
        <div>
            <h2>Eliminar {name}</h2>
            <p>Por favor, escriba el código de seguridad.</p>

            {error && (
                <p>El código es es incorrecto</p>
            )}

            <input type='text' placeholder='código de seguridad'/>
            <button>Comprobar</button>
        </div>
    );
}

Manejo de propiedades en clases
Para el manejo de propiedades escribimos this.props para acceder a las propiedades de nuestro elemento

class ClassState extends React.Component {
    render () {
        return (
            <div>
                <h2>Eliminar {this.props.name}</h2>
                <p>Por favor, escriba el código de seguridad.</p>
                <input type='text' placeholder='código de seguridad'/>
                <button>Comprobar</button>
            </div>
        );
    }
}

Manejo de estado en funciones
Utilizamos la siguiente sintaxis para declarar e inicializarr un estado y su modificador de valor.

function UseState({ name }) {
    // estado error
    const [error, setError] = React.useState(true);

    return (
        <div>
            <h2>Eliminar {name}</h2>
            <p>Por favor, escriba el código de seguridad.</p>

            {error && (
                <p>El código es es incorrecto</p>
            )}

            <input type='text' placeholder='código de seguridad'/>
            <button
                // onClick={()=>setError(!error)}
                onClick={()=>setError(prevState=>!prevState)}
            >Comprobar</button>
        </div>
    );
}

export { UseState }

Manejo de estado en clases

• En el método constructor utilizamos this.state para definir un objeto cuyas propiedades serán los estados
• Para poder modificar this y conservar lo que vivía en this de la clase que extendemos se debe llamar a super() dentro del método constructor.
• Luego debemos recibir las props desde el constructor y enviarle a super todas las propiedades que recibimos, de esta forma no solo vivirán en el constructor de nuestra clase sino también pasar a la clase React.component
• Una propiedad que viene de React.component es this.setState, con esta modificaremos los estados.

class ClassState extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            error:false,
        }
    }

    render () {
        return (
            <div>
                <h2>Eliminar {this.props.name}</h2>
                <p>Por favor, escriba el código de seguridad.</p>

                {this.state.error && (
                    <p>El código es es incorrecto</p>
                )}

                <input type='text' placeholder='código de seguridad'/>
                <button
                    // onClick={()=>this.setState({ error: !this.state.error})}
                    onClick={()=>this.setState(prevState => ({error: !prevState.error}))}
                >Comprobar</button>
            </div>
        );
    }
}

Esto { } se llama llaves, aunque después de tantos tutoriales en inglés le digo curly braces 😂

Gracias a dios salieron los Hooks y los componentes como funciones.
Que enredo manejar eso con clases

Props
Las props, en los componentes construídos con React.Component, al ser clases las recibimos usando this.props a diferencia de los componentes con funciones que solamente llamamos llamar en los parámetros de esta a props o bien desenpaquetamos props.
.
Estado
Para crear el estado en componente con funciones simplemente tenemos que llamar al hook useState. El nombre del estado y el modificador del estado pueden llamarse como sea.

const [error, setError] = React.useState(true);

En los componentes construídos con React.Component debemos crear nuestro método constructor, pasarle como parámetro las props, al método super(); pasarle las props (esto para tener acceso a los métodos de React.Component).
.
En el constructor crearemos nuestro estado con this.state. En este objeto almacenará todos nuestros estados.

constructor(props) {
	super(props);
	this.state = {
		error: false,
	};
}

Para modificar nuestro estado usaremos el método this.setState, que tenemos acceso a este porque mandamos a llamar super(props);. Con este método podemos cambiar nuestros estados.

<button
	onClick={() => this.setState({ error: !this.state.error })}
>
	Comprobar
</button>

Pueden agregar al import

import React, { useState } from "react";

y luego pueden utilizar useState sin necesidad de agregar React.useState.

const [error, setError] = useState(false);

Para mejorar la experiencia de desarrollo con react, aquí va estas recomendaciones:

• Crea tu proyecto react con vite como bundler
• Usa el formato .jsx para tus componentes
• Configura prettier y eslint para react en tu proyecto
• Configura en tu vscode el autoformateador y organizador de import al guardar
• Usa la extensión ‘ES7+ React/Redux/React-Native snippets’

Hola,

Así sería en Español e Inglés

() => Paréntesis => parentheses
[] => Corchetes => brackets o square brackets
{} => Llaves => curly brackets

Aqui les dejo mis apuntes por si les hacen falta.

😃

vivan los hooks xd

Conclusión: ¡Gracias a Dios por los hooks!

Asi quedaria con typescript el componente

import { Component } from "react";

interface ClassStateProps {
  name: string;
}
interface stateComponent {
  error: boolean;
}
class ClassState extends Component<ClassStateProps, stateComponent> {
  state: stateComponent = {
    error: false,
  };
  render() {
    const { name } = this.props;
    return (
      <div>
        <h2> Eliminar {name}</h2>
        <p>Por favor, escribe el codigo de seguridad.</p>
        {this.state.error && (
          <p>
            <strong>Error:</strong> El codigo es incorrecto
          </p>
        )}
        <input placeholder="Codigo de seguridad" />
        <button onClick={() => this.setState({ error: !this.state.error })}>
          Comprobar
        </button>
      </div>
    );
  }
}
export { ClassState };