Nuevo proyecto: códigos de seguridad

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.

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

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

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