Aprende React sin dolor

• Un componente es una función o clase de JavaScript.

• Nota: Comienza siempre los nombres de componentes con una letra mayúscula.

• React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, <div /> representa una etiqueta div HTML pero <Saludo /> representa un componente y requiere que Saludo esté definido.

• Un componente es una función o clase de JavaScript.

• Nota: Comienza siempre los nombres de componentes con una letra mayúscula.

• React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, <div /> representa una etiqueta div HTML pero <Saludo /> representa un componente y requiere que Saludo esté definido.

• Podemos crear componentes en archivos independientes de tipo JSX.

• Necesitamos importar (import) y exportar el componente (export).

• La declaración export se utiliza al crear módulos de JavaScript para exportar funciones, objetos o tipos de dato primitivos del módulo para que puedan ser utilizados por otros programas con la sentencia import.

• Creamos un objeto dentro del archivo index.jsx y lo leemos dentro del componente.

Para poder llamar a un componente dentro de otros componentes, necesitamos crear un “envoltorio” de etiquetas vacías:

• Creamos un objeto dentro del archivo index.jsx y lo leemos dentro del componente.

• Dividiremos el componente en diferentes subcompenentes.

El estado es similar a las props, pero es privado y está completamente controlado por el componente.

• Dentro de una clase debemos definir el método render() que regrese un elemento React.

• El constructor se utiliza para administrar las propiedades (props) y estados (states).

• Dentro de una clase debemos definir el método render() que regrese un elemento React.

• El constructor se utiliza para administrar las propiedades (props) y estados (state).

• Podemos almacenar valores en el objeto state que existen únicamente dentro del componente (propiedades privadas).

• Dentro de una clase debemos definir los métodos:

• componentDidMount() { }

• componentWillUnmount() { }

• Podemos actualizar el estado con el método setState()

• Nunca modificar directamente el estado, sino por su método setter setState().

// Incorrecto

this.state.saludo = 'Hola mundo';

// Correcto

this.setState({saludo: 'Hola mundo'});

Los estados no pueden “heredar” el estado a las clases llamadas internamente, pero si pueden “enviarlas” como parámetros.

• Tenemos tres ciclos de vida de un componente:

  • mount lifecycle

    • constructor,

    • getDerivedStateFromProps,

    • render

    • componentDidMount

  • update lifecycle

    • getDerivedStateFromProps,

    • shouldComponentUpdate,

    • render

    • getSnapshotBeforeUpdate

    • componentDidUpdate

  • unmount lifecycle (componentWillUnmount)

• MOUNT: (constructor -> render -> componentDidMount) -> UPDATE: (render, componentDidUpdate) -> UPDATE (se repite hasta que el componente es desmontado) -> UNMOUNT: (componentWillUnmount)

El método componentWillUnmount

El método componentWillUnmount

• Manejar eventos en elementos de React es muy similar a manejar eventos con elementos de JavaScript. Hay algunas diferencias de sintaxis:

  • Los eventos de React se nombran usando camelCase, en vez de minúsculas.

  • Con JSX pasas una función como el manejador del evento, en vez de un string.

• Cuando estás utilizando React, generalmente no necesitas llamar addEventListener para agregar listeners de eventos a un elemento del DOM después de que este es creado.

• En cambio, solo debes proveer un manejador de eventos cuando el elemento se renderiza inicialmente.

• setState() indica que este componente y sus componentes secundarios se cambiaron y deben volver a representarse con el estado actualizado.

• setState() es el método principal que se usa para actualizar la interfaz de usuario en respuesta a los controladores de eventos y las respuestas del servidor.

prevState la usamos si queremos cambiar el estado de un componente en función del estado anterior de ese componente, usamos this.setState(), que nos proporciona el prevState.

Un ejemplo del manejo de los eventos es crear un formulario y esperar el botón de submit.

Un ejemplo del manejo de los eventos es crear un formulario y esperar el botón de submit.

• Para validar los datos, podemos asociar diferentes eventos blur.

• Como es necesario utilizar el estado, debemos unir (bind) this a los eventos.

Por medio de un proceso de tipo map() podemos desplegar el arreglo de los errores.

Crear un sencillo blog con react

Crear los eventos del blog para contar los caracteres del blog

Podemos renderizar la parte del componente según el estado o renderizar otra parte si el estado cambia.

• Muchas veces necesitamos crear un proceso render dentro de otro proceso render y condicionarlo.

• Por ejemplo, podemos crear un sencillo quiz y mostramos si es correcto o incorrecto dependiendo de la respuesta del usuario.

• La estructura de datos la podemos almacenar en el estado, así como la respuesta del usuario.

• Las posibles respuestas serán desplegadas como botones.

• Podemos asignar las diferentes clases CSS.

Cada vez que el usuario seleccione un botón, necesitamos enviar dos parámetros: el número de la pregunta y la respuesta seleccionada para su evaluación.

• Podemos comparar los campos de la respuesta correcta con la respuesta del usuario por medio del método filter() de JavaScript.

• El método filter() crea un nuevo arreglo con todos los elementos que cumplan la condición implementada por la función dada.

Cuando desplegamos el resultado de la evaluación de la pregunta es cuando tenemos una renderización dentro de otra.

• Podemos usar variables para almacenar elementos.

• Esto puede ayudarnos para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia.

• Podemos usar variables para almacenar elementos.

• Esto puede ayudarnos para renderizar condicionalmente una parte del componente mientras el resto del resultado no cambia.

Rendel null

Render null: segunda parte

El método map() toma un arreglo y lo trasforma en otro por medio de una función.

• const numeros = [1, 2, 3, 4, 5];

• const cuadrados = numeros.map((numero) => numero * numero);

• console.log(cuadrados);

• Por medio de las listas (y las llaves o keys) nos puede ayudar a simplificar el código.

• Las “keys” son fundamentales en el uso del DOM virtual.

• Para “dibujar” la carta utilizaremos los estilos en cascada.

• Tenemos tres estados para cada carta: abajo, encontrada y ‘arriba’ (no está abajo ni encontrada).

• Dibujamos la carta (una división).

• Para “dibujar” la carta utilizaremos los estilos en cascada.

• Tenemos tres estados para cada carta: abajo, encontrada y ‘arriba’ (no está abajo ni encontrada).

• Dibujamos la carta (una división).

• Necesitamos crear nuestra clase “Carta” que es la clase principal.

• La subclase hover sólo repinta el borde.

• Las clases abajo y encontrada sólo modifica el fondo de la carta.

• Necesitamos crear nuestra clase “Carta” que es la clase principal.

• La subclase hover sólo repinta el borde.

• Las clases abajo y encontrada sólo modifica el fondo de la carta.

• Si seleccionamos una carta y es la primera:

  • La voltear todas las cartas boca arriba a boca abajo.

  • Voltear la carta boca arriba.

• Si seleccionamos una carta y es la segunda:

  • Voltear la carta boca arriba.

  • Verificamos si coincide con la primera

    • Si coinciden ambas cartas, las marcamos

Tomamos todo el objeto de las cartas, y aquellas cartas que que no estén seleccionadas, cambiamos su estado de carta boca abajo (abajo) a verdadero.

• Dentro del estado tendremos un contador de usuarios y una bandera de “cargando o loading”.

• El componente llamará una función Ajax (simulada) desde la función componentDidMount().

• Alternamos el mensaje al usuario, dependiendo del estado de la carga.

• Usaremos funciones asíncronas.

• El componente EntradaDesplegar controla el login/logout del usuario.

• Genera el formulario para que el usuario se firme en el sistema.

• Con esa información, buscaremos más adelante los mensajes del mismo.

• Escribiremos las funciones de callback.

• Tendremos un proceso simulado de validación del usuario con Ajax.

• El componente EntradaDesplegar controla el login/logout del usuario.

• Genera el formulario para que el usuario se firme en el sistema.

• Con esa información, buscaremos más adelante los mensajes del mismo.

• Escribiremos las funciones de callback.

• Tendremos un proceso simulado de validación del usuario con Ajax.

• Si existe el nombre de usuario, lo despliega. De lo contrario, regresa un null, por lo que no se despliega nada.

• Busca y despliega los mensajes de ese usuario.

El componente MensajeDesplegar recibe el usuario y lee (de forma simulada) los mensajes del mismo.

• Leer un archivo en formato json.

• Desplegar los comentarios según su nivel.

• Leer un archivo en formato json.

• Desplegar los comentarios según su nivel.

• Desestructuración el objeto json.

• Crearemos un componente para desplegar el comentario.

• Si un componente no requiere de código, sólo etiquetas, podemos regresarlas en la sentencia export.

• Una parte fundamental de cualquier aplicación son los estilos en cascada.

• En React podemos guardar los estilos en cascada los podemos almacenar en la misma carpeta de su componente.

• Podemos hacer que un componente se llame así mismo (recurrencia).

• Debemos prever el fin de la recursión.

Deberías aprender React porque es la tecnología frontend más demandada, tiene una gran comunidad, ofrece oportunidades laborales bien remuneradas y es versátil para crear aplicaciones web y móviles (con React Native). Su estructura basada en componentes, el rendimiento mejorado gracias al DOM virtual y la facilidad de depuración también son ventajas significativas.