Nuevo proyecto: c贸digos de seguridad

2/19
Recursos
Transcripci贸n

Aportes 18

Preguntas 7

Ordenar por:

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

o inicia sesi贸n.

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

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.

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)

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)

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 [email protected]

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

Suena bien est谩 clase. 脕nimo a rtodos los que andan.

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

Abuela鈥 lalalala 8)

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