Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Estados simples: React.Component vs. useState

3/19
Recursos

Aportes 24

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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>
        );
    }
}
Considero que, aunque no dudo que podr铆a tener sus ventajas utilizar componentes con clases, encuentro redundancia sint谩ctica para manejar los estados, creo que los componentes con funciones y utilizando los Hooks son una alternativa muy viable para desarrollar en Reactjs. Ustedes qu茅 opinan, PlatziNautas 馃寧?

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

Hola,

As铆 ser铆a en Espa帽ol e Ingl茅s

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

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 鈥楨S7+ React/Redux/React-Native snippets鈥

Aqui les dejo mis apuntes por si les hacen falta.

馃槂

Conclusi贸n: 隆Gracias a Dios por los hooks!

Los corchetes se llaman curly braces.

vivan los hooks xd

Estoy amando este curso, ahora todos los cursos sobre frameworks est谩n cobrando sentido, los estoy llevando a mi parte liminal del cerebro!!!

Todo gracias a que se toman el tiempo para explicar m谩s r谩pido, pero con m谩s precisi贸n que hace cada cosa, y desde el principio. Ojala todos los cursos de platzi fueran as铆, muchos si lo son, pero muchos otros no.

Mi sugerencia es que los m贸dulos de introducci贸n sirvan para hacer precisamente esto, explicar r谩pido, pero de manera precisa el conocimiento previo que se necesita para abordar el curso, tomando la informaci贸n ya vista en otros cursos, no tomar todo, solamente y de manera r谩pida, pero muy precisa el conocimiento preciso que se necesita para aprovechar el curso a realizar.

As铆, quien quiera consolidar conocimiento previo toma el m贸dulo de introducci贸n y quienes quieren ir directo a lo pesado del curso se lo pueden saltar.

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 };
Impresionante saber de d贸nde viene setState que ahora usamos en los componentes funcionales, pues como lo dice el profesor este viene por defecto de React.Component de los componentes de clase.

Estados simples: React.Component vs. useState

.
En ambos casos podemos enviar propiedades con sus respectivos valores en este caso name.
.

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

.
En el componente de tipo funci贸n podemos recibirlo como props y llamarlo con props.name o tambi茅n podemos destructurarlo y recibirlo como {name} y llamarlo con name.
.

function UseState({name}) {
  return (
    <div>
      <h2>Eliminar {name}</h2>
      
      <p>Por favor, escribe el c贸digo de seguridad.</p>

      <input placeholder="C贸digo de seguridad" />
      <button>Comprobar</button>
    </div>
  );
}

.
El componentes de tipo clase recibimos las propiedades autom谩ticamente en this.props, por lo cual podemos llamara a la propiedad en cuesti贸n con this.props.name.
.

class ClassState extends React.Component {
  render() {
    return (
      <div>
        <h2>Eliminar {this.props.name}</h2>
        
        <p>Por favor, escribe el c贸digo de seguridad.</p>

        <input placeholder="C贸digo de seguridad" />
        <button>Comprobar</button>
      </div>
    );
  }
}

.
A continuaci贸n se implementa un estado de error que se ir谩 mostr谩ndo o no seg煤n hagamos click en el bot贸n de Comprobar.
.
En los componentes de tipo funci贸n podemos hacer uso de useState para crear este estado y por medio de un onClick utilizamos una funci贸n flecha para cambiar el estado.
.

function UseState({ name }) {
  const [error, setError] = React.useState(true);
  
  return (
    <div>
      <h2>Eliminar {name}</h2>
      
      <p>Por favor, escribe el c贸digo de seguridad.</p>

      {error && (
        <p>Error: el c贸digo es incorrecto</p>
      )}

      <input placeholder="C贸digo de seguridad" />
      <button
        onClick={() => setError(!error)}
      >Comprobar</button>
    </div>
  );
}
```.

Incluso se puede cambiar el estado utilizando el estado previo de la siguiente manera.
.
```jsx
onClick={() => setError(prevState => !prevState)}

.
Por otro lado, en los componentes de tipo clase la cosa es algo diferente. En primer lugar, creamos nuestro constructor y vamos a tener un 煤nico estado this.state dentro del cual podemos tener un objeto con cada uno de los estado como una propiedad de este objeto.
.
Entonces en lugar de acceder a error como en el componente de tipo funci贸n, en el componente de tipo clase accederemos a la propiedad this.state.error.
.
Es importante destacar que hay que llamar al super(props) dentro del constructor cuando estemos usando clases derivadas o que extienden de otras antes de acceder o modificar this.
.
Si bien recibimos las propiedades por medio del constructor es importante pasarlos tambi茅n a la clase React.Component utilizando super(props) para que luego se nos permita agregarle propiedades o m茅todos a nuestro this.
.

class ClassState extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      error: true,
    };
  }
  
  render() {
    return (
      <div>
        <h2>Eliminar {this.props.name}</h2>
        
        <p>Por favor, escribe el c贸digo de seguridad.</p>

        {this.state.error && (
          <p>Error: el c贸digo es incorrecto</p>
        )}

        <input placeholder="C贸digo de seguridad" />
        <button
          onClick={() =>
            this.setState(prevState => ({ error: !prevState.error }))
          }
        >Comprobar</button>
      </div>
    );
  }
}

.
Tambi茅n vamos a poder actualizar el estado de los componentes de tipo clase por medio de this.setState, de aqu铆 la convenci贸n de llamar setState a los actualizadores de nuestros estados, puesto que este m茅todo lo heredamos de React.Component al momento de llamar a super(props).
.
Entonces lo que hacemos es llamar a this.setState e al igual que en los componentes de tipo funci贸n podemos obtener el estado previo de nuestro estado y actualizarlo. En este caso es necesario mandar un objeto con las propiedades correspondientes a los estados que queremos actualizar, por lo cual al estado de error le vamos a asignar su estado previo pero negado, es decir !prevState.error.
.
Otra forma de hacer esto es de la siguiente manera.
.

onClick={() => setError({ error: !this.state.error })}

.
Finalmente es importante tener en cuenta como funcionan las funciones flechas, puesto que cuando tratamos de devolver un objeto se debe de utilizar un return de forma expl铆cita, o en su lugar envolver el objeto en par茅ntesis.
.

/*
	No se est谩 retornando nada
	En su lugar tenemos el bloque de nuestra funci贸n
	Dentro del bloque incluso podemos escribir distintas lineas de Javascript
*/
(prevState) => { error: !prevState.error }

// return con par茅ntesis
(prevState) => ({ error: !prevState.error })

// Return de forma expl铆cita
(prevState) => { return { error: !prevState.error } }
prueba
Que buena clase el uso de estado en componentes funcionales y de clase. Componente Funcional: `const [error, setError] = React.useState(true);` Componente de Clase: `this.state.error`

Porfavor que horrible trabajar componentes con clases, me quedo toda la vida con los funcionales鈥

C贸digo de la clase en TypeScript

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

function App() {

  return (
    <>
      <UseState name='UseState' />
      <ClassState name='ClassState' />
    </>
  )
}

export default App

import { FC, useState } from "react"

type Props = {
    name: string
}

const UseState:FC<Props> = ({ name }) => {
    const [error, setError] = useState(true);

    return(
        <div>
            <h2>Eliminar { name }</h2>
            <p>Por favor, escribe el c贸digo de seguridad para comprobar que quieres eliminar</p>

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

            <input type="text" placeholder="C贸digo de seguridad" />
            <button
                onClick={()=>{setError(prevState=>!prevState)}}
            >Comprobar</button>
        </div>
    )
}

export { UseState }
import { Component, ReactNode } from "react";

type Props = {
    name: string
}

type State = {
    error: boolean
}

class ClassState extends Component<Props, State>{

    // constructor(props: Props){
    //     super(props)
    //     this.state = {
    //         error: true
    //     }
    // }

    state:State = {
        error: true
    };

    render(): ReactNode {
        return(
            <div>
                <h2>Eliminar { this.props.name }</h2>
                <p>Por favor, escribe el c贸digo de seguridad para comprobar que quieres eliminar</p>

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

                <input type="text" placeholder="C贸digo de seguridad" />
                <button
                    onClick={()=>{this.setState(prevState=>({error: !prevState.error}))}}
                >Comprobar</button>
            </div>
        )
    }
}

export { ClassState }

Si quieren hacer el proyecto en Next js, TypeScript y Tailwind CSS les dejo el c贸digo:

UseState.tsx:

import React from "react";

const UseState = (props: { name: string }) => {
  const [error, setError] = React.useState(false);
  const { name } = props;
  return (
    <section className="flex flex-col items-center w-screen h-96 justify-evenly">
      <h2 className="text-3xl font-bold">Eliminar {name}</h2>
      <p className="text-2xl ">Por favor, escribe el c贸digo de seguridad</p>
      {error && (
        <p className="text-xl font-medium text-red-600">
          error: el c贸digo es incorrecto
        </p>
      )}
      <div className="flex ">
        <input
          placeholder="C贸digo de seguridad"
          className="p-2 mx-4 text-xl text-center border-2 rounded-md"
        />
        <button
          className="p-2 text-xl font-semibold bg-green-200 border-2 border-green-700 rounded-md shadow-lg cursor-pointer text-slate-950 hover:bg-green-800 hover:text-slate-100"
          onClick={() => setError(!error)}
        >
          Comprobar
        </button>
      </div>
    </section>
  );
};

export default UseState;

ClassState.tsx

import React from "react";

type MyProps = {
  name: string;
};
type MyState = {
  error: boolean;
};

class ClassState extends React.Component<MyProps, MyState> {
  state: MyState = {
    error: false,
  };
  render() {
    const { name } = this.props;
    const { error } = this.state;
    return (
      <section className="flex flex-col items-center w-screen h-96 justify-evenly">
        <h2 className="text-3xl font-bold ">Eliminar {name}</h2>
        <p className="text-2xl ">Por favor, escribe el c贸digo de seguridad</p>
        {error && (
          <p className="text-xl font-medium text-red-600">
            error: el c贸digo es incorrecto
          </p>
        )}
        <div className="flex ">
          <input
            placeholder="C贸digo de seguridad"
            className="p-2 mx-4 text-xl text-center border-2 rounded-md"
          />
          <button
            className="p-2 text-xl font-semibold bg-green-200 border-2 border-green-700 rounded-md shadow-lg cursor-pointer text-slate-950 hover:bg-green-800 hover:text-slate-100"
            onClick={() => this.setState({ error: !error })}
          >
            Comprobar
          </button>
        </div>
      </section>
    );
  }
}

export default ClassState;

Espero les sirva!!!