Nuevo proyecto: c贸digos de seguridad

2/19
Recursos

Aportes 4

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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

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

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