Manejo de Estados en React: Classes y Hooks

2/19
Recursos
Transcripción

¿Cómo crear un nuevo proyecto con Create React App?

Iniciar un proyecto en React es una tarea fundamental para cualquier desarrollador que desea trabajar con esta poderosa biblioteca de JavaScript. Para comenzar, debes asegurarte de estar en la carpeta deseada donde vas a crear tu proyecto. Usaremos el comando NPX para facilitar este proceso. Específicamente, el comando npx create-react-app nombre-proyecto instalará todas las herramientas necesarias para tu proyecto React.

Pasos básicos para iniciar el proyecto

  1. Navegar a la carpeta donde deseas crear el proyecto.
  2. Ejecutar el comando: npx create-react-app curso-manejo-estado-1.
  3. Una vez completada la instalación, ingresar a la carpeta del proyecto con cd curso-manejo-estado-1.
  4. Iniciar el proyecto utilizando npm start, lo cual abrirá una ventana en tu navegador predeterminado en localhost:3000.

¿En qué consiste el proyecto de códigos de seguridad?

Este proyecto tiene como objetivo desarrollar un sistema que permite a los usuarios escribir un código de seguridad para confirmar acciones, como la eliminación de un elemento. Este enfoque emula medidas de seguridad básicas encontradas en plataformas como GitHub y Amazon Web Services.

Flujo del proyecto

  • Ingreso del código incorrecto: Muestra un mensaje de error.
  • Ingreso del código correcto: Confirma la acción y pregunta si se desea proceder o cancelar.

Este sistema fomenta una comprensión más completa de cómo funcionan las clases y componentes de funciones en React, y cómo utilizar React Hooks para gestionar estados.

¿Cómo estructurar y modificar el proyecto en Visual Studio Code?

Una vez que el proyecto está funcionando, es crucial importarlo a un editor de código como Visual Studio Code. Aquí, ejecutarás comandos para abrir y manejar tu proyecto, haciendo modificaciones necesarias para personalizarlo.

Comandos y estructura inicial

  • Pausar el servidor: Para abrir el proyecto en Visual Studio Code, utiliza code -r . después de detener el servidor.
  • Configurar el editor: Confía en los autores del proyecto y abre los archivos necesarios.
  • Modificar archivos: Personaliza archivos como index.js y elimina cualquier contenido innecesario al inicio, como React.StrictMode.

¿Cómo crear y estructurar componentes en React?

Crear componentes en React es esencial para un desarrollo modular y eficiente. Iniciaremos con dos tipos básicos de componentes: con funciones y con clases.

Creación de componentes

  • Componente de función (UseState):
    import React from 'react';
    
    export 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>
        );
    }
    
  • Componente de clase (ClassState):
    import React, { Component } from 'react';
    
    class ClassState extends Component {
        render() {
            return (
                <div>
                    <h2>Eliminar Class State</h2>
                    <p>Por favor, escribe el código de seguridad</p>
                    <input placeholder="Código de seguridad" />
                    <button>Comprobar</button>
                </div>
            );
        }
    }
    
    export { ClassState };
    

Implementación en App.js

  • Importe y utilice los componentes creados dentro de App.js.
  • Asegúrese de que la estructura permita una fácil gestión y adicionamiento de lógica posteriormente.

¿Ver resultados en el navegador?

Después de configurar tus componentes y archivos, ejecuta nuevamente el proyecto con npm start. Visualiza en tu navegador en localhost:3000 los componentes funcionales con su respectiva lógica de entrada y botones.

Continuar explorando la forma en que React maneja estados y eventos te permitirá avanzar hacia un diseño más interactivo y dinámico. ¡Sigue adelante y no te detengas! Cada clase es un escalón más hacia la maestría en React.

Aportes 27

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 };
Se debería empezar creando las carpetas contenedoras para mantener el orden

Abuela… lalalala 8)

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

Para quienes tienen problemas con dependencias, lo solucioné trabajando con Vitenpm create vite@latest Curso-Manejo-Estado --template react cd Curso-Manejo-Estado npm install npm run dev ```js npm create vite@latest Curso-Manejo-Estado --template react cd Curso-Manejo-Estado npm install npm run dev ```
La clase se centra en la creación de un nuevo proyecto de React.js llamado "códigos de seguridad". Aprenderás a manejar el estado utilizando componentes de clase y funciones, explorando herramientas como `useState` y `useReducer`. Se discutirá el ciclo de vida de los componentes, las diferencias entre los estados en componentes de clase y funciones, y cómo implementar funcionalidades para verificar códigos de seguridad en la aplicación.
Every time I start a React course with Create React App, the React team's recommendation comes to mind: never use it, as it is bad practice. Their recommendation is to use the Vitejs template.
Construí mi código con una expresión de una función y NO CON una DECLARACIÓN de función. Y me pregunté ¿qué es mejor, cuál es la diferencia? Encontré esto en la documentación: 1\. La elevación de función solo trabaja con *declaraciones* de función, no con *expresiones* de función. Y un dato curioso: Resulta que las *funciones en sí mismas son objetos* y, a su vez, estos objetos tienen métodos. (Consulta el objeto [`Function`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Function). Uno de estos, el método [`apply()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)`.` Es más por el dato curioso que hago este comentario y es más significativo si ya tomaron el Curso de Progra Orientada a Objetos para JS. <https://platzi.com/cursos/javascript-poo/> Les dejo mi código que sirvió de inspiración para este debraye: ```js import React from 'react'; const UseState = () => { return ( <>

Eliminar UseState

Escribe el código de seguridad para eliminar.

<input placeholder='Código de seguridad'/> <button> Comprobar </button>
); } export { UseState } ```

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.

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