Manejo de Estados en React: Classes y Hooks

StrictMode

Es una herramienta para destacar problemas potenciales en la aplicación. Al igual que Fragment, StrictMode no renderiza nada en la interfaz de usuario. Este modo también activa advertencias y comprobaciones adicionales para sus descendientes.

StrictMode en la actualidad ayuda a:

Identificar ciclos de vida inseguros
Advertencia sobre el uso de la API legado de string ref
Advertencia sobre el uso del método obsoleto findDOMNode
Detectar efectos secundarios inesperados
Detectar el uso de la API legado para el contexto

Documentación oficial

Agregen la siguiente configuración a su visual studio code, para que emmet les autocomplete HTML dentro de la sintaxis JSX

 "emmet.includeLanguages": {
      "javascript": "javascriptreact"
 },

Un ejemplo de emmet, le ayudara a escribir codigo mas rapido con react.

Modifica el archivo App.js por el siguiente código:

import React from 'react'
import './App.css'
import UseState from './UseState'
import UseClass from './ClassState'

function App() {
  return (
    <div className='App'>
      <UseState/>
      <UseClass/>
    </div>
  )
}

export default App;

Luego crea el archivo UseState.js y escribe el siguiente código:

import React from 'react'

export default function UseState() {
  return (
    <div>
      <h2>Eliminar UseState</h2>
      <p>Por favor, escriba el código de seguridad.</p>
      <input type='text' placeholder='código de seguridad'/>
      <button>Comprobar</button>
    </div>
  )
}

Por último crea el archivo ClassState y escribe el siguiente código:

import React, { Component } from 'react'

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

Corre la aplicación con npm start o yarn start

Ahora con la versión 18 de React ya no usamos ReactDOM.render sino **createRoot **

import App from './App';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<App />);

Documentacion: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)

Resumen de la clase
Pasos a seguir:

• Ingresamos a la consola de nuestro VSC
• Escribimos : npx create-react-app manejo-estado
• Luego escribimos : cd manejo de estados
• Después: code -r ./
• Listo para escribir código

Proyecto códigos de seguridad

• Para realizar acción de eliminar un elemento nos pedirá un código de seguridad.
• Si ingresamos uno incorrecto no realiza
• Si ingresamos un código correcto pasamos al estado de confirmación.
• Si le damos no, volvemos al estado anterior.
• Si le damos si, se realiza la acción.

Conforme avancemos el proyecto:

• Entenderemos mejor como funcionaban las clases con React.component
• Conoceremos diferencias con los componentes en funciones utilizando React Hooks
• Conoceremos que paradigmas no daban los estados de las clases comparado con los estados de las funciones.
• Aprovecharemos características que se usaban en las clases pero no en las funciones las cuales son herramientas poderosas.
• Estos son los estados complejos o compuestos y los estados declarativos. (useReducer)

AppContext Y UseReducer

Si alguna vez has trabajado con Redux notaras que el uso de appcontext y useReducer es parecido pero por que no usar AppContext o useReducer en lugar de redux. Pues porque estos hooks actualizan por completo tu aplicación es decir vuelven a renderizar todos los componentes de tu aplicación y esto causa un problema de optimización.
En cambio redux solo actualiza la parte de la aplicación que cambio

El strict mode se viene aplazando desde el primer curso de react, jaja

Me encanta la energía con la que este chico enseña, además de su versatilidad con la tecnología que está enseñando.

super recomendado hacerlo con vite, le facilita a uno la vida
$ npm create vite@latest

Por si no les funciona a la hora de modificar el index js. Es porque apartir de la version 18, React ya no utiliza el render asi, sino que lo utiliza createRoot.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

App.js

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

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

export default App;

UseState.js

import React from "react";

function UseState() {
    return (
        <div>
            <h2>Eliminar UseState</h2>
            <p>Por favor, escribe el código de seguridad</p>
            <input placeholder="Código de Seguridad"/>
            <button>Comprobar</button>
        </div>
    );
}

export {UseState};

ClassState.js

import React from "react";

class ClassState extends React.Component {
    render() {
        return (
            <div>
                <h2>Eliminar ClassState</h2>
                <p>Por favor, escribe el código de seguridad</p>
                <input placeholder="Código de Seguridad"/>
                <button>Comprobar</button>
            </div>
        );
    }
}

export {ClassState};

Por si a alguien le sirve los estilos de estos componentes en sass quedan tal que así:

@import "../basic.scss";

.verification {
  display: flex;
  flex-direction: column;

  text-align: center;
  .verification--title {
    margin-top: 64px;

    color: $label;
    font-size: 32px;
    font-weight: 800;
  }
  .verification--text {
    margin: 24px auto;

    font-style: italic;
  }
  .verification--wrapper {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    & > * {
      padding: 5px;
      width: 25%;

      text-align: center;
      border: none;
    }
    .verification--input {
      color: $canvas;
    }
    .verification--button {
      background: $canvas;
      &:disabled {
        background: $background;
      }
    }
  }
}

Para usarlo con el componente así:

import React from "react";

import "@styles/components/verification.scss";

const VerificationState = (props) => {
  return (
    <article className="verification">
      <h2 className="verification--title">{props.title}</h2>
      <p className="verification--text">{props.text}</p>
      <div className="verification--wrapper">
        <input
          className="verification--input"
          placeholder="Type here"
          name={props.name}
          type="text"
        />
        <button className="verification--button">{props.button}</button>
      </div>
    </article>
  );
};

export { VerificationState };

Abuela… lalalala 8)

Suena bien está clase. Ánimo a rtodos los que andan.

para usar react 17.0.2
dejo este tuto
https://dev.to/ifeanyichima/how-to-downgrade-from-react-18-to-1702-818

Eliminar UseState

Escribe el código de seguridad para eliminar.

Nuevo proyecto: códigos de seguridad

.
El proyecto es de códigos de seguridad, consiste en una medida de seguridad para poder eliminar o hacer algo.
.

1. Lo primero que hará es preguntarnos por nuestro código de seguridad para hacer alguna acción.
2. Si el código es correcto pasaremos a un estado de confirmación donde podremos decidir si continuar con la eliminación o volver atrás, sino tendremos un estado de error.
3. Si decidimos eliminar también tendremos un botón para volver al estado inicial otra vez y recuperar lo que hemos eliminado.

.
Vamos a empezar a trabajar todos estos códigos de seguridad, y a la medida que hagamos esto vamos a:
.

• Entender cómo funcionaban las clases con React.Component y sus diferencias con los componentes basados en funciones utilizando react hooks.
• Estudiar a profundidad los paradigmas o características que nos daban los estados de las clases comparado con los estados de las funciones, los react hooks.
• Ver cómo aprovechar cosas de las clases que si los utilizamos con las funciones son una herramienta increible, estos son los estados compuestos o complejos.
• Ver los estados declarativos, por lo cual se va a utilizar una herramienta llamada useReducer.

.
Entonces, en App llamamos a los 2 componentes UseState y ClassState.
.

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

.
En el componente UseState queremos crear un componente con funciones para que nos permita utilizar react hooks y entonces poder utilizar useState.
.

function UseState() {
	return (
		<div>
			<h2>Eliminar UseState</h2>
			<p>Por favor, escribe el código de seguridad.</p>
			<input placeholder="Código de seguridad" />
			<button>Comprobar</button>
		</div>
	);
}

export { UseState };

.
En la clase vamos a crear a un componente de tipo clase.
.

class ClassState extends React.Component {
	render() {
		return (
			<div>
				<h2>Eliminar ClassState</h2>
				<p>Por favor, escribe el código de seguridad.</p>
				<input placeholder="Código de seguridad" />
				<button>Comprobar</button>
			</div>
		);
	}
}

export { ClassState };

.
La diferencia entre el componente de tipo clase vs el componente de tipo función radica en que el componente de tipo clase:
.

• Extiende de React.component, el cual nos dispone de todos los métodos, funciones y propiedades que nos da este componente por defecto.
• Para renderizar la interfaz llamamos al método render() y después dentro de llaves podemos hacer el return de lo que queramos.

Mis apuntes en Notion💚

Me encanta cuando en los cursos se toman el tiempo de aclarar conceptos básicos, de manera rápida, para poder así generar memoria, y ver desde el principio un flujo de trabajo. Ojalá todos los cursos hicieran esto.

Codigo de la clase en TypeScript

import { FC } from "react"

const UseState:FC = () => {
    return(
        <div>
            <h2>Eliminar UseState</h2>
            <p>Por favor, escribe el código de seguridad para comprobar que quieres eliminar</p>
            <input type="text" placeholder="Código de seguridad" />
            <button>Comprobar</button>
        </div>
    )
}

export { UseState }

import { Component, ReactNode } from "react";

class ClassState extends Component{
    render(): ReactNode {
        return(
            <div>
                <h2>Eliminar ClassState</h2>
                <p>Por favor, escribe el código de seguridad para comprobar que quieres eliminar</p>
                <input type="text" placeholder="Código de seguridad" />
                <button>Comprobar</button>
            </div>
        )
    }
}

export { ClassState }

Faltan los recursos que menciona en la descripción del video, hecho de menos los resumenes que he visto en otros cursos en cada video