DEV Community: Rodrigo Grau

REACT CONTEXT

Rodrigo Grau — Tue, 15 Aug 2023 01:12:51 +0000

[REACT CONTEXT:]
[¿CUÁNDO USAR CONTEXT?]
[¿CUÁNDO NO USAR CONTEXT?]
[¿CÓMO USAR CONTEXT?] # REACT CONTEXT:

Context es una API de React que permite comunicar información entre los componentes sin recorrer cada nivel del árbol de nuestros componentes.

DATA FLOW:

React está diseñado para que la información fluya en una sola dirección, desde los componentes superiores hacia abajo. Al seguir ésta regla, el flujo de información es explícito y más fácil de comprender.

PROP DRILLING:

Aunque React está diseñado para enviar información desde los componentes superiores hacia abajo, ***********existen escenarios*********** para los cuales esto puede ser problemático. “***Prop drilling” es el problema por el que los componentes reciben *props**** con el único propósito de servir como media para que ésta información llegue a los componentes hijos o más abajo en la jerarquía.

El problema de *prop drilling* no está directamente relacionado con Context, ya que ***************************************no todos los problemas*************************************** de prop drilling deben ser resueltos con Context.

¿CUÁNDO USAR CONTEXT?

Context es un manejador de estado(los valores que tiene ciertos elementos en un momento dado) por lo que su uso debe asociarse con almacenar la información que debe ser compartida por muchos componentes, introducir prop drilling o algún otro problema.

Algunos ejemplos son:

Autenticación de usuario.
Theming.
Manejo de distintos idiomas.
Preferencias de moneda, zonas horarias…

Si estás trabajando con información que afecta a distintos componentes, usar Context puede ayudar a compartir la información entre los componentes y que todos reciban la actualización correspondiente.

También se puede usar en secciones del árbol:

Un formulario para el que los controles deben compartir información.
Un componente separado en distintos pasos para mostrar.

Una aplicación puede tener y generalmente requiere más de un solo contexto.

¿CUÁNDO NO USAR CONTEXT?

El uso de Context tienen algunos detalles, los cuales son:

Complejidad: Se cambia de un modelo donde la información fluye explícitamente a un modelo donde no es explícito dicho flujo de la información.
Acoplamiento: Introduce dependencia entre los componentes.

Con Context la información ya no fluye en una sola vía, sino que puede ir en ambos sentidos, haciendo más complejo el código y su interpretación o entendimiento.

Si un elemento/componente está usando Context, no puede ser reciclado/reutilizado en partes del árbol que no tengan contexto, lo cual significa que los componentes operen en donde el contexto que necesitan esté disponible, produciendo dependencia y acoplamiento.

En muchos casos ***********************prop drilling*********************** puede ser mejor que usar ***********Context***********.
En otros casos es mejor usar composición.

¿CÓMO USAR CONTEXT?

Para implementarlo:

Se debe importar la función “***********************createContext***********************” desde la librería de React.

**import { createContext } from "react";** //Se importa la función ****"****createContext****"****desde la librería de ""react, para crear un contexto dentro de un componente de React y comunicar información entre los componentes sin recorrer cada nivel del árbol de nuestros componentes

Se declara una constante nombrada arbitrariamente especificando a qué contexto se hace referencia, a la cual se le asigna como valor, ejecutar la función importada “createContext()”.

Ésta se puede exportar para poder ser utilizada en un componente externo.
```
**export** **const ThemeContext = createContext();** //Se exporta, la declaración de constante con valor asignado de, ejecutar la función para crear un contexto dentro de un componente de React
```

Para utilizarlo:

El resultado de llamar a ejecutar “createContext()” es un objeto que incluye la propiedad *************Provider************* que se debe de incluir en el árbol/JSX para indicar que todos los elementos que están dentro de dicho “*************Provider*************” pueden acceder a los valores almacenados en el contexto.

Se declara como una etiqueta HTML/componente React, mediante el nombre declarado de la constante para el contexto, y acceder a su propiedad “*************Provider*************”.

import { useState, createContext } from "react"; //Se importan, la función hook "useState" para agregar estado a componentes funcionales, y la función "createContext" para crear un contexto que puede ser compartido entre componentes.
import ColorPicker from "./ColorPicker"; //Se importa el componente "ColorPicker", desde, su ruta.

**export const ThemeContext = createContext();** //Se exporta la declaración de constante con valor asignado de, ejecutar la función para crear un contexto compartido entre componentes, será utilizado para compartir y acceder al valor del color en diferentes componentes.

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, será la raíz de la aplicación, la cual ejecuta el siguiente bloque.
    let [color, setColor] = useState("aquamarine"); //Declaración de variable la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor en cadena de texto de un color.
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis.
        **<ThemeContext.Provider** value={[color, setColor]}**>** //Se coloca como etiqueta HTML/componente, el contexto declarado, accediendo a su propiedad "Provider", para indicar que todos los elementos pueden acceder a los valores almacenados en el contexto, y recibiendo la prop "value" para ser el valor del contexto con valor asignado de, dentro de llaves por ser código de JS, mediante la sintaxis de destructuración de arreglos, como primer valor, el valor actual del estado "color", y como segundo valor, la función de actualización para el valor de dicho estado, para que los componentes descendientes accedan y actualicen el valor del color.
            <div style={{ backgroundColor: color }}> //Etiqueta contenedora de bloque, la cual posee la propiedad de "estilo", con valor asignado dentro de llaves por ser código de JS, de un objeto que contendrá las propiedades CSS, la cual es, la propiedad de color de fondo, con valor, del valor actual del estado "color".
                <h1>Hello</h1> //Etiqueta de título principal, contiene texto a ser mostrado.
                <p>Lorem ipsum dolor sit amet consectetur elit :3</p> //Etiqueta de párrafo, contiene texto a ser mostrado.
                <ColorPicker setColor={setColor}/> //Se ejecuta como etiqueta HTML/componente hijo, el componente "ColorPicker" impotado, el cual posee la propiedad "setColor" nombrada arbitrariamente para saber su función, con valor asignado dentro de llaves por ser código de JS, de la función de actualización del valor actual del estado "color", para así actualizar el valor de color del elemento "<div>" que posee la propiedad de color de fondo con valor del valor actual del estado "color".
            </div>
        **</ThemeContext.Provider>**
    );
}

Se define un valor para el contexto, mediante colocar la propiedad “*************value={[,]}************” en “”, siendo mediante la sintaxis de destructuración de arreglos “[]*”, el valor actual del estado correspondiente, y la función de actualización de dicho estado.

import { useState, createContext } from "react"; //Se importan, la función hook "useState" para agregar estado a componentes funcionales, y la función "createContext" para crear un contexto que puede ser compartido entre componentes.
import ColorPicker from "./ColorPicker"; //Se importa el componente "ColorPicker", desde, su ruta.

export const ThemeContext = createContext(); //Se exporta la declaración de constante con valor asignado de, ejecutar la función para crear un contexto compartido entre componentes, será utilizado para compartir y acceder al valor del color en diferentes componentes.

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, será la raíz de la aplicación, la cual ejecuta el siguiente bloque.
    let **[color, setColor]** = useState("aquamarine"); //Declaración de variable la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor en cadena de texto de un color.
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis.
        <ThemeContext.Provider **value={[color, setColor]}**> //Se coloca como etiqueta HTML/componente, el contexto declarado, accediendo a su propiedad "Provider", para indicar que todos los elementos pueden acceder a los valores almacenados en el contexto, y recibiendo la prop "value" para ser el valor del contexto con valor asignado de, dentro de llaves por ser código de JS, mediante la sintaxis de destructuración de arreglos, como primer valor, el valor actual del estado "color", y como segundo valor, la función de actualización para el valor de dicho estado, para que los componentes descendientes accedan y actualicen el valor del color.
            <div style={{ backgroundColor: color }}> //Etiqueta contenedora de bloque, la cual posee la propiedad de "estilo", con valor asignado dentro de llaves por ser código de JS, de un objeto que contendrá las propiedades CSS, la cual es, la propiedad de color de fondo, con valor, del valor actual del estado "color".
                <h1>Hello</h1> //Etiqueta de título principal, contiene texto a ser mostrado.
                <p>Lorem ipsum dolor sit amet consectetur elit :3</p> //Etiqueta de párrafo, contiene texto a ser mostrado.
                <ColorPicker setColor={setColor}/> //Se ejecuta como etiqueta HTML/componente hijo, el componente "ColorPicker" impotado, el cual posee la propiedad "setColor" nombrada arbitrariamente para saber su función, con valor asignado dentro de llaves por ser código de JS, de la función de actualización del valor actual del estado "color", para así actualizar el valor de color del elemento "<div>" que posee la propiedad de color de fondo con valor del valor actual del estado "color".
            </div>
        </ThemeContext.Provider>
    );
}

Para utilizar el valor del contexto en algún componente externo:

Se debe importar la función hook “useContext” desde la librería de React.

**import { useContext } from "react";** //Se importa la función hook "useContext" desde,la librería de "react", para acceder al contexto compartido.

Se debe importar el “createContext()” declarado en el componente principal, el cual es el contexto necesario para el componente externo.

**import { ThemeContext } from "./App";** //Se importa el contexto declarado en el componente principal, para poder utilizar los valores de dicho contexto.

Dentro del componente a utiliza el valor del contexto, se ejecuta el hook “useContext()” el cual recibe como argumento, el contexto importado desde el componente principal del cual se requiere obtener su información.

Siendo que “useContext()” revisará si en la jerarquía hacía arriba encuentra en algún punto el “Provider” para éste contexto, y de esta manera saber que si puede leer ésta información.

Para ello:
- Se declara una variable con la sintaxis de destructuración de arreglos, para poder utilizar el valor actual del estado correspondiente, y la función de actualización de dicho estado.
```
**let [color, setColor] = useContext(ThemeContext);** //Declaración de variable con valor asignado de, mediante la sintaxis de destructuración de arreglos para acceder a los valores declarados en el contexto, los cuales son el valor actual del estado "color" y su función de actualización, con valor asignado de, ejecutar el hook para acceder al contexto compartido, el cual recibe como argumento, el contexto importado.
```

Lo que retorna el hook “useContext()” es aquello que se haya asignado en la propiedad “value={}” del componente “”, siendo el valor mas actualizado de dicho contexto.

Cuando se ejecuta la función de actualización del estado que se obtuvo mediante la destructuración, es que se actualiza el estado de dicha función de actualización, lo que a su vez actualiza el contexto correspondiente.

**import { useContext } from "react";** //Se importa la función hook "useContext" desde,la librería de "react", para acceder al contexto compartido.
**import { ThemeContext } from "./App";** //Se importa el contexto declarado en el componente principal, desde, su ruta, para poder utilizar los valores de dicho contexto.
import PropTypes from "prop-types"; //Se importa el módulo "PropTypes" para validar las propiedades, desde, la librería "prop-types".

export default function ColorPicker() { //Se exporta como valor por defecto, la declaración de fución que será un componente para controlar un color de fondo de un componente, la cual ejecuta el siguiente bloque.
    **let [color, setColor] = useContext(ThemeContext);** //Declaración de variable con valor asignado de, mediante la sintaxis de destructuración de arreglos para acceder a los valores declarados en el contexto, los cuales son el valor actual del estado "color" y su función de actualización, con valor asignado de, ejecutar el hook para acceder al contexto compartido, el cual recibe como argumento, el contexto importado.
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis.
        <div> //Etiqueta contenedora de bloque.
            <input  //Etiqueta de control/ingreso de datos, la cual posee la s siguientes propiedades.
                type="color" //Propiedad de tipo, con valor para ser un selector de color.
                value={**color**} //Propiedad de valor, con valor asignado dentro de llaves por se código de JS, de el valor actual del estado "color".
                onChange={(e) => **setColor(e.target.value)}** //Propiedad manejadora del evento de cambio en éste input, con valor asignado dentro de llaves por ser código de JS, de una función de flecha callback, la cual recibe como argumento el evento ejecutado, y ejecutando, la función de actualización del estado "color", la cual recibe como argumento, del evento ejecutado, acceder al elemento que lo ejecutó, y acceder a su valor, para que así cada vez que cambie el valor de éste contról ese sea el nuevo valor actual del estado "color".
            />
        </div>
    );
}

ColorPicker.propTypes = { //De dicha función componente, se accede a su propiedad estática "propTypes" que es un objeto para especificar los tipos de datos esperados de las propiedades(****props****) de un componente y asegurarse de que sean utilizadas correctamente, el cual es obtenido de la librería "prop-types", y se reasigna su valor.
    setColor: PropTypes.func //Se establece que, la propiedad "name" debe, desde la librería "PropTypes", ser una función
}

FORMULARIOS EN REACT

Rodrigo Grau — Tue, 15 Aug 2023 01:11:45 +0000

[FORMIK:]
[FORMA BÁSICA DE USO:]
[FORMA DINÁMICA DE USO:]
[CÓDIGO REFACTORIZADO:]

FORMIK:

Librería open-source de componentes de React para construir formularios.
Ayuda a:
- Obtener los valores de entrada y de salida de los estados en un formulario.
- Validaciones y mensajes de error.
- Manejar envío de formularios.

Implementación:

Para instalar Formik, asegúrate de tener Node.js y npm (Node Package Manager) instalados en tu computadora. Luego, puedes seguir estos pasos para instalar Formik:

Abre una terminal o línea de comandos en tu sistema operativo.
Navega al directorio de tu proyecto o crea uno nuevo donde quieras usar Formik.
Ejecuta el siguiente comando para instalar Formik a través de npm:
```
**npm install formik --save**
```
Este comando instalará Formik y lo añadirá como una dependencia en tu archivo package.json.

Después de la instalación, podrás utilizar Formik en tu proyecto importándolo en tus archivos JavaScript o TypeScript:

**import { Formik, Form, Field, ErrorMessage, useFormik } from 'formik';** //Se importan todo lo neceario para usar "Formik**"**, desde la librería "**formik**"

FORMA BÁSICA DE USO:

A una constante declarada arbitrariamente se le asigna el hook personalizado *******************useFormik({}).*******************

Dicho hook recibe como argumento un objeto con las siguientes propiedades:

initialValues: Son los valores iniciales, las cuales son colocadas dentro de un objeto, siendo todos los valores iniciales que se tendrán en el formulario. Se deben de definir todos los campos del formulario.
onSubmit: Función que maneja el evento de entrega de la información del formulario, la cual mediante una función flecha callback o la referencia a una función creada para maneja el evento, va a recibir todos los valores de cada uno de los inputs que se puedan obtener, mediante recibir como argumento un objeto "values" que contiene los valores actuales de todos los campos del formulario, y como segundo argumento el objeto “formikBag” del cual se pueden acceder a varias utilidades como métodos mediante la sintaxis de destructuración “*{ }”, o usar “formikBag” y acceder utilizando “formikBag.nameMetod*”.

**const formik = useFormik({** //Declaración de constante que será el controlador del formulario, siendo una instancia de "Formik" que almacena el estado y las funciones relacionadas con el formulario con valor asignado de, la función hoot "useFormik", que configura varias opciones importantes mediante un obejto que recibe como argumento y que posee las siguientes propiedades
    **initialValues: {** //Propiedad del objeto, la cual será los valores iniciales de los inputs/controles del fomulario, con valor de un objeto con las siguientes propiedades
        **email: '',** //Propiedad del objeto, que será el valor inicial para el control de "email", con valor asignado de, una cadena vacía 
        **password: ''** //Propiedad del objeto, que será el valor inicial para el control de "password", con valor asignado de, una cadena vacía 
    **},
    onSubmit: (values) => {}** //Propiedad del objeto, que será una función que se ejecutará cuando el formulario sea enviado, con valor asignado de, una función de flecha callback, la cual recibe como argumento un objeto "values" que contiene los valores actuales de todos los campos del formulario.
**});**

Lo que retorna la constante formik, mediante el uso del hook useFormik({}), es un obejto que posee distintos atributos y método necesarios para los formularios.

Una vez creada dicha constante con los datos configurados, mediante un formulario declarado con las etiquetas HTML:

En la etiqueta , en su propiedad *******************onSubmit={}****************, se le asigna ******formik.handleSubmit********, haciendo que se llame a ejecutar el valor de la propiedad “onSubmit” de la constante “formik” la cual es una función para manejar dicho evento, para así pasarle los valores del formulario a la función flecha o la función creada para maneja el evento de dicha propiedad “******************onSubmit={}*******************”.

Siendo que “handleSubmit” es un método interno proporcionado por Formik que se ejecutará cuando se envíe el formulario y manejará los datos del formulario en ese momento.
En cada uno de los inputs o elementos del formulario, en su propiedad “*****name****” se le debe de asignar como valor el mismo valor asignado dentro de la propiedad “initialValues*” correspondiente a su elemento del formulario, para que así se enlacen sus valores.
- En la propiedad “*******value******”, dentro de llaves por ser código de JS, desde la constante “formik”, se accede a sus valores “values*” que son los valores iniciales, y se accede al valor correspondiente para el input o elemento
- En su propiedad *******************onChange={},******************* desde la constante “formik”, se ejecuta la función handleChange la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente.
  
  Formik utiliza esta función(handleChange) interna de React para escuchar los cambios de los campos del formulario y actualizar automáticamente los valores en su estado interno.

**<form onSubmit={formik.handleSubmit}>** //Etiquta de formulario, la cual posee la propiedad manejadora de ventos del evento de "entregar/enviar" los datos del formulario, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formik", ejecutar su función manejadora de dicho evento la cual hace refencia a la propiedad "onSubmit" de dicha instancia "formik"
    **<input** //Etiqueta de ingreso de datos, la cual posee los siguientes atriutos y propiedades
        **name="email"** //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
        **value={formik.values.email}** //Atributo de "valor", con valo dentro de llaves por ser código de JS, siendo desde la instancia de Formik "formik", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "email" de dicha propiedad "initialValues"
        **onChange={formik.handleChange}** //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formik", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente 
    **/>
</form>**

EJEMPLO:

**import { useFormik } from "formik";** //Se importa la función hook para el manejo de formularios, desde, la librería de "formik"

export default function App() { //Se importa como valor por defecto, la declaración de función que será un componente y que ejecuta el siguiente bloque
    **const formData = useFormik({** //Declaración de constante que será el controlador del formulario, siendo una instancia de "Formik" que almacena el estado y las funciones relacionadas con el formulario con valor asignado de, la función hook "useFormik", que configura varias opciones importantes mediante un objeto que recibe como argumento un obejto que posee las siguientes propiedades
        **initialValues: {** //Propiedad del objeto, la cual será los valores iniciales de los inputs/controles del fomulario, con valor de un objeto con las siguientes propiedades
            **email: "",** //Propiedad del objeto, que será el valor inicial para el control de "email", con valor asignado de, una cadena vacía 
            **firstName: "",** //Propiedad del objeto, que será el valor inicial para el control de "firstName", con valor asignado de, una cadena vacía 
            **lastName: ""** //Propiedad del objeto, que será el valor inicial para el control de "lastName", con valor asignado de, una cadena vacía 
        **},
        onSubmit: handleSubmit** //Propiedad del objeto, que será una función que se ejecutará cuando el formulario sea enviado, con valor asignado de, la función declarada para manejar el envío de los datos del formulario
    **});**

    **function handleSubmit(values) {** //Declaración de función para manejar el envío de los datos del formulario, la cual recibe como argumento un objeto "values" que contiene los valores actuales de todos los campos del formulario, y que ejecuta el siguiente bloque
        **console.log(values);** //A la consola del navegador, se le aplica el métdo para imprir en la misma, los valores del dicho objeto "values" enviado como argumento
        **formData.resetForm();** //A dicha instancia de "Formik" la cual hace referencia a los valores del formulario, se le aplica el método proporcionado por la misma instancia, para resetear el formulario y todos sus campos
    **}**

    return ( //Se retorna una estructura de JSX, el cual será la sección principal del componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <h1>Basic Form</h1> //Etiqueta de título principal, contiene texto a ser mostrado
            **<form onSubmit={formData.handleSubmit}>** //Etiquta de formulario, la cual posee la propiedad manejadora de ventos del evento de "entregar/enviar" los datos del formulario, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formik", ejecutar su función manejadora de dicho evento la cual hace refencia a la propiedad "onSubmit" de dicha instancia "formik"
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="email">Email</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, la cual posee los siguientes atriutos y propiedades
                        id="email" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                        type="email" //Propiedad de tipo, con valor para ser de "correo electrónico"
                        name="email" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                        **value={formData.values.email}** //Atributo de "valor", con valo dentro de llaves por ser código de JS, siendo desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "email" de dicha propiedad "initialValues" para obetener su valor
                        **onChange={formData.handleChange}** //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente 
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                    />
                </div>

                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="firstName">First Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, la cual posee los siguientes atriutos y propiedades
                        id="firstName" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                        type="text" //Propiedad de tipo, con valor para ser de "texto"
                        name="firstName" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                        **value={formData.values.firstName}** //Atributo de "valor", con valor dentro de llaves por ser código de JS, siendo desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "firstName" de dicha propiedad "initialValues" para obetener su valor
                        **onChange={formData.handleChange}** //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente 
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                    />
                </div>

                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="lastName">Last Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, la cual posee los siguientes atriutos y propiedades
                        id="lastName" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                        type="text" //Propiedad de tipo, con valor para ser de "texto"
                        name="lastName" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                        **value={formData.values.lastName}** //Atributo de "valor", con valor dentro de llaves por ser código de JS, siendo desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "lastName" de dicha propiedad "initialValues" para obetener su valor
                        **onChange={formData.handleChange}** //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente 
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                    />
                </div>
                <button type="submit">Subscribe</button> //Etiqueta de botón, posee el atributo de "tipo" con valor de "entregar" para mandar los valores del formulario, y contiene texto
            </form>
        </div>
    );
}

FORMA DINÁMICA DE USO:

Los campos dependen de otros campos para ser mostrados, utilizando condicionales preferente utilizando el operador *********************ternario********************* “ *********************? :********************* ”

Se hacen validaciones:

Dentro de la instancia creada de Formik al usar el hook “***************useFormik************”, se puede colocar la propiedad “**********validate*************” la cual manejará las validaciones de los campos del formulario.
Dicha propiedad puede recibir como valor una función de flecha callback o la referencia de una función creada para manejar las validaciones del formulario la cual puede ser nombrada arbitrariamente.
- Dicha función para manejar las validaciones del formulario recibe como argumento un objeto "values" que contiene los valores actuales de todos los campos del formulario.
- Dicha función para manejar las validaciones del formulario, ejecuta la declaración de una constante “*********errors*********” la cual va a contener los mensajes de errores al cumplir una condición validación, ésta constante tiene valor asignado de un objeto.
- El objeto de la constante “*********errors*********” recibirá sus propiedades y valores al cumplirse una condición de validación, para ello:
  1. Lo que ejecuta la condición es acceder al objeto “*********errors*********”.
  2. Colocar el nombre del control del formulario de cuál se está haciendo la validación, siendo el mismo nombre que se encuentra en la propiedad “initialValues” de la instancia de Formik.
  3. Asignar como valor, una cadena de texto que será mostrada al cumplir la condición de validación.
Después se crean las condicionales para validar cada control del formulario, accediendo al objeto “values” y al nombre del control que se encuentra en la propiedad “initialValues” de la instancia de Formik, así creando una validación personalizada.
Finalmente se **********retorna********** el objeto “******errors******” con todas sus propiedades y valores dependientes de las condicionales para validar los valores de los controles del formulario.

EJEMPLO:

import { useFormik } from "formik";  //Se importa la función hook para el manejo de formularios, desde, la librería de "formik"

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
    const formData = useFormik({ //Declaración de constante que será el controlador del formulario, siendo una instancia de "Formik" que almacena el estado y las funciones relacionadas con el formulario con valor asignado de, la función hook "useFormik", que configura varias opciones importantes mediante un objeto que recibe como argumento un obejto que posee las siguientes propiedades
        initialValues: { //Propiedad del objeto, la cual será los valores iniciales de los inputs/controles del fomulario, con valor de un objeto con las siguientes propiedades
            email: "", //Propiedad del objeto, que será el valor inicial para el control de "email", con valor asignado de, una cadena vacía 
            firstName: "", //Propiedad del objeto, que será el valor inicial para el control de "firstName", con valor asignado de, una cadena vacía 
            lastName: "", //Propiedad del objeto, que será el valor inicial para el control de "lastName", con valor asignado de, una cadena vacía 
            termsAccepted: false //Propiedad del objeto, que será el valor inicial para el control de "termsAccepted", con valor asignado de, una cadena vacía 
        },
        **onSubmit: handleSubmit**, //Propiedad del objeto, que será una función que se ejecutará cuando el formulario sea enviado, con valor asignado de, la función declarada para manejar el envío de los datos del formulario
        **validate: handleValidate** //Propiedad del objeto, que manejará las validaciones de los campos del formulario, con valor asignado de, la función declarada para manejar las validaciones de los campos del formulario.
    });

    function handleSubmit(values) { //Declaración de función para manejar el envío de los datos del formulario, la cual recibe como argumento un objeto "values" que contiene los valores actuales de todos los campos del formulario, y que ejecuta el siguiente bloque
        console.log(values); //A la consola del navegador, se le aplica el métdo para imprir en la misma, los valores del dicho objeto "values" enviado como argumento
        formData.resetForm();  //A dicha instancia de "Formik" la cual hace referencia a los valores del formulario, se le aplica el método proporcionado por la misma instancia, para resetear el formulario y todos sus campos
    }

    **function handleValidate(values) {** //Declaración de función para manejar las validaciones de los campos del formulario., la cual recibe como argumento un objeto "values" que contiene los valores actuales de todos los campos del formulario, y que ejecuta el siguiente bloque
        **const errors = {};** //Declaración de constante con valor asignado de, un objeto, la cual va a contener los mensajes de errores al cumplir una condición validación

        **if (values.termsAccepted === false) {** //Condicional que valida si, del objeto de valores del formulario, acceder al valor del control "termsAccepted", es estrictamente igual, que el valor booleano "false", ejecutando el siguiente bloque
            **errors.termsAccepted = "You must accept the terms";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "termsAccepted", con valor asignado de, la cadena de texto "Required", para indicar que es requerido por estar vacío
        **}**

        **if (values.firstName.length === 0) {** //Condicional que valida si, del objeto de valores del formulario, acceder al valor del control "firstName", y obtener su longitud, es estrictamente igual, que el valor numérico 0, ejecutando el siguiente bloque
            **errors.firstName = "Required";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "firstName", con valor asignado de, la cadena de texto "Required", para indicar que es requerido por estar vacío
                        **} else if (values.firstName.length < 2) {** //Si no se cumple la condición anterior, significando que si se validó con éxito, ahora se valida si, del objeto de valores del formulario, acceder al valor del control "firstName", y obtener su longitud, es menor que el valor numérico 2, ejecutando el siguiente bloque
            **errors.firstName = "Should be more than 2 characters";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "firstName", con valor asignado de, la cadena de texto "Should be more than 2 characters", para indicar que el valor ingresado debe ser mayor que dos carácteres
        }

        **if (values.lastName.length === 0) {** //Condicional que valida si, del objeto de valores del formulario, acceder al valor del control "lastName", y obtener su longitud, es estrictamente igual, que el valor numérico 0, ejecutando el siguiente bloque
            **errors.lastName = "Required";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "lastName", con valor asignado de, la cadena de texto "Required", para indicar que es requerido por estar vacío
        **} else if (values.lastName.length < 2) {** //Si no se cumple la condición anterior, significando que si se validó con éxito, ahora se valida si, del objeto de valores del formulario, acceder al valor del control "lastName", y obtener su longitud, es menor que el valor numérico 2, ejecutando el siguiente bloque
            **errors.lastName = "Should be more than 2 characters";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "lastName", con valor asignado de, la cadena de texto "Should be more than 2 characters", para indicar que el valor ingresado debe ser mayor que dos carácteres
        **}

        if (values.email.length === 0) {** //Condicional que valida si, del objeto de valores del formulario, acceder al valor del control "email", y obtener su longitud, es estrictamente igual, que el valor numérico 0, ejecutando el siguiente bloque
            **errors.email = "Required";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "email", con valor asignado de, la cadena de texto "Required", para indicar que es requerido por estar vacío
        **} else if (!/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/i.test(values.email)) {** //Si no se cumple la condición anterior, significando que si se validó con éxito, ahora se valida si, NO("!/") se cumple la expresión regular "[a-z0-9]", Coincide con uno o más caracteres alfabéticos en minúsculas o dígitos, "@" Coincide con el carácter "@", "[a-z]" Coincide con uno o más caracteres alfabéticos en minúsculas (dominio), "\." Coincide con el carácter punto ("."), "[a-z]{2,3}" Coincide con dos o tres caracteres alfabéticos en minúsculas (extensión de dominio), el modificador "i" al final de la expresión regular indica que la coincidencia no debe ser sensible a mayúsculas y minúsculas, siendo que a dicha expresión regular se le aplica el método de "probar" dicha expresión regular, la cual recibe como argumento, del objeto de valores del formulario, acceder al valor del control "email", para obtener dicho valor y problarlo para validarlo, para asegurarse de que tenga un formato válido, ejecutando el siguiente bloque si se cumple la condición anterior
            **errors.email = "Invalid email";** //Se accede a la constante objeto que contendrá los errores por validaciones, asignando una nueva propiedad que hace referencia al control "email", con valor asignado de, la cadena de texto "Invalid ****email", para indicar que no es un formato válido de correo electróico
        **}

        return errors;** //Se retorna, el objeto de errores con todas sus propiedades y valores asignadas pependiendo de los resultados de las condicionales para validar los valores de los controles del formulario
    **}**

        function handleDisabled() { //Declaración de función para manejar el comportamiento de habilitar el botón para enviar los datos del formulario, la cual ejecuta el siguiente bloque
        return Object.keys(formData.errors).length > 0 || //Se retorna el resultado de dos condiciones siendo, desde la clase "Object" ejecutar su método "keys" para obtener un arreglo de las propiedades (claves) de un objeto, el cual recibe como argumento, de la instacia de Forimik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", y obtener su longitud que representa la cantidad de errores de validación presentes para validar si es mayor que 0 lo que significa que hay errores, O, la siguiente condición
        !Object.values(formData.values).every(value => value); //Negar(invertir) el resultado de, desde la clase "Object" ejecutar su método "values" para obtener un arreglo de los valores de las propiedades de un objeto, el cual recibe como argumento, de la instacia de Forimik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, y aplicar el método "every" que verifica si todos los elementos de un arreglo cumplen con cierta condición, siendo cada uno de los valores dentro del objeto "initialValues", el cual recibe como argumento una función flecha callback, la cual ejecuta, por cada valor dentro del arreglo obtenido del objeto "formData.values", retornar el mismo valor, así para verificar si todos los valores en el objeto "formData.values" son verdaderos, siendo que si todos los valores son verdaderos, la función "every" devolverá "true", si al menos un valor es falso, la función "every" devolverá "false", al agregar la negación "!" al principio, se invierte el resultado, por lo que la expresión completa evalúa si al menos un valor es "falso"
    }

    return ( //Se retorna una estructura de JSX, el cual será la sección principal del componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <h1>Dynamic Form</h1> //Etiqueta de título principal, contiene texto
            **<form onSubmit={formData.handleSubmit}>** //Etiquta de formulario, la cual posee la propiedad manejadora de ventos del evento de "entregar/enviar" los datos del formulario, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual hace refencia a la propiedad "onSubmit" de dicha instancia "formData"
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="termsAccepted">Accept Terms</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, la cual posee los siguientes atriutos y propiedades
                        type="checkbox" //Propiedad de tipo, con valor para ser de "caja de selección"
                        name="termsAccepted" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                        id="termsAccepted" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                        checked={formData.values.termsAccepted} //Propiedad de "comprobado/seleccionado", con valor dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "termsAccepted" de dicha propiedad "initialValues" para obetener su valor y controlar su comportamiento dependiendo de dicho valor
                        value={formData.values.termsAccepted} //Atributo de "valor", con valor dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "termsAccepted" de dicha propiedad "initialValues" para obetener su valor y controlar su comportamiento dependiendo de dicho valor
                        onChange={formData.handleChange} //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente 
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                    />

                    **{formData.errors.termsAccepted ? (** //Dentro de llaves por se código de JS, se utiliza el operador ternario, que valida, si, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "termsAccepted" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple con su valor booleano "true", ejecuta el siguiente bloque, el cual es una estructura JSX
                        **<div style={{ color: "red" }}>** //Etiqueta contendora de bloque, con la propiedad de "estilos" con valor asignado dentro de llaves por ser código de JS, dentro de un objeto, colocar la propiedad de color de texto con valor asignado del color rojo, para todo los elementos dentro de dicho contenedor, el cual contiene lo siguiente
                            **{formData.errors.termsAccepted}** //Dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "termsAccepted" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple, se mostrará el valor de la condición que se ejecute, la cual es alguna validación que no ha sido exitosa
                        **</div>
                    ) : null}** //Si no se cumple la condición ternaria, se ejecuta un valor nulo para no mostrar nada, lo que significa que no hubo errores al validar el campo
                </div>

                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="email">Email</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, la cual posee los siguientes atributos y propiedades
                        id="email" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                        type="email" //Propiedad de tipo, con valor para ser de "correo electrónico"
                        name="email" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                        placeholder="sample@mail.com" //Propiedad de texto demostrativo, con valor de una cadena de texto a ser mostrada
                        value={formData.values.email} //Atributo de "valor", con valor dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "email" de dicha propiedad "initialValues" para obetener su valor y controlar su comportamiento dependiendo de dicho valor
                        onChange={formData.handleChange} //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente 
                        onBlur={formData.handleBlur} //Propiedad manejadora de ventos del evento de "desenfoque" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el desenfoque del elemento y actualiza el estado del componente 
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                    />

                    **{formData.touched.email &&** //Dentro de llaves por se código de JS, se ejecutan dos condiciones que deben ser cumplidas al mismo  tiempo, siendo la primera, desde la instancia de Formik "formData", acceder a su propiedad "touched" que verifica si algún campo/control del formulario ha sido "tocado" o interactuado por el usuario (en términos de enfoque y pérdida de enfoque) para mostrar el error después de perder el enfoque del campo, siendo el campo/control "email", y al mismo tiempo mediante el operador "and/&&"
                    **formData.errors.email ? (** //Se utiliza el operador ternario, que valida, si, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "email" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple con su valor booleano "true", ejecuta el siguiente bloque, el cual es una estructura JSX
                        **<div style={{ color: "red" }}>** //Etiqueta contendora de bloque, con la propiedad de "estilos" con valor asignado dentro de llaves por ser código de JS, dentro de un objeto, colocar la propiedad de color de texto con valor asignado del color rojo, para todo los elementos dentro de dicho contenedor, el cual contiene lo siguiente
                            **{formData.errors.email}** //Dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "email" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple, se mostrará el valor de la condición que se ejecute, la cual es alguna validación que no ha sido exitosa
                        **</div>
                    ) : null}** //Si no se cumple la condición ternaria, se ejecuta un valor nulo para no mostrar nada, lo que significa que no hubo errores al validar el campo
                </div>

                **{!formData.errors.email &&** //Dentro de llaves por se código de JS, se ejecutan dos condiciones que deben ser cumplidas al mismo tiempo, siendo la primera, negar/invertir el valor obtenido de, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "email" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple, será invertido el valor "true" por "false" para que no se cumpla la condición, y al mismo tiempo mediante el operador "and/&&"
                **formData.values.termsAccepted === true ? (** //Desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "termsAccepted" de dicha propiedad "initialValues" para obetener su valor, y validar si es estrictamente igual que, el valor booleano "true", éstas dos condiciones se deden de cumplir para, retornar una estructura de JSX, siendo colocado entre paréntesis
                    <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
                        <div> //Etiqueta contenedora de bloque
                            <label htmlFor="firstName">First Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                            <input //Etiqueta de ingreso de datos, la cual posee los siguientes atributos y propiedades
                                type="text" //Propiedad de tipo, con valor para ser de "texto"
                                name="firstName" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                                id="firstName" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                                value={formData.values.firstName} //Atributo de "valor", con valor dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "firstName" de dicha propiedad "initialValues" para obtener su valor y controlar su el valor mostrado dependiendo de dicho valor
                                onChange={formData.handleChange} //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente
                                onBlur={formData.handleBlur} //Propiedad manejadora de ventos del evento de "desenfoque" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el desenfoque del elemento y actualiza el estado del componente
                                required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                            />

                            **{formData.touched.firstName &&** //Dentro de llaves por se código de JS, se ejecutan dos condiciones que deben ser cumplidas al mismo  tiempo, siendo la primera, desde la instancia de Formik "formData", acceder a su propiedad "touched" que verifica si algún campo/control del formulario ha sido "tocado" o interactuado por el usuario (en términos de enfoque y pérdida de enfoque) para mostrar el error después de perder el enfoque del campo, siendo el campo/control "firstName", y al mismo tiempo mediante el operador "and/&&"
                            **formData.errors.firstName ? (** //Se utiliza el operador ternario, que valida, si, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "firstName" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple con su valor booleano "true", ejecuta el siguiente bloque, el cual es una estructura JSX
                                **<div style={{ color: "red" }}>** //Etiqueta contendora de bloque, con la propiedad de "estilos" con valor asignado dentro de llaves por ser código de JS, dentro de un objeto, colocar la propiedad de color de texto con valor asignado del color rojo, para todo los elementos dentro de dicho contenedor, el cual contiene lo siguiente
                                    **{formData.errors.firstName}** //Dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "firstName" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple, se mostrará el valor de la condición que se ejecute, la cual es alguna validación que no ha sido exitosa
                                **</div>
                            ) : null}** //Si no se cumple la condición ternaria, se ejecuta un valor nulo para no mostrar nada, lo que significa que no hubo errores al validar el campo
                        </div>

                        <div> //Etiqueta contenedora de bloque
                            <label htmlFor="lastName">Last Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                            <input //Etiqueta de ingreso de datos, la cual posee los siguientes atributos y propiedades
                                type="text" //Propiedad de tipo, con valor para ser de "texto"

                                name="lastName" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" de la instancia de Formik, para enlazar sus valores
                                id="lastName" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar
                                value={formData.values.lastName} //Atributo de "valor", con valor dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "lastName" de dicha propiedad "initialValues" para obtener su valor y controlar su el valor mostrado dependiendo de dicho valor
                                onChange={formData.handleChange} //Propiedad manejadora de ventos del evento de "cambio de valor" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el cambio de valor en el campo de entrada y actualiza el estado del componente
                                onBlur={formData.handleBlur} //Propiedad manejadora de ventos del evento de "desenfoque" en éste input, con valor asignado de, dentro de llaves por ser código de JS, desde la instancia de Formik "formData", ejecutar su función manejadora de dicho evento la cual es una función interna de React que maneja el desenfoque del elemento y actualiza el estado del componente
                                required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                            />

                            **{formData.touched.lastName &&** //Dentro de llaves por se código de JS, se ejecutan dos condiciones que deben ser cumplidas al mismo  tiempo, siendo la primera, desde la instancia de Formik "formData", acceder a su propiedad "touched" que verifica si algún campo/control del formulario ha sido "tocado" o interactuado por el usuario (en términos de enfoque y pérdida de enfoque) para mostrar el error después de perder el enfoque del campo, siendo el campo/control "lastName", y al mismo tiempo mediante el operador "and/&&"
                            **formData.errors.lastName ? (** //Se utiliza el operador ternario, que valida, si, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "lastName" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple con su valor booleano "true", ejecuta el siguiente bloque, el cual es una estructura JSX
                                **<div style={{ color: "red" }}>** //Etiqueta contendora de bloque, con la propiedad de "estilos" con valor asignado dentro de llaves por ser código de JS, dentro de un objeto, colocar la propiedad de color de texto con valor asignado del color rojo, para todo los elementos dentro de dicho contenedor, el cual contiene lo siguiente
                                    **{formData.errors.lastName}** //Dentro de llaves por ser código de JS, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "lastName" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple, se mostrará el valor de la condición que se ejecute, la cual es alguna validación que no ha sido exitosa
                                **</div>
                            ) : null}** //Si no se cumple la condición ternaria, se ejecuta un valor nulo para no mostrar nada, lo que significa que no hubo errores al validar el campo
                        </div>
                    </>
                **) : null}** //Si no se cumple la condición ternaria, se ejecuta un valor nulo para no mostrar nada, lo que significa que no se han aceptado los terminos y no se ha escrito un correo electrónico

                <button //Etiqueta de botón, que se encargará de mandar los datos del formulario, contiene los siguiente atributos y propiedades
                    type="submit" //Propiedad de tipo, con valor para ser de "entregar/mandar"
                    name="submit" //Atributo de "nombre", con valor de dicha cadena de texto la cual serán mandada con los datos del formulario
                    disabled={handleDisabled()}> //Propiedad de "desactivado", con valor asignado dentro de llaves por ser código de JS, de llamar a ejecutar dicha función para habilitar el botón dependiendo del buen llenado de los campos del formulario
                    Subscribe //Contiene texto a ser mostrado
                </button>
            </form>
        </div>
    );
}

CÓDIGO REFACTORIZADO:

Funciones y componentes de Formik:

getFieldsProps() function:
- Permite reducir props repetido como name, value, onChange, onBlur.
- Como propiedad de un elementos, dentro de llaves “*{}” por ser código de JS, se colocan la sintaxis de spread operator “…” para extender todas las propiedades en el control, seguido del nombre de la instancia de Formik, y ejecutando su método “getFieldsProps()*”.
- Como argumentos para la función “getFieldsProps()”, se recibe el valor de la propiedad “*****name****” correspondiente al elemento/control, el cual se definió en la propiedad “initialValues*” de la instancia de Formik.
Formik component:
- Es un componente que encierra todo el formulario en un contexto en lugar de usar el hook useFormik.
- Para utilizarlo, se coloca como etiqueta HTML la palabra Formik, la cual será una etiqueta de apertura y cierre “” que será un componente que contendrá la etiqueta de formulario “”.
- Dicha etiqueta de apertura “” recibirá como props, los valores de la misma manera que se colocaban en el hook “useFormik”, los cuales deben de ser asignados dentro de llaves por ser código de JS.
- Lo que contienen las etiquetas “”:
  - Una función que retorna un componente JSX de formulario, para ello, dentro de llaves “*{}” por ser código de JS, se coloca una función de flecha, la cual va a recibir como argumento un objeto “************formData**********” que posee las misma propiedades y métodos que los que retorna la función hook “************useFormik**************” que retornan dichas etiquetas “*” y el cual será utilizado dentro del formulario para acceder a los valores enviados como props a dichas etiquetas.
  - Si no se va a utiliza el objeto “formData”, no es necesario ejecutar dicha función dentro del componente “”, sino que solo se coloca el componente formulario correspondiente.
Form component:
- Devuelve una etiqueta form con todos los props de Formik (handleSubmit, handleReset).
- Para delimitar y agrupar elementos del formulario. Actúa como un contenedor que engloba todos los campos de entrada, etiquetas y otros elementos relacionados con el formulario.
- Para utilizarlo, se debe importar “*****Form**” desde la librería “******formik*********”.
- En vez de utilizar la etiqueta “” de HTML, se utiliza como etiqueta “”, la cual no necesita recibir la propiedad que maneja el evento “onSubmit” ya que la contiene implícitamente mediante la propiedad “onSubmit” enviada al componente “”.
Field component:
- Devuelve una etiqueta input con todos los props de la función “getFieldProps()”, permitiendo NO colocar: {...formData.getFieldProps("nameControl")}
- Para utilizarlo, se debe importar “*****Field**” desde la librería “******formik*********”.
- En vez de utilizar una etiqueta “”, se utiliza como etiqueta “” la cual va a recibir las mismas propiedades que dicho input, siendo obligatoria la propiedad “*****name****” la cual debe tener como valor asignado, el mismo valor declarado en la propiedad “initialValues” del componente “*”.
ErrorMessage component:
- Agrega la condición cuando input es usado (touched) y si existe el error para mostrar un mensaje, desde el objeto “*********errors********” el cual es accedido automáticamente mediante la propiedad "validate" del componente “*”.
- Para utilizarlo, se coloca como etiqueta “”, la cual en la propiedad “*****name****” debe tener como valor asignado, el mismo valor declarado en la propiedad “initialValues” del componente “*” para ejecutar sus validaciones.
setFieldValue() function:
- Permite actualizar los values del estado del formulario.
FieldArray component:
- Ayuda a manejar arrays dentro de los values del form.
useFormikContext component:
- Custom hook que te permite acceder a los valor del contexto del componente Formik.

Yup:

Librería open-source.
Permite construir esquemas(objetos) de validación, en los cuales se declaran lo nombres que hacen referencia a los controles del formulario para así declarar exactamente que validaciones debe de cumplir, mediante el uso de funciones integradas para dichas validaciones.
Integración con Formik (recomendada).
Para implementarlo, mediante la terminal se debe posicionar en la ruta del proyecto e instalar la librería mediante ***npm***, con el comando:
```
**npm install yup**
```
Para utilizarlo, se debe importar todo “**”, de “as”, “Yup”, desde la librería “yup***”.
```
**import * as Yup from "yup";**
```
Se crear el esquema de validación, el cual es una constante declarada arbitrariamente, con valor asignado de, dede la clase “***Yup”, ejecutar su método de objeto “******object()******” y aplicar el método “********shape()***********” para darle forma/formato:
El formato del esquema de validación mediante el método “***********shape()***********” se define de la siguiente manera:
- Se coloca como propiedad del objeto, el nombre que hace referencia al control del formulario, el cual debe declarase igual que en la propiedad “initialValues” del componente “” para enlazarlos.
- Como valor de dicho control del formulario, se asigna, desde la clase “***Yup**”, la validación que debe de cumplir, como: “Yup.string()*”, para validar que sea una cadena de texto.
- Para añadir más validaciones, se encadenan las funciones para validar lo demás que se requiere, siendo: “Yup.string().required().email()”, para validar que sea una cadena de texto, que es una campo requerido, y que debe ser un correo electrónico.
  
  Dentro de cada función de validación, se puede recibir como argumento, una cadena de texto para definir los mensajes que se mostrarán si no se cumplen las validaciones.
  
  Así para cada control/campo del formulario.
Para utilizar el formato del esquema de validación, se coloca en el componente “” como la propiedad “**************************validationSchema**************************” a la cual se le asigna como valor, dentro de llaves por ser código de JS, el nombre de la constante donde se definió el formato del esquema de validación.

EJEMPLO:

**import { Formik, Form, Field, ErrorMessage } from "formik";** //Se importan, el componente que encierra todo el formulario en un contexto, el componente para crear fomrularios de Formik, el componente para controles/campos del formulario, y el componente para mostrar errores de validaciones, desde la libreía de "formik".
**import * as Yup from "yup";** //Se importa "todo" de Yup, desde la librería "yup" para manejar las validaciones de los campos dek formulario.

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque.

    function handleSubmit(values, **{ resetForm }**) { //Declaración de función para manejar el envío de los datos del formulario, la cual recibe como primer argumento el objeto "values" que contiene los valores actuales de todos los campos del formulario, como segundo argumento se destructura desde el objeto “formikBag” la funicón para resetear el formualrio, y que ejecuta el siguiente bloque.
        console.log(values); //A la consola del navegador, se le aplica el métdo para imprir en la misma, los valores del dicho objeto "values" enviado como argumento.
        **resetForm();** //Se ejecuta la función para resetear el formulario.
    }

    function handleDisabled(formData) { //Declaración de función para manejar el comportamiento de habilitar el botón para enviar los datos del formulario, la cual ejecuta el siguiente bloque.
        return Object.keys(formData.errors).length > 0 || //Se retorna el resultado de dos condiciones siendo, desde la clase "Object" ejecutar su método "keys" para obtener un arreglo de las propiedades (claves) de un objeto, el cual recibe como argumento, de la instacia de Forimik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", y obtener su longitud que representa la cantidad de errores de validación presentes para validar si es mayor que 0 lo que significa que hay errores, O, la siguiente condición.
            !Object.values(formData.values).every(value => value); //Negar(invertir) el resultado de, desde la clase "Object" ejecutar su método "values" para obtener un arreglo de los valores de las propiedades de un objeto, el cual recibe como argumento, de la instacia de Forimik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, y aplicar el método "every" que verifica si todos los elementos de un arreglo cumplen con cierta condición, siendo cada uno de los valores dentro del objeto "initialValues", el cual recibe como argumento una función flecha callback, la cual ejecuta, por cada valor dentro del arreglo obtenido del objeto "formData.values", retornar el mismo valor, así para verificar si todos los valores en el objeto "formData.values" son verdaderos, siendo que si todos los valores son verdaderos, la función "every" devolverá "true", si al menos un valor es falso, la función "every" devolverá "false", al agregar la negación "!" al principio, se invierte el resultado, por lo que la expresión completa evalúa si al menos un valor es "falso".
    }

    **const FormSchema = Yup.object().shape({** //Declaración de constante con valor asignado de, desde "Yup", ejecutar su método para crear un objeto, al cual se le aplica el método, para darle una forma/formato, el cual recibe como argumento un obejto, el cual será el objeto de validaciones de los controles/campos del formulario.
        **termsAccepted: Yup.boolean().oneOf([true], "Is required").required(),** //Propiedad del objeto, el cual será el validador del campo "termsAccepted", el cual está definido de la misma manera que en la propiedad "initialValues**"** del componente “<Formik>”, con valor asignado de, desde "Yup", validar que se reciba un valor booleano, y con el método "oneOf" que asegura que éste campo tenga exactamente el valor "true", si no es así, se muestra el mensaje de error "Is required", esto garantiza que el campo esté seleccionado para que el formulario sea válido.
        **email: Yup.string().required("Is required").email("Is not a valid email"),** //Propiedad del objeto, el cual será el validador del campo "email", el cual está definido de la misma manera que en la propiedad "initialValues**"** del componente “<Formik>”, con valor asignado de, desde "Yup", validar que se reciba un valor de cadena de texto, que sea requerido mostrando la cadena de texto enviada como argumento al momento que no se cumpla dicha validación, y se valida que el valor del campo sea una dirección de correo electrónico válida y muestra el mensaje de error "Is not a valid email" si no lo es.
        **firstName: Yup.string().required("Is required").min(2, "Minimum two characters"),** //Propiedad del objeto, el cual será el validador del campo "firstName", el cual está definido de la misma manera que en la propiedad "initialValues**"** del componente “<Formik>”, con valor asignado de, desde "Yup", validar que se reciba un valor de cadena de texto, que sea requerido mostrando la cadena de texto enviada como argumento al momento que no se cumpla dicha validación, y se valida que el valor del campo tener una longitud mínima de 2 caracteres, si no se cumplen estas condiciones, se mostrará el mensaje de error "Minimum two characters".
        **lastName: Yup.string().required("Is required").min(2, "Minimum two characters")** //Propiedad del objeto, el cual será el validador del campo "lastName", el cual está definido de la misma manera que en la propiedad "initialValues**"** del componente “<Formik>”, con valor asignado de, desde "Yup", validar que se reciba un valor de cadena de texto, que sea requerido mostrando la cadena de texto enviada como argumento al momento que no se cumpla dicha validación, y se valida que el valor del campo tener una longitud mínima de 2 caracteres, si no se cumplen estas condiciones, se mostrará el mensaje de error "Minimum two characters".
    **});**

    return ( //Se retorna una estructura de JSX, el cual será la sección principal del componente a ser renderizado, siendo colocado entre paréntesis.
        <div> //Etiqueta contenedora de bloque.
            <h1>Dynamic Form</h1> //Etiqueta de título principal, contiene texto.
            **<Formik** //Componente que encierra todo el formulario en un contexto, el cual recibe las siguientes props.
                **initialValues={{** //Propiedad para definir los valores iniciales de los campos del formulario, con valor asignado dentro de paréntesis por ser código de JS, de un objeto con las siguientes propiedades.
                    **termsAccepted: false,** //Propiedad del objeto, que será el valor inicial para el control de "termsAccepted", con valor asignado de, el valor booleano false, para que el control no empiece activado.
                    **email: "",** //Propiedad del objeto, que será el valor inicial para el control de "email", con valor asignado de, una cadena vacía.
                    **firstName: "",** //Propiedad del objeto, que será el valor inicial para el control de "firstName", con valor asignado de, una cadena vacía.
                    **lastName: "",** //Propiedad del objeto, que será el valor inicial para el control de "lastName", con valor asignado de, una cadena vacía.
                **}}
                onSubmit={handleSubmit}** //Propiedad del objeto, que será una función que se ejecutará cuando el formulario sea enviado, con valor asignado dentro de llaves por ser código de JS, de la función declarada para manejar el envío de los datos del formulario.
                **validationSchema={FormSchema} >** //Propiedad del objeto, que manejará la validaciones, siendo el esquema de validaciones creado con Yup, con valor asignado dentro de llaves por ser código de JS, de dicha constante la cual es el esquema de validaciones definido para validar los campos del formulario.

                **{(formData) => (** //El componente "<Formik>" contiene, dentro de llaves por ser código de JS, una función de flecha de renderizado como hijo, la cual recibe como argumento el objeto “formData” que retorna dicho componenete “<Formik>” y el cual será utilizado dentro del formulario para acceder a los valores enviados como props a dicho componente "<Formik>", y que retorna una estructura de JSX.
                    **<Form>** //Componente con todos las props del componenete “<Formik>”, para delimitar y agrupar elementos del formulario. Actúa como un contenedor que engloba todos los campos de entrada, etiquetas y otros elementos relacionados con el formulario.
                        <div> //Etiqueta contenedora de bloque.
                            <label htmlFor="termsAccepted">Accept Terms</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto. 
                            **<Field** //Componente de campo/control dentro de formulario, el cual contiene las sisguientes props.
                                type="checkbox" //Propiedad de "tipo", con valor para ser de "caja de selección".
                                name="termsAccepted" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" del componente <Formik>, para enlazar sus valores.
                                id="termsAccepted" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar.
                                checked={formData.values.termsAccepted} //Propiedad de "comprobado/seleccionado", con valor dentro de llaves por ser código de JS, desde el objeto "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" del componente <Formik>, accediendo a la propiedad "termsAccepted" de dicha propiedad "initialValues" para obetener su valor y controlar su comportamiento dependiendo de dicho valor.
                            **/>**
                            **<ErrorMessage name="termsAccepted" />** //Componente de mensaje de error, siendo que agrega la condición cuando el control/campo es usado (touched) y si existe el error para mostrar un mensaje, desde el objeto “errors” el cual es accedido automáticamente mediante la propiedad "validate" del componente “<Formik>”, posee la propiedad de "nombre" con el mismo valor declarado en la propiedad “initialValues” del componente “<Formik>” para ejecutar sus validaciones.
                        </div>

                        <div> //Etiqueta contenedora de bloque.
                            <label htmlFor="email">Email</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto. 
                            **<Field** //Componente de campo/control dentro de formulario, el cual contiene las sisguientes props.
                                type="email" //Propiedad de "tipo", con valor para ser de "correo electrónico".
                                name="email" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" del componente <Formik>, para enlazar sus valores.
                                id="email" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar.                                
                                placeholder="sample@mail.com" //Propiedad de texto demostrativo, con valor de una cadena de texto a ser mostrada.
                            **/>**
                            **<ErrorMessage name="email" />** //Componente de mensaje de error, siendo que agrega la condición cuando el control/campo es usado (touched) y si existe el error para mostrar un mensaje, desde el objeto “errors” el cual es accedido automáticamente mediante la propiedad "validate" del componente “<Formik>”, posee la propiedad de "nombre" con el mismo valor declarado en la propiedad “initialValues” del componente “<Formik>” para ejecutar sus validaciones.
                        </div>

                        {!formData.errors.email && //Dentro de llaves por se código de JS, se ejecutan dos condiciones que deben ser cumplidas al mismo tiempo, siendo la primera, negar/invertir el valor obtenido de, desde la instancia de Formik "formData", acceder al objeto de errores de validaciones, la cual es accedida automáticamente mediante la propiedad "validate" de la instancia de Formirk que ejecuta la función asociada "handleValidate" que retorna el objeto "errors", del cual se accede a su propiedad "email" ejecutando las validaciones correspondientes mediante las condicionales, siendo que si alguna de ellas se cumple, será invertido el valor "true" por "false" para que no se cumpla la condición, y al mismo tiempo mediante el operador "and/&&".
                        formData.values.termsAccepted === true ? ( //Desde la instancia de Formik "formData", acceder a sus "valores" los cuales son los que se encuentran en la propiedad "initialValues" de la instancia de Formik, accediendo a la propiedad "termsAccepted" de dicha propiedad "initialValues" para obetener su valor, y validar si es estrictamente igual que, el valor booleano "true", éstas dos condiciones se deden de cumplir para, retornar una estructura de JSX, siendo colocado entre paréntesis.
                            <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento.
                                <div> //Etiqueta contenedora de bloque.
                                    <label htmlFor="firstName">First Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto.
                                    **<Field** //Componente de campo/control dentro de formulario, el cual contiene las sisguientes props.
                                        type="text" //Propiedad de "tipo", con valor para ser de "texto".
                                        name="firstName" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" del componente <Formik>, para enlazar sus valores.
                                        id="firstName" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar.
                                    **/>
                                    <ErrorMessage name="firstName" />** //Componente de mensaje de error, siendo que agrega la condición cuando el control/campo es usado (touched) y si existe el error para mostrar un mensaje, desde el objeto “errors” el cual es accedido automáticamente mediante la propiedad "validate" del componente “<Formik>”, posee la propiedad de "nombre" con el mismo valor declarado en la propiedad “initialValues” del componente “<Formik>” para ejecutar sus validaciones.
                                </div>

                                <div> //Etiqueta contenedora de bloque.
                                    <label htmlFor="lastName">Last Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto.
                                    **<Field** //Componente de campo/control dentro de formulario, el cual contiene las sisguientes props.
                                        type="text" //Propiedad de "tipo", con valor para ser de "texto".
                                        name="lastName" //Atributo de "nombre", con valor de dicha cadena de texto la cual es la misma declarada en la propiedad "initialValues" del componente <Formik>, para enlazar sus valores.
                                        id="lastName" //Selector identificador, con valor aignado de una cadena de texto, la cual es la misma que su "label" a enlazar.
                                    **/>
                                    <ErrorMessage name="lastName" />** //Componente de mensaje de error, siendo que agrega la condición cuando el control/campo es usado (touched) y si existe el error para mostrar un mensaje, desde el objeto “errors” el cual es accedido automáticamente mediante la propiedad "validate" del componente “<Formik>”, posee la propiedad de "nombre" con el mismo valor declarado en la propiedad “initialValues” del componente “<Formik>” para ejecutar sus validaciones.
                                </div>
                            </>
                        ) : null} //Si no se cumple la condición ternaria, se ejecuta un valor nulo para no mostrar nada, lo que significa que no se han aceptado los terminos y no se ha escrito un correo electrónico.

                        <button //Etiqueta de botón, que se encargará de mandar los datos del formulario, contiene los siguiente atributos y propiedades.
                            type="submit" //Propiedad de tipo, con valor para ser de "entregar/mandar".
                            name="submit" //Atributo de "nombre", con valor de dicha cadena de texto la cual serán mandada con los datos del formulario.
                            disabled={handleDisabled(formData)}> //Propiedad de "desactivado", con valor asignado dentro de llaves por ser código de JS, de llamar a ejecutar dicha función para habilitar el botón dependiendo del buen llenado de los campos del formulario.
                            Subscribe //Contiene texto a ser mostrado.
                        </button>
                    **</Form>**
                )}
            **</Formik>**
        </div>
    );
}

CONSUMIR SERVICIOS WEB

Rodrigo Grau — Tue, 15 Aug 2023 01:07:35 +0000

[¿Cómo funciona la WEB?]
[HTTP: HyperText Transfer Protocol]
[fetch():]
[AXIOS:]

¿Cómo funciona la WEB?

Se entiende que se tiene un cliente web lo cual es todo lo que se ve dentro de un navegador, siendo organizado para poder ser mostrado a ls usuarios, y se tiene un servidor web es donde se almacena toda esa información que se ven en un navegador.

Los usuarios solo tienen interacción con el cliente web, y los desarrolladores tienen más interacción con el servidor web y el control del cliente web mediante el servidor web, para así mostrar dicha información de servidor web a los usuarios de una manea optima.

HTTP: HyperText Transfer Protocol

Para que se puede tener una buena comunicación y que sea segura, se inventaron los protocolos. Los protocolos serán toda la comunicación entre el servidor web y los clientes web.

Se tienen distintos tipos de protocolos y en distintos niveles. Siendo los de aplicaciones web:

FTP:
SMTP:
HTTP: Protocolo de Transferencia de HyperTexto:
- Transferencia / intercambio de datos en la web a través de documentos
- Protocolo de estructura cliente - servidor
- Cliente: Request / Petición
- Servidor: Response / Respuesta

REQUEST / Petición:

Método de la petición/request: ***GET***
La ruta: *******/post*******
Tipo/número de protocolo que se esté utilizando: HTTP/2
Cabeceras/headers: Aportan información adicional a parte de la petición:
- Que host/anfitrión provee los servicios.
- Que User-Agent/Navegador se está utilizando.
- Que tipos de archivos se van aceptar.
- Etc…
Las peticiones también pueden contener un cuerpo/body y mandar información a través de ellos, dependiendo de método que se utilice:
- GET: No se debe manar información a través del body, sino a través del ***************path/ruta***************.
- Cuando se quieren crear nuevos recursos o actualizar algunos ya existentes y se necesita enviar información exactamente a través de los atributos de este nuevo recurso o de la actualización, se debe hacer a través del cuerpo/body.

RESPONSE / Respuesta:

Tipo/número de protocolo que se esté utilizando: HTTP/2
Status Code/Código de estado, cada uno con un significado: ***200***
Status Message/Mensaje de estado: *OK*
Cabeceras/headers: Aportan información adicional a parte de la petición y algunas serán devueltas dependiente del tipo de petición:
- Fecha de la respuesta.
- Tipo de contenido.
- Servidor.
- Etc…
Body/Cuerpo: Contiene toda la información necesaria de la petición web.

fetch():

Método para iniciar el proceso de hacer una búsqueda o petición de un recurso en la Web.
- Cada ves que se está entrando a una página web, se está haciendo una búsqueda de un recurso:
  - Un recurso son las rutas que se pueden tener en una página, los cuales son accedidos mediante dicha ruta.
Retorna una promesa (objeto “response” que produce un valor en el futuro).

SINTAXIS:

Se llama a ejecutar la función fetch(resource), la cual recibe como argumento el nombre del recurso a obtener siendo éste obtenido mediante toda la URL/path.
fetch(resource, options), también se pueden colocar como segundo argumento, *************opciones************* adicionales, ya que por defecto fetch va a ejecutar un método *********GET*********, y para utilizar un método distinto, éste debe ser declarado como segundo argumento y también se pueden recibir las siguientes opciones:

OPTIONS:

Method, headers, body, mode, credentials.

GET: Get all posts / obtiene todos los recursos:

import { useState, useEffect } from "react"; //Se importan las funciones hooks, para manejar los efectos secundarios de un componente, y para manejar el estado de un componente, desde, la biblioteca de react

**const BASE_URL = "https://jsonplaceholder.typicode.com";** //Declaración de constante que será la URL base para hacer peticiones web, con valor asignado de una cadena de texto que es la URL a consultar

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguinte bloque
    const [state, setState] = useState("loading"); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de cadenas de texto "loading", indicando que el componente está en la fase de carga inicial
    const [posts, setPosts] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de un arrego vacío

    useEffect(() => { //Se llama a ejecutar la función hook para manejar efectos secundarios en componentes, la cual recibe como primer argumento, una función flecha callback, la cual ejecuta el siguiente bloque
        async function loadPosts() { //Declaración de función asíncrona, la cual hará la función de obtener los recursos desde una petición web a un servidor, y que ejecuta el siguiente bloque
            try { //Se intenta ejecutar el siguiente bloque
                **const response = await fetch(BASE_URL + "/posts");** //Declaración de constante, con valor asignado de, "esperar" la respuesta, de ejcutar la función asíncrona de "peticiones web", la cual recibe como argumento, el valor de dicha constante que es la URL del sitio web, concateado con la cadena de texto "/posts" para acceder a los recursos desde dicha URL(ruta web)

                if (**response.status === 200**) { //Condicional que valida si, de la respuesta de dicha petición web asíncrona, su propiedad de "estado", es estrictamente igual que el valor numérico 200, para determinar si la petición se realizó correctamente, ejecutando el siguiente bloque si se cumple dicha condición
                    **const postsResponse = await response.json();** //Declaración de constante con valor asignado de, esperar la respuesta de, a la respuesta de la petición web la cual es un objeto, aplicar el método "json()" para acceder a su información
                    setPosts(**postsResponse**); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, la respuesta de la petición web con su contenido accesible el cual es un arreglo que contiene más objetos, siendo este el nuevo valor actual del estado
                    setState("success"); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, dicha cadena de texto, siendo este el nuevo valor actual del estado
                } else { //Si no se cumple la condición anterior, se ejecuta el siguiente bloque
                    console.error("error:", **response.status**); //A la consola del navegador, se le aplica el método de mostrar errores en la misma, el cual recibe como argumento, la cadena de texto "error", y de la respuesta de dicha petición web asíncrona, su propiedad de "estado"
                    setState("error"); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, dicha cadena de texto, siendo este el nuevo valor actual del estado
                }
            } catch(error) { //Si no se pudo ejecutar el el bloque anterior de "try", se captura el error para manejarlo, siendo que se recibe como argumento el error, y ejecutando el siguiente bloque
                console.error(error); //A la consola del navegador, se le aplica el método de mostrar errores en la misma, el cual recibe como argumento, la cadena de texto "error"
                setState("error"); //Se llama a ejecutar la función de actualización de uno de los estados del componente, la cual recibe como argumento, dicha cadena de texto, siendo este el nuevo valor actual del estado
            }
        }

        setTimeout(() => { //Se ejecuta la función que establece un tiempo de espera para ejecutar una funcionalidad, la cual recibe como primer argumento  una función de flecha callback, la cual ejecuta el siguiente bloque
            loadPosts(); //Se llama a ejecutar dicha función asíncrona para obtener los recursos desde una petición web a un servidor, y así cargar los datos de los posts cuando el componente se monta por primera vez
        }, 2000); //Como segundo argumento, se recibe el tiempo en milisegudos para ejecutar dicha función asíncrona
    }, []);  //Como segundo argumento, recibe un arreglo vacío, así ejecutando  el efecto secundario la primera y última vez que se renderice el componente, esto garantiza que el efecto solo se ejecute una vez al inicio

    if (state === "loading") return (<div>Loading...</div>); //Antes de renderizar la sección principal del componente, se verifica el valor actual del estado "state" mediante un condicional que valida si, el valor actual de uno de los estados del componente, es estrictamente igual que, la cadena de texto "loading", retornando una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis, una etiqueta contenedora de bloque, la cual contiene el texto "Loading..."
    if (state === "error") return (<div>Error</div>); //Antes de renderizar la sección principal del componente, se verifica el valor actual del estado "state" mediante un condicional que valida si, el valor actual de uno de los estados del componente, es estrictamente igual que, la cadena de texto "error", retornando una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis, una etiqueta contenedora de bloque, la cual contiene el texto "Error"

    return ( //Se retorna una estructura de JSX, el cual será la sección principal del componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <h1>Posts</h1> //Etiqueta de título principal, la cual contiene texto
            <section> //Etiqueta de sección dentro de la página
                **{posts.map((post) => (** //Dentro de llaves por ser código de JS, al valor actual(**posts, el cual es un arreglo**) de uno de los estados del componente, se le aplica el método de crear un nuevo arreglo iterando cada uno de los obejtos dentro de dicho arrelgo, ejecutando una función de flecha callback por cada uno de los elementos/objetos contenidos dentro del arreglo, la cual recibe como argumento cada uno de los elementos/objetos dentro del arreglo, ejecutando el siguiente bloque
                    **<article key={post.id}>** //Etiqueta de contenido independiente y autocontenido dentro de la página, la cual posee el atributo "key" para dar una identificación única a cada elemento en la lista, con valor asignado dentro de llaves por ser código de JS, del objeto dentro del arreglo "**posts**", acceder a su propiedad "id" siendo asignado su valor 
                        **{post.id} - {post.title}** //Dentro de llaves por ser código de JS, del elemento/objeto dentro del arreglo, se accede a su propiedad "id", se coloca un guión de texto, y dentro de llaves por ser código de JS, del elemento/objeto dentro del arreglo, se accede a su propiedad "title"
                    **</article>
                ))}**
            </section>
        </div>
    );
}

POST: Create a new post / crea una nueva publicación:

import { useState } from "react"; //Se importa la función hook, para manejar el estado de un componente, desde, la biblioteca de react

**const BASE_URL = "https://jsonplaceholder.typicode.com";** //Declaración de constante con valor asignado de, una cadena de texto, la cual es la URL base, a la cual se le harán peticiones web

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
    const [isLoading, setIsLoading] = useState(false); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "false", indicando un estado de "cargando" al hacer la petición web, en false porque no se está cargando nada por defecto
    const [title, setTitle] = useState(""); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de cadenas de texto vacío, indicando que será el título al crear un nuevo post/publicación para ser enviada como petición al servidor web/URL, a través de un formulario
    const [body, setBody] = useState(""); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de cadenas de texto vacío, indicando que será el cuerpo al crear un nuevo post/publicación para ser enviada como petición al servidor web/URL, a través de un formulario
    const [createdPosts, setCreatedPosts] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, un arreglo vacío que contendrá los posts/publicacines creadas y enviadas como petición al servidor web/URL

    **async function createPost(event) {** //Declaración de función asíncrona, la cual hará la funcíon de hacer una petición web para crear un nuevo post/publicación para ser enviada como petición al servidor web/URL que se ejecutará cuando se envíe el formulario del componente, la cual recibe como argumento, el evento ejectado del formulario, y que ejecuta el siguiente bloque
        event.preventDefault(); //A dicho evento ejecutado, se le aplica el método para prevenir su comportamiento por defecto, y controlar su comportamiento
        setIsLoading(true); //Se ejecuta la función de actualización del estado que controla que se está "cargando" la petición web, la cual recibe como argumento, el valor booleano "true", para indicar que se está cargando la petición web

        try { //Se ejecuta el bloque de, intentar, ejeuctar el siguiente bloque
            **const newPost = {** //Declaración de constante con valor asignado de un objeto, el cual será envíado en la petición web con la infomación del formulario, el cual contiene las siguiente propiedades
                **title: title,** //Propiedad del objeto con valor, del valor actual del estado "title" del componente
                **body: body,** //Propiedad del objeto con valor, del valor actual del estado "body" del componente
                **userId: createdPosts.length** //Propiedad del objeto con valor, del valor actual del estado "createdPosts" del componente, obtener su longitud, siendo respectiva la cantidad de elementos al nuevo post creado, así obtendrá un identificador único 
            **};**

            **await fetch(BASE_URL + "/posts", {** //Se "espera" la respuesta de la petición web mediante la función asíncrona de peticiones web(fecth), mediante el uso de "await" permite que el código espere hasta que la promesa se resuelva, lo que significa que la solicitud se ha completado con éxito, la cual recibe como primer argumento, el valor de dicha constante, concatenado con dicha cadena de texto, la cual es la ruta para hacer dicha petición web, y como segundo argumento recibe un objeto de "opciones" de la petición para especificar el tipo de petición web que se hará, y demás información necesaria
                **method: "POST",** //Propiedad del objeto con valor, para inidicar que será una petición "POST", indicando que se está creando un nuevo recurso en el servidor
                **body: JSON.stringify(newPost),** //Propiedad del objeto la cual es la más importante con valor, desde el objeto JSON, ejecutar su método "stringify" para convertir el objeto newPost a una cadena JSON(texto) que puede ser enviada en la solicitud, el cual recibe como argumento el objeto "newPost" que contiene los datos del nuevo post que se enviarán al servidor
                **headers: {** //Propiedad del objeto que especifica el encabezado HTTP, con valor de un objeto con las siguientes propiedades
                    **"Content-type": "application/json; charset=UTF-8"** //Propiedad del objeto que indica que el tipo de contenido del cuerpo de la solicitud es JSON, con valor, de que es un JSON, y que se utiliza el juego de caracteres UTF-8, para así asegurar que el servidor comprenda el formato de los datos enviados y pueda interpretarlos correctamente
                **}
            });**

             setTitle(""); //Se ejecuta la función de actualización del estado que controla el valor del "título" de objeto a ser enviado en la petición web, la cual recibe como argumento, una cadena vacía, para resetear dicho "input" del formulario, siendo dicho valor el nuevo valor por defecto de su estado correspondiente
            setBody(""); //Se ejecuta la función de actualización del estado que controla el valor del "cuerpo" de objeto a ser enviado en la petición web, la cual recibe como argumento, una cadena vacía, para resetear dicho "input" del formulario, siendo dicho valor el nuevo valor por defecto de su estado correspondiente
            setCreatedPosts((prevPosts) => [newPost, ...prevPosts]); //Se ejecuta la función de actualización del estado "createdPosts", la cual recibe como argumento, una función flecha callback, la cual creará un nuevo arreglo que será el nuevo valor actual de dicho estado, siendo que dicha función callback recibe como argumento todos los "posts"/elementos ya contenidos, y ejecuta, un arreglo, que contiene el valor de dicha constante que es el objeto que se envío a la petición web y que contiene los datos del formulario, siendo colocado al inicio el post recién creado para ser el primero en ser mostrado, y como segundo "elemento" se coloca mediante la sintaxis de "propafación" los posts anteriores almacenados en el estado "prevPosts", manteniendo todos los posts creados previamente
        } catch (error) { //Si no se pudo ejecutar el bloque de "try", se captura cualquier error que ocurra durante el proceso de creación del post, recibiendo como argumento, el error detectado, ejecutando el siguiente bloque
            console.error(error); //A la consola del navegador, aplicar el método de errores, el cual recibe como argumento el error detectado para mostrarlo
        } finally { //El boque final, se utiliza para resetear el componente a su estado por defecto, ejecutando el siguiente bloque
            setIsLoading(false); //Se ejecuta la función de actualización del estado que controla que se está "cargando" la petición web, la cual recibe como argumento, el valor booleano "false", para indicar que ya NO se está cargando la petición web, siendo dicho valor el nuevo valor por defecto de su estado correspondiente
        }
    **}**

    function Loading() { //Declaración de función que será un componente, la cual ejecuta el siguiente bloque
        return ( //Se retorna una estructura de JSX, el cual será un mensaje de carga a ser renderizado, siendo colocado entre paréntesis
            <p>Loading...</p> //Etiqueta de párrafo, la cual contiene el texto a ser mostrado
        )
    }

    function ShowPost(post) { //Declaración de función que será un componente, recibe como argumento un "post" creado y enviado a la petición web, la cual ejecuta el siguiente bloque
        return ( //Se retorna una estructura de JSX, el cual serán los datos del post" creado y enviado a la petición web a ser renderizado, siendo colocado entre paréntesis
            <div> //Etiqueta contenedora de bloque
                <h2>{post.title}</h2> //Etiqueta de subtítulo, la cual contiene entre llaves por ser código de JS, del "post" del parámetro, se accede a su propiedad de "titulo" para obtener su valor
                <p>{post.body}</p> //Etiqueta de párrafo, la cual contiene entre llaves por ser código de JS, del "post" del parámetro, se accede a su propiedad de "body" para obtener su valor
                <h4>id:{post.userId}</h4> //Etiqueta de subtítulo, la cual contiene texto, y entre llaves por ser código de JS, del "post" del parámetro, se accede a su propiedad de "userId" para obtener su valor
            </div>
        );
    }

    if (isLoading === true) return <Loading /> //Antes de renderizar el componente principal, se verifica el valor actual del estado "isLoading" mediante un condicional que valida si, el valor actual de uno de los estados del componente, es estrictamente igual que, el valor booleano true, retornando una estructura de JSX, el cual será el componente <Loading /> a ser renderizado

    return ( //Se retorna una estructura de JSX, el cual será un formualrio para obtener los datos que se enviarán mediante la petición web y los mostrarán en un componente debajo del formulario, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            **<form onSubmit={createPost}>** //Etiqueta de formulario, posee el atributo manejador de eventos de "entregar" los datos del formulario con valor de código de JS entre llaves, ejecutar la función asíncrona para hacer una petición web para crear un nuevo post/publicación para ser enviada como petición al servidor web/URL
                <h1>Create a new POST</h1> //Etiqueta de título principal, la cual contiene texto a ser mostrado
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="title">Título</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, posee los siguients atributos
                        onChange={(event) => setTitle(event.target.value)} //Propiedad manejadora del evento de "cambio" en valor de dicho input, con valor dentro de llaves por ser código de JS, de una función flecha, la cual recibe como argumento el evento de "cambio", ejeuctando la función de actualización del estado "title" del componente, la cual recibe como argumento, del evento "cambio" detectado, y acceder al elemento que lo ejecutó, para acceder a su valor, siendo el valor de dicho elemento, el nuevo valor del estado "title" y que será utilizado para colocarlo en dicho elemento 
                        value={title} //"valor" con valor entre llaves por ser código de JS, de el valor actual del estado "title" como el valor del campo de entrada, esto asegura que el valor del campo se actualice automáticamente cuando cambie el estado "title"
                        id="title" //Selector "identificador" el cual lo enlazará con el label correspondiente
                        type="text" //"tipo" con valor para ser entrada de texo
                        name="title" //"nombre" que es el nombre del control, el cual es enviado con los datos del formulario
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                        />         
                </div>
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="body">Contenido</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <textarea //Etiqueta de área de texto, posee los siguients atributos
                        onChange={(event) => setBody(event.target.value)} //Propiedad manejadora del evento de "cambio" en valor de dicha área de texto, con valor dentro de llaves por ser código de JS, de una función flecha, la cual recibe como argumento el evento de "cambio", ejeuctando la función de actualización del estado "body" del componente, la cual recibe como argumento, del evento "cambio" detectado, y acceder al elemento que lo ejecutó, para acceder a su valor, siendo el valor de dicho elemento, el nuevo valor del estado "title" y que será utilizado para colocarlo en dicho elemento
                        value={body} //"valor" con valor entre llaves por ser código de JS, de el valor actual del estado "body" como el valor del área de texto, esto asegura que el valor del área de texto se actualice automáticamente cuando cambie el estado "body"
                        id="body" //Selector "identificador" el cual lo enlazará con el label correspondiente
                        name="body" //"nombre" que es el nombre del control, el cual es enviado con los datos del formulario
                        required //"requerido" para ser un campo obligatorio y no puede enviarse vacío
                        />           
                </div>
                <button disabled={isLoading}>Crear</button> //Etiqueta de botón, posee la propiedad de "desactivado", con valor entre llaves por ser código de JS, de el valor actual del estado "isLoading" del componente, y contiene texto, así dicha propiedad será controlada respecto del valor del dicho estado
            </form>

            {createdPosts.map((post, index) => ( //Dentro de llaves por ser código de JS, del estado "createdPosts" del componente el cual es un arreglo que contiente todo los "posts" creados meidante la petición web "POST", al cual se le aplica el método de crear un nuevo arreglo aplicando una función por cada objetos/post dentro de dicho arreglo, la cual recibe como argumento una función flecha, la cual recibe como primer argumento, cada uno de los objetos/post dentro del arreglo, y como segundo argumento el índice de dicho objetos/post dentro del arreglo, ejecutando el siguiente bloque por cada objetos/post
                <ShowPost key={index} {...post} /> //Se renderiza como elemento HTML, el componente "ShowPost" el cual posee el atribut de "llave" la cual será una clave única para cada elemento, con valor dentro de llaves por ser código de JS, de el valor de "índice" del objeto/post que se está iterando, y también recibe dentro de llaves por ser código de JS, mediante la sintaxis de "propafación" los posts anteriores almacenados en el estado "createdPosts", manteniendo todos los posts creados previamente 
            ))}
        </div>
    );
}

AXIOS:

Es una librería que ayuda con el fetching, lo cual son peticiones web, siendo que obligadamente se tiene que hacer la petición web con fetch() y a la respuesta aplicar el método *********json()*********.

Cuando se tienen métodos de autenticación se debe mandar una API_TOKEN, lo cual es que por cada ruta se deberán colocar “headers: {}”, ”{api-key: }” en los cuales se deben mandar los API_TOKEN.
En react, en la mayoría de los componentes se tendrán que utilizar los mismos métodos de configuración.

Axios proporciona una forma más práctica de interactuar con las peticiones web:

Cliente HTTP basado en promesas para el navegador y node.js.
Transformaciones automáticas para datos JSON.

Para implementarlo:

Se debe instalar la librería axios en la ruta del proyecto, mediante ***npm***:
- npm install axios

Se importa axios desde la librería “axios”:

**import axios from "axios";** //Se importa **axios** desde la librería “**axios”**

SINTAXIS:

axios.get(URL):
- Para el método de obtener recursos web, se debe usar desde la librería de axios el método ***get*** y enviar como argumento la URL a la cual se le hará la petición.
axios.post(URL, object):
- Para el método de crear un nuevo recurso en el servidor web, se debe usar desde la librería de axios el método post y enviar como primer argumento la URL a la cual se le hará la petición, y como segundo argumento, el objeto que contiene los datos del nuevo recurso a crear.

Global Configuration:

Axios también proporciona opciones de configuración global que afectan a todas las solicitudes realizadas en la aplicación. Esto permite establecer valores predeterminados para la URL base, encabezados comunes y otras opciones. Al configurar estas opciones a nivel global, se evita tener que repetir estas configuraciones en cada solicitud individual.

axios.defaults.baseURL = 'https://api.example.com';
- Configura la URL base que se utilizará para todas las solicitudes. De esta manera, no es necesario escribir la URL completa en cada solicitud, sino que se puede utilizar una ruta relativa
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
- Establece un encabezado común de autorización para todas las solicitudes. AUTH_TOKEN debe ser reemplazado por el token de autorización válido para la API, como una cadena de texto o un token de autenticación válido.
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
- Establece el encabezado 'Content-Type' para todas las solicitudes POST realizadas con Axios. Dependiendo de los requisitos de la API, es posible que sea necesario cambiar este valor a 'application/json' u otro tipo de contenido adecuado para la solicitud POST

EJEMPLO GET AXIOS:

import { useEffect, useState } from "react"; //Se importan la funciones hooks, para controlar los efectos secundarios, y los estados de un componente, desde, la librería de React
**import axios from "axios";** //Se importa axios, desde, la librería axios, para realizar solicitudes web HTTP

**axios.defaults.baseURL = "https://api.thecatapi.com/v1";** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo la URL base para todas las solicitudes Axios, con valor asignado de, una cadena de texto que será la URL API a la cual se le harán las peticiones
**axios.defaults.headers.common["X-Api-Key"] =** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo una "cabecera común" "X-Api-Key" para todas las solicitudes Axios, con valor asiginado de
    **"27a5c999-8a4d-4085-951a-bbdc0c23fb6e";** //Una cadena de texto, la cual es una clave de API válida proporcionada por la API "The Cat API"

export default function App() { //Se exporta como valor por defecto, la declaración de función, que será un componente, la cual ejecuta el siguiente bloque
    const [**cats**, setCats] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, un arreglo vacío, que contendrá los recursos obtenidos de la petición
    const [status, setStatus] = useState("loading"); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "false", indicando un estado de "cargando" al hacer la petición web, en false porque no se está cargando nada por defecto

    useEffect(() => { //Se llama a ejecutar la función hook para manejar efectos secundarios en componentes, la cual recibe como primer argumento, una función flecha callback, la cual ejecuta el siguiente bloque
        async function loadcats() { //Declaración de función asíncrona, la cual hará la función de obtener los recursos desde una petición web a un servidor, y que ejecuta el siguiente bloque
            try { //Se intenta ejecutar el siguiente bloque
                **const response = await axios.get("/categories");** //Declaración de constante, con valor asignado de, "esperar" la respuesta, de ejecutar, desde la librería de "axios", el método de petición web para obtener rescursos, el cual recibe como argumento, una ruta relativa("/categories") la cual es concatenada en automático con la URL base configurada para uso global
                **const newCats = response.data;** //Declaración de constante con valor asignado de, de la respuesta obtenida, obtener los datos, los cuales ya fueron convertidos a formato json para acceder a ellos
                **setCats(newCats);** //Se ejecuta la función de actualización del estado "cats", el cual recibe como argumento, el valor de los datos de la respuesta a la petición web, siendo dicho valor, el nuevo valor actual del estado
                setStatus("success"); //Se ejecuta la función de actualización del estado "status", el cual recibe como argumento, la cadena de texto "success", siendo dicho valor, el nuevo valor actual del estado
            } catch(error) { //Si no se pudo ejecutar el bloque de "try", se captura cualquier error que ocurra durante el proceso de creación del post, recibiendo como argumento, el error detectado, ejecutando el siguiente bloque
                console.error(error); //A la consola del navegador, aplicar el método de errores, el cual recibe como argumento el error detectado para mostrarlo
                setStatus("error"); //Se ejecuta la función de actualización del estado "status", el cual recibe como argumento, la cadena de texto "error", siendo dicho valor, el nuevo valor actual del estado
            }
        }

        setTimeout(() => { //Se establece un tiempo de espera, la cual recibe como primer argumento una función flecha callback, la cual ejecuta el siguiente bloque
            loadcats(); //Se llama a ejcutar la función asíncrona para obtener los recursos desde una petición web con axios
        }, 1000); //Como segundo argumento, se coloca el tiempo en milisegundos en que será ejecutada dicha función anterior, siendo en un segundo

    }, []); //Como segundo argumento, recibe un arreglo vacío, así ejecutando  el efecto secundario la primera y última vez que se renderice el componente, esto garantiza que el efecto solo se ejecute una vez al inicio

    if (status === "loading") return <div>Loading...</div>; //Antes de renderizar el componente principal, se verifica el valor actual del estado "status" mediante un condicional que valida si, el valor actual de dicho estado del componente, es estrictamente igual que, la cadena de texto "loading", retornando una estructura de JSX, el cual será un componene, siendo un contendor de bloque, el cual contiene texto a ser mostrado
    if (status === "error") return <div>Error</div>; //Antes de renderizar el componente principal, se verifica el valor actual del estado "status" mediante un condicional que valida si, el valor actual de dicho estado del componente, es estrictamente igual que, la cadena de texto "error", retornando una estructura de JSX, el cual será un componene, siendo un contendor de bloque, el cual contiene texto a ser mostrado

    return ( //Se retorna una estructura de JSX, el cual será un formualrio para obtener los datos que se enviarán mediante la petición web y los mostrarán en un componente debajo del formulario, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <h1>Cats</h1> //Etiqueta de título principal, contiene texto
            <section> //Etiqueta de sección dentro de la página
                {**cats**.map((cat) => ( //Dentro de llaves por ser código de JS, al estado actual del estado "cats" el cual es un arreglo que contiene los objetos de la respuesta a la petición web mediante "axios", se le aplica el método de crear un nuevo arreglo aplicando una función por cada elemento dentro del arreglo iterado, el cual recibe como argumento una función de flecha callback, la cual por cada objeto(cat) dentro de dicho arreglo, se ejecuta el siguiente bloque
                    <article key={cat.id}> //Etiqueta de contenido independiente dentro de la página, la cual posee el atributo "key" con el valor de la propiedad "id" de cada obejto(cat), ésto para ayudar a React a identificar de manera única cada elemento y mejorar el rendimiento en operaciones de actualización
                        {cat.id} - {cat.name} //Dentro de llaves por ser código de JS, del objeto(cat) acceder al valor de su propiedad "id" para mostrarla, un guión, y entro de llaves por ser código de JS, del objeto(cat) acceder al valor de su propiedad "name" para mostrarla
                    </article>
                ))}
            </section>
        </div>
    );
}

EJEMPLO GET AXIOS:

import { useState } from "react"; //Se importa la función hook para controlar el estado de un componente, desde, la librería de react
**import axios from "axios";** //Se importa axios, desde, la librería axios, para realizar solicitudes web HTTP

**axios.defaults.baseURL = "https://jsonplaceholder.typicode.com";** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo la URL base para todas las solicitudes Axios, con valor asignado de, una cadena de texto que será la URL API a la cual se le harán las peticiones
**axios.defaults.headers.post["Content-Type"] =** //Desde la librería axios, se establecen las configuraciones globales por defecto, estableciendo una "cabecera común" "Content-Type" para todas las solicitudes Axios, con valor asiginado de
    **"application/json; charset=UTF-8";** //Una cadena de texto, la cual es el tipo de archivo el cual es un json, y que se utiliza el juego de caracteres UTF-8, para así asegurar que el servidor comprenda el formato de los datos enviados y pueda interpretarlos correctamente

export default function App() { //Se esporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
    const [isLoading, setIsLoading] = useState(false); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "false", para indicar un estado de carga, empezando siendo falso

    **async function createPost(event) {** //Declaración de función asíncrona para crear un nuevo recurso en un servido web mediante una petición, la cual recibe como argumento un evento ejecutado, y que ejecuta el siguiente bloque
        event.preventDefault(); //A dicho evento ejecutado, se le aplica el método para prevenir su comportamiento por defecto, para controlarlos
        setIsLoading(true); //Se llama a ejecutar la función de actualización del estado "isLoading", la cual recibe como argumento el valor booleano "true", siendo dicho valor el nuevo valor actual de dicho estado, para indicar que el estado de carga está activo

        try { //Se intenta ejecutar el siguiente bloque
            const form = event.currentTarget; //Declaración de constante con valor asignado de, del evento ejecutado en la función componente, acceder a elemento que lo ejecutó, el cual es un formulario
            const newPost = { //Declaración de constante con valor asignado de, un obejto que será el nuevo recurso a  ser creado en el servidor web, el cual contiene las siguientes propiedades
                title: form.title.value, //Propiedad de objeto que será el título del recurso, con valor asignado de, del formulario, acceder al elemento que posee el identificador "title", y obtener su valor
                body: form.body.value, //Propiedad de objeto que será el cuerpo del recurso, con valor asignado de, del formulario, acceder al elemento que posee el identificador "body", y obtener su valor
                userId: 1 //Propiedad de objeto que será el identificador del recurso, con valor asignado de, el valor numérico 1
            };

            **const response = await axios.post("/posts", newPost);** //Declaración de constante, con valor asignado de, "esperar" la respuesta, de ejecutar, desde la librería de "axios", el método de petición web para crear rescursos, el cual recibe como primer argumento, una ruta relativa("/posts") la cual es concatenada en automático con la URL base configurada para uso global, y como segundo argumento recibe el objeto "newPost" que será el nuevo recurso a crear
            console.log(**response**); //A la consola del navegdor, se le aplica el método de imprimir sobre la misma, la respuesta a la petición web

            form.reset(); //Al formulario, se le aplica el método para reseterarlo, para resetear los campos del mismo
        } catch (error) { //Si no se pudo ejecutar el bloque de "try", se captura cualquier error que ocurra durante el proceso de creación del post, recibiendo como argumento, el error detectado, ejecutando el siguiente bloque
            console.error(error); //A la consola del navegador, aplicar el método de errores, el cual recibe como argumento el error detectado para mostrarlo
        } finally { //Se ejecuta el bloque final, el cual ejecuta el siguiente bloque
            setIsLoading(false); //Se llama a ejecutar la función de actualización del estado "isLoading", la cual recibe como argumento el valor booleano "false", siendo dicho valor el nuevo valor actual de dicho estado, para indicar que el estado de carga ya no está activo

        }
    **}**

    if (isLoading === true) return (<div>Loading...</div>); //Antes de renderizar el componente principal, se verifica el valor actual del estado "isLoading" mediante un condicional que valida si, el valor actual de dicho estado del componente, es estrictamente igual que, el valor booleano "true", retornando una estructura de JSX, el cual será un componene, siendo un contendor de bloque, el cual contiene texto a ser mostrado

    return ( //Se retorna una estructura de JSX, el cual será un formualrio para obtener los datos que se enviarán mediante la petición web y los mostrarán en un componente debajo del formulario, siendo colocado entre paréntesis
        **<form onSubmit={createPost}>** //Etiqueta de formulario, posee el atributo manejador de eventos de "entregar" los datos del formulario con valor de código de JS entre llaves, ejecutar la función asíncrona para hacer una petición web para crear un nuevo post/publicación para ser enviada como petición al servidor web/URL
            <div> //Eiqueta contenedora de bloque
                <label htmlFor="title">Título</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                <input id="title" type="text" name="title" /> //Etiqueta de ingreso de datos, posee un selector identificador, y los atributos de "tipo" con valor para se de entrada de texto, y el de "nombre" que es el nombre del control, el cual es enviado con los datos del formulario
            </div>
            <div> //Eiqueta contenedora de bloque
                <label htmlFor="body">Contenido</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                <textarea id="body" name="body" /> //Etiqueta de área de texto, posee un selector identificador y el atributo de "nombre" que es el nombre del control, el cual es enviado con los datos del formulario
            </div>
                <button disabled={isLoading}>Crear</button> //Etiqueta de botón, posee la propiedad de "desactivado", con valor entre llaves por ser código de JS, de el valor actual del estado "isLoading" del componente, y contiene texto, así dicha propiedad será controlada respecto del valor del dicho estado
        </form>
    );
}

CSS EN REACT

Rodrigo Grau — Tue, 15 Aug 2023 01:06:35 +0000

[ESTILIZANDO CON CSS:]
[Plain CSS:]
[MÓDULOS DE CSS:]
[CSS IN JS:]
[Styled Components:]
[Emotion:]
[Stitches:]
[TailwindCSS:]

ESTILIZANDO CON CSS:

Dentro de React, cuando nosotros utilizamos alguna herramienta para estilizar, se tienen ciertas condiciones las cuales limitan en utilizar alguna u otra herramienta, ca la finalidad de que la experiencia de desarrollo sea más agradable.

Algunas de éstas herramientas son:

Plain CSS: Estilos dentro en un archivo directo “.css”.
CSS Modules: Permite aislar los estilos para no tenerlos todos juntos en un solo archivo css, así evitando hacer más compleja la cantidad de estilos para cada uno de los componentes o elementos que se están colocando dentro de la aplicación.
Prepocessors:
- SASS
- PostCSS
- LESS
- Stylus
CSS in JS: Es lo mas utilizado dentro de React, es el CSS escrito dentro de un componente o elementos de JSX, y a partir de eso se generan las clases y estilos asignados a dicho elemento.

Las maneras más sencillas de aplicar estilos de css en React son las siguientes:

<button **className='btn btn__primary'** /> //Etiqueta de botón, la cual posee un selector de clase, con valor asignado de, una clase "btn" y será un variación con la clase "btn__primary"

<button **style="background-color: red"** /> //Etiqueta de botón, la cual posee el atributo de "estilo" para colocar estilos en línea, con valor asignado de, las propiedades de estilos con sus valores correspondientes, dichos estilos serán colocados dentro del mismo atributo separados por punto y coma(;)

<button **style={{ backgroundColor: 'red' }}** /> //Etiqueta de botón, la cual posee el atributo de "estilo" para colocar estilos, con valor asignado de, dentro de llaves por ser código de JS, un objeto dentro de un elemento JSX utilizando la sintaxis de camelCase para las propiedades de estilos y su valor

Plain CSS:

Para implementarlo:

Se debe importar el archivo CSS desde su ruta, al archivo JSX donde se aplicarán los estilos. Así todas las clases que estén dentro de éste archivo se van a extender a toda la aplicación.
Mediante los selectores, ya sean de clase o identificadores, se pueden aplicar los estilos, agregado dichos selectores a los elementos dentro del componente JSX, siendo aplicados dichos estilos al importar el archivo CSS.
Entre más aisladas se tengan las funcionalidades de los componentes será mejor su uso e implementación.

En caso de que el componente esté aislado en una carpeta, dicha carpeta será nombrada con el nombre del componente y el archivo JSX será llamado “index.jsx”, así al importar dicho componente mediante su ruta, solo se necesitará colocar la ruta hasta la carpeta nombrada con el nombre del componente.

/* style.css */

**.card {** /*Selector de clase para el elemento que lo posea*/
    background-color: blue; /*Propiedad de color de fondo, con valor "azul"*/
    padding: 20px; /*Propiedad de margen interno, con valor de 20 pixeles a todos los lados*/
    border-radius: 12px; /*Propiedad de redondeo de esquinas, con valor de 12 pixeles a todas las esquinas*/
**}**

```jsx
// index.jsx

**import './style.css'**; //Se importa el archivo CSS desde su ruta, el cual está ubicado en la misma carpeta de éste componente

export default function **Card()** { //Se exporta como valor por defecto, la decalración de función que será un componente, el cual ejecuta el siguiente bloque
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div **className="card"** /> //Etiqueta contenedora de bloque, la cual posee un selector de clase, con valor asignado de, la clase dentro del archivo CSS importado, así aplicando los estilos al importar dicho archivo CSS
    );
}
```

```jsx
// App.jsx

**import Card from './components/Card'**; //Se importa como valor por defecto, dicho componente, desde, su ruta la cual es colocada hasta el nombre de la carpeta nombrada con el nombre del componente("Card") y que contiene el archivo "index.jsx" el cual es importado en automático sin la necesidad de declararlo, y que también contiene el archivo "style.css" el cual aplica los estilos al componente "index.jsx"

export default function App() { //Se exporta como valor por defecto, la decalración de función que será un componente, el cual ejecuta el siguiente bloque
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            **<Card />** //Se llama a ejecutar dicho componente importado, como etiqueta HTML para poder ser renderizado
        </> 
    );
}
```

MÓDULOS DE CSS:

Se incorporó esta funcionalidad dentro del manejo de estilos en React, lo cual permite cargar los estilos desde un archivo aislado y único para cada componente que se puede importar, al cual para acceder a los estilos se hace igual que un objeto.

Se pueden tener tantas variaciones como se necesiten.
Se pueden tener distintos tipos de implementación para que se puedan aplicar de acuerdo a la funcionalidad que se espera.
A pesar de escribir estilo de CSS dentro del archivo, la forma en la que se utilizan dentro de un componente es:
- Debe ser nombrado, antes de la extensión “*****.css**” con la palabra “******module*********”.
- Importar el archivo de “módulo de CSS”(Name.module.css) para poder implementarlo, esto retorna los estilos asociados en una especie de “objeto”, todas las clases, todos los ID, y todo lo que esté referente en el elemento “root”.
- Para pasar esa configuración de los estilos a un elemento dentro de un componente JSX es vía el ***************className*************** o el *id*, indicándole cual va ser la clase o id que se le va a pasar al elemento.
- Para acceder a los estilos y aplicarlos, mediante el selector de clase o identificador en el elemento, dentro de llaves por ser código de JS, se hace al igual que un objeto, mediante el módulo de CSS importado, se accede a la clase o id correspondiente.
- Al importar el módulo de CSS, se cargar todas las clases sin importar que no se utilicen, para evitarlo, se puede hacer destructuración:
  - import { className } from './Component.module.css';
```
/* Button.module.css */

**.btn {** /* Selector de clase para el elemento que lo posea */
    **background-color: 'red';** /* Propiedad de color de fondo, con valor "rojo" */
**}**
```

    ```jsx
    // Button.jsx

    **import styles from './Button.module.css';** //Se exporta el módulo de estilos de css, desde, su ruta
    export default function Button() { //Se exporta como valor por defecto, la declaración de función que será un componente, el cual ejecuta el siguiente bloque
        return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
            <button **className={styles.btn}** /> //Etiqueta de botón, la cual posee un selector de clase, con valor asignado de, dentro de llaves por ser código de JS, desde el módulo de estilos de css, acceder al selector de clase "btn" para aplicar sus estilos correspondientes
        );
    }
    ```

CSS IN JS:

Al utilizar el CSS dentro de JS, éste está implícitamente dentro del archivo del mismo componente, y a partir de ahí es como se va atribuyendo la funcionalidad, con la finalidad de tener los estilos y el JS dentro del mismo archivo, teniendo todos los estilos correspondientes solamente a un componente, así aislando la funcionalidad correspondiente a cada una de los componentes y elementos.

Para el manejo de CSS en JS se tienen muchas herramientas:

Styled Components:
Emotion:
JSS:
Stitches:

Styled Components:

Éstos son componentes estilizados.

Estilos condicionados a través de props.
CSS-in-JS.
Puedes extender estilos y reutilizarlos.
Puedes definir tus estilos con Template Literals o con objetos.

Para implementarlo:

Se debe instalar la dependencia *******************************styled-components****************************, mediante *npm****:
- npm install --save styled-components
Se importa el objeto/función *********styled********* desde la librería *******************************styled-components*******************************:
```
**import styled from 'styled-components';** //Se importa el objeto/función "styled", desde la librería 'styled-components'
```
Al importar dicha librería se puede acceder al objeto *********styled******, el cual contiene todos los elementos de HTML para poderlos definir como un componente de tipo **************************styled Component*****************************.
Se debe declarar una variable o constante la cual será el elemento HTML a ser renderizado dentro de un componente, la cual debe tener asignado como valor, desde el objeto ******styled****** importado, obtener el elemento HTML requerido, siendo que dicho elemento posee todos sus atributos, siendo controlado igual que un elemento HTML, ya que es lo mismo.

Para aplicar los estilos, hay dos maneras de hacerlo:

Seguido de obtener el elemento HTML requerido se utiliza *************************interpolación************************* utilizando comillas invertidas , donde dentro de ellas se colocan los estilos(atributos) de CSS:

**const StyledCard = styled.div`** //Declaración de constante con valor asignado de, del obejto "styled" importado, se obtiene el elemento "contenedor de bloque", y dentro de comillas invertidas se hacer **interpolación** para colocar las siguientes propiedades CSS
    **background-color: blue;** //Propiedad de color de fondo, con valor "azul"
    **padding: 20px;** //Propiedad de margen interno, con valor de 20 pixeles a todos lados
    **border-radius: 15px;** //Propiedad de redondeo de las esquinas, con valor de 15 pixeles a todas las esquinas
**`;**

Éste elemento es un componente, es un *****componente estilizado*****, al cual ya se le asignaron su estilos.

Para renderizarlo:

- Si solo se necesitan dicho ********componente estilizado********, no hay necesidad de renderizarlo dentro de otro componente que esté dentro del mismo archivo, ya que cada componente debe de estar lo más aislado posible, entonces solo se exporta para ser renderizado en el archivo correspondiente:

    ```jsx
    import **styled** from 'styled-components'; //Se importa el objeto/función "styled", desde la librería 'styled-components'

    const **StyledCard** = **styled.div**` //Declaración de constante con valor asignado de, del obejto "styled" importado, se obtiene el elemento "contenedor de bloque", y dentro de comillas invertidas se hacer interpolación para colocar las siguientes propiedades CSS
        background-color: blue; //Propiedad de color de fondo, con valor "azul"
        padding: 20px; //Propiedad de margen interno, con valor de 20 pixeles a todos lados
        border-radius: 15px; //Propiedad de redondeo de las esquinas, con valor de 15 pixeles a todas las esquinas
    `;

    **export default StyledCard;** //Se exporta como valo por defecto, dicho componente estilizado, para ser renderizado en su lugar correspondiente
    ```

- **Si se necesitan variaciones del mismo componente**, se debe de tener un componente base, del cual se van a crear sus variaciones, las cuales, al igual que el componente base, deben ser declarados como variables/constantes, a las que se les asigna como valor, acceder al objeto/función **styled**, el cual dentro de paréntesis recibe como argumento el componente base, y se utiliza ****************************interpolación**************************** utilizando comillas invertidas **` `**, donde dentro de ellas se colocan los estilos(atributos) de CSS que harán las variaciones:

    ```jsx
    // index.jsx

    import **styled** from 'styled-components'; //Se importa el objeto/función "styled", desde la librería 'styled-components'

    const **Default** = **styled**.div` //Declaración de constante con valor asignado de, del objeto/función "styled" importado, se obtiene el elemento "contenedor de bloque", y dentro de comillas invertidas se hacer interpolación para colocar las siguientes propiedades CSS
        background-color: gray; //Propiedad de color de fondo, con valor "gris"
        border-radius: 15px; //Propiedad de redondeo de las esquinas, con valor de 15 pixeles a todas las esquinas
        padding: 20px; //Propiedad de margen interno, con valor de 20 pixeles a todos lados
    `;

    const **Primary** = styled(**Default**)` //Declaración de constante con valor asignado de, al objeto/función "styled" importado, se le envía como argumento, el componente "**Default**", adquiriendo sus propiedades CSS y con la posibilidad de modificarlas y agregar nuevas, y dentro de comillas invertidas se hacer interpolación para colocar las siguientes propiedades CSS
        background-color: red; //Propiedad de color de fondo, con valor "rojo"
        border-radius: 15px; //Propiedad de redondeo de las esquinas, con valor de 15 pixeles a todas las esquinas
        padding: 20px; //Propiedad de margen interno, con valor de 20 pixeles a todos lados

    `;

    const **Secondary** = styled(**Default**)` //Declaración de constante con valor asignado de, al objeto/función "styled" importado, se le envía como argumento, el componente "**Default**", adquiriendo sus propiedades CSS y con la posibilidad de modificarlas y agregar nuevas, y dentro de comillas invertidas se hacer interpolación para colocar las siguientes propiedades CSS
        background-color: white; //Propiedad de color de fondo, con valor "blanco"
        border-radius: 15px; //Propiedad de redondeo de las esquinas, con valor de 15 pixeles a todas las esquinas
        border: 2px solid black; //Propiedad de borde, con valor para ser de 2 pixeles de grosor, solido y de color ngro
        padding: 20px; //Propiedad de margen interno, con valor de 20 pixeles a todos lados

    `;

    export { //Se exportan
        **Default**, //Dicho componente estilizado
        **Primary**, //Dicho componente estilizado
        **Secondary**, //Dicho componente estilizado
    }
    ```

    ```jsx
    //App.jsx

    import { **Default**, **Primary**, **Secondary**,} from './components/Card'; //Se importan, los tres componentes estilizados, para poder acceder a ellos individualmente, desde, su ruta la cual es colocada hasta el nombre de la carpeta nombrada con el nombre del componente("Card") y que contiene el archivo "index.jsx" el cual es importado en automático sin la necesidad de declararlo

    export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente y que ejecuta el sigueinte bloque
        return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
            <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
                **<Default />** //Se llama a ejecutar dicho componente estilizado importado, como etiqueta HTML para poder ser renderizado
                **<Primary />** //Se llama a ejecutar dicho componente estilizado importado, como etiqueta HTML para poder ser renderizado
                **<Secondary />** //Se llama a ejecutar dicho componente estilizado importado, como etiqueta HTML para poder ser renderizado
            </> 
        );
    }
    ```

Seguido de obtener el elemento HTML requerido, al mismo dentro de paréntesis se le envía como argumento un objeto, donde dentro de ellas se colocan los estilos(atributos) de CSS utilizando la sintaxis de camelCase y el valor dentro de comillas ‘ ’:

**const DefaultButton = styled.button({** //Declaración de constante con valo asignado de, del objeto/función "styled" importado, se obtiene el elemento "botón" el cual recibe como argumento un objeto con las siguientes propiedades CSS
    **backgroundColor: 'gray',** //Propiedad de color de fondo, con valor "gris"
    **color: 'white'** //Propiedad de color del texto, con valor "blanco"
**});**

Para renderizarlo:

- Si dicho componente estilizado necesita contener algo, se hace uso de la propiedad “**{children}**”, a demás de tener que ser renderizado dentro de otro componente para enviarle dicha propiedad:

    ```jsx
    // index.jsx

    import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes
    import styled from 'styled-components'; //Se importa el objeto/función "styled", desde la librería 'styled-components'

    const **DefaultButton** = styled.button({ //Declaración de constante con valo asignado de, del objeto/función "styled" importado, se obtiene el elemento "botón" el cual recibe como argumento un objeto con las siguientes propiedades CSS
        backgroundColor: 'gray', //Propiedad de color de fondo, con valor "gris"
        color: 'white' //Propiedad de color del texto, con valor "blanco"
        border: '1px solid black', //Propiedad de borde, con valores para ser de 1 pixel de grosor, solido, y de color "negro"
        borderRadius: '3px' //Propiedad de redondeo de las esquinas, con vlaor de 3 pixeles a todas las esquinas
    });

    const PrimarytButton = styled(DefaultButton)` //Declaración de constante con valor asignado de, al objeto/función "styled" importado, se le envía como argumento, el componente "**DefaultButton**", adquiriendo sus propiedades CSS y con la posibilidad de modificarlas y agregar nuevas, y dentro de comillas invertidas se hacer interpolación para colocar las siguientes propiedades CSS
        background-color: white; //Propiedad de color de fondo, con valor "blanco"
        color: black; //Propiedad de color del texto, con valor "negro"
        border: 1px solid gray; //Propiedad de borde, con valores para ser de 1 pixel de grosor, solido, y de color "gris"
        border-radius: 3px; //Propiedad de redondeo de las esquinas, con vlaor de 3 pixeles a todas las esquinas
    `;

    export default function **Button**(**{children, ...props}**) { //Se exporta como valor por defecto, la declaración de función que será un componente, el cual posee un parámetro para recibir la prop children, mediante la sintaxis de destructuración para obtener la prop children la cual representa un elemento hijo que se contendrá dentro de un componente, y que recibe todas las propiedades que se le envíen, la cual ejecuta el siguiente bloque
        return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
            **<DefaultButton {...props}>{children}</DefaultButton>** //Llamar a renderizar dicho componente estilizado, el cual recibe todas las propiedades que se le manden, y la propiedad children
            **<PrimaryButton {...props}>{children}</PrimaryButton>** //Llamar a renderizar dicho componente estilizado, el cual recibe todas las propiedades que se le manden, y la propiedad children
        );
    }

    **Button**.propTypes = { //A dicho componente, se accede a su propiedad "propTypes" para especificar los tipos de datos esperados para las props, a la cual se le asigna como valor, un objeto con las siguientes propiedades
        **children**: PropTypes.string //Se establece que, la propiedad "children" debe, desde la librería "PropTypes", ser un valor de cadena de texto
    }
    ```

    ```jsx
    // App.jsx

    import **Button** from './components/Button'; //Se importa como valor por defecto, dicho componente, desde, su ruta la cual es colocada hasta el nombre de la carpeta nombrada con el nombre del componente("Button") y que contiene el archivo "index.jsx" el cual es importado en automático sin la necesidad de declararlo

    export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
        return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
            <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
                **<Button onClick={() => alert("button")}>Click me</Button>** //Se llama a renderizar como etiqueta HTML, dicho componente importado, recibe la prop manejadora de eventos del evento de click sobre éste elemento con valor asignado dentro de llaves por ser código de JS, una función de flecha callback la cual ejecuta la función de ventana emergente la cual cual muestra dicha cadena de texo enviada como argumento, y contiene texto el cual es la propiedad children que necesita el componente estilizado que retorna éste componente
            </> 
        );
    }
    ```

Para que un elemento/componente tenga un estilo CONDICIONADO dependiendo de una propiedad:

En la forma de objeto se tiene la forma de poder pasar los “***props***” y a partir de ellos, desde afuera se puede dar algún tipo de funcionalidad o comportamiento para como ser verá dicho elemento:

Se declara una constante/variable a la que se le asigna como valor, del objeto/función *********styled*********, obtener el elemento HTML que se requiera.
A dicho elemento obtenido, dentro de paréntesis, se le envía como argumento una función de flecha, que mediante dichas *******props*******, se ejecutará un bloque de código dentro de paréntesis para estilizar el componente/elemento.

El bloque de código que ejecuta la función que recibe el elemento obtenido, son las propiedades de CSS, las cuales al asignar su valor, se utiliza el operador ternario para condicionar mediante las *******props*******, el valor de dicha propiedad CSS.

// index.jsx

import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes
import styled from 'styled-components'; //Se importa el objeto/función "styled", desde la librería 'styled-components'

const DefaultButton = styled.**button(props => ({** //Declaración de constante con valor asignado de, del objeto/función "styled", obtener el elemento "botón", el cual recibe como argumento una función flecha con el objeto "props", la cual ejecuta dentro de paréntesis, las siguientes propiedades de CSS dentro de llaves
    **backgroundColor: props.disabled ? "red" : "gray",** //Propiedad de color de fondo, con valor del operador ternario, el cual valida, del objeto de propiedades, si su propiedad "disabled" está activa(true), el valor será "rojo", de lo contrario será "gris"
    **color: props.disabled ? "black" : "white"** //Propiedad de color del texto, con valor del operador ternario, el cual valida, del objeto de propiedades, si su propiedad "disabled" está activa(true), el valor será "negro", de lo contrario será "blanco"
**}))**;

export default function Button({children, **...props}**) { //Se exporta como valor por defecto, la declaración de función que será un componente, el cual posee los parámetros para recibir como argumentos, la prop children, mediante la sintaxis de destructuración para obtener la prop children la cual representa un elemento hijo que se contendrá dentro de un componente, y que recibe todas las propiedades que se le envíen, la cual ejecuta el siguiente bloque
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            <DefaultButton **{...props}**>{children}</DefaultButton> //Se llama a renderizar como etiqueta HTML, dicho componente "DefaultButton", recibe todas las props que se le envíen al componene "Button", y recibe la prop "children" que se le envía al componene "Button"
        </>
    );
}

Button.propTypes = { //A dicho componente, se accede a su propiedad "propTypes" para especificar los tipos de datos esperados para las props, a la cual se le asigna como valor, un objeto con las siguientes propiedades
    children: PropTypes.object //Se establece que, la propiedad "children" debe, desde la librería "PropTypes", ser un valor de cadena de texto
}

        ```jsx
        // App.jsx

        import Button from './components/Button'; //Se importa como valor por defecto, dicho componente, desde, su ruta la cual es colocada hasta el nombre de la carpeta nombrada con el nombre del componente("Button") y que contiene el archivo "index.jsx" el cual es importado en automático sin la necesidad de declararlo

        export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
            return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
                <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
                    <Button //Se llama a renderizar como etiqueta HTML, dicho componente importado, el cual recibe las siguientes props
                        **disabled** //Propiedad de "deshabilitado" activada
                        onClick={() => alert("button")}> //Propiedad manejadora de eventos del evento de click sobre éste elemento con valor asignado dentro de llaves por ser código de JS, una función de flecha callback la cual ejecuta la función de ventana emergente la cual cual muestra dicha cadena de texo enviada com argumento
                        Click me //Contiene texto el cual es la propiedad children que necesita el componente estilizado que retorna éste componente
                    </Button>
                </> 
            );
        }
        ```

Para que un pueda hacer uso de psedoclases:

Al mismo nivel de las propiedades de CSS que recibe el componente, dentro de comillas ‘ ’, se coloca *&:, seguido de la pseudoclase: *‘&:hover’, seguido de dos puntos **: y dentro de llaves *{ }*, se colocan las propiedades y valores de CSS que tendrá dicho componente al utilizar la pseudoclase.

const DefaultButton = styled.button({ //Declaración de constante con valo asignado de, del objeto/función "styled" importado, se obtiene el elemento "botón" el cual recibe como argumento un objeto con las siguientes propiedades CSS
    backgroundColor: "gray", //Propiedad de color de fondo, con valor "gris"
    color: "white", //Propiedad de color del texto, con valor "blanco"
    **'&:hover': {** //Pseudoclase de posicionamiento del puntero sobre éste componente, con valor de las siguientes propiedades
        **backgroundColor: "white",** //Propiedad de color de fondo, con valor "blanco"
        **color: "black"** //Propiedad de color del texto, con valor "negro"
    **}**
});

Emotion:

Posee la mismas características que Styled components.
Tiene también una funcionalidad similar a los CSS Modules.
Composition.
Estilos condicionados out-the-box.

La diferencia con Styled Components y Emotion:

Styled Components: Se utilizan componentes estilizados, todo funciona como un componente, al cual se le colocan las propiedades de CSS directamente.

Emotion:

Dentro de los componentes se utiliza la propiedad *********css:{css }********* importada desde la librería @emotion/react, lo cual hace que los estilo sean en linea, similar a utilizar la propiedad *****style=""*****.

import { **css** } from '@emotion/react';

const DefaultButton = **props => {
    <button 
        css={css`
            background-color: gray;
            color: white;
        `}**
        {...props}
    **/>
}**;

También se pueden crear los estilos por separado en el mismo archivo y asignarlos después al momento de renderizar el componente mediante el atributo css={ }:

import { **css** } from '@emotion/react';

**const DefaultButtonStyles = css`
    background-color: gray;
    color: white;
`**
const DefaultButton = **props** => {
    <button **{...props}** />
};

render(
    <div>
        <DefaultButton **css={DefaultButtonStyles}** />
    </div>
)

Stitches:

Es una herramienta basada en tokens y variantes, en la cual no hay condicionales.

Está enfocada más en el ámbito de diseño, no utiliza un ***********run time***********, sino que se compila en tiempo de ejecución.

Basado en tokens y variantes.
Es muy similar a StyledComponents y Emotion pero con esteroides.
Framework Agnostic.
Puedes crear temas de forma muy simple.
Enfocado en temas de performance.
Genera un sólo componente con diferentes variantes de acuerdo a las necesidades que se tengan.

Variantes:

Variantes:

Define variantes múltiples de componentes.
Se define el elemento mediante una variable/constante, se le asigna la función *****style(’’, {})***** donde se define que elemento/componente se requiere, y se asignan las variantes del elemento por estilos.
Tiene mayor especificad.

Variantes compuestas:

Cuando múltiples variantes coincidan en algunas propiedades, se aplique un estilo específico.

Variantes por defecto:

Para definir, si no se pone ningún tipo de propiedad en el componente, cuales serían los estilos que aplicaría por defecto.

Tematización:

Tokens:

Definir todas las propiedades CSS con valores específicos y reutilizables, los cuales serán utilizadas mediante tokens: ***********************nombres clave***********************.
Permite definir múltiples temas.
Se definen todos los tokens, lo que permite generar los componentes con base en esos tokens.

Para implementarlo:

Se debe instalar la dependencia stitches, mediante ***npm***:
- npm install @stitches/react

Se debe crear un archivo de configuración para definir los tokens, fuera del archivo proyecto y dentro de una carpeta correspondiente al proyecto.

Se debe nombrar: ***************************stitches.config.js***************************

Se importa la función *****************createStitches**************, desde la librería *‘@stitches/react’:

// stitches.config.js

**import { createStitches } from '@stitches/react';** //Se importa la función "**createStitches**", desde la librería '**@stitches/react**'

Se exporta una constante con la sintaxis de destructuración para acceder a las funcionalidades que contiene la función createStitches, con valor asignado de la función createStitches, la cual recibe como argumento, un objeto con las configuraciones necesarias para el proyecto.

// stitches.config.js

**import { createStitches } from '@stitches/react';** //Se importa la función "createStitches" para crear una nueva instancia de Stitches que se utiliza para definir estilos, desde la librería '@stitches/react'

**export const {** //Se exporta la declración de constante con la sintaxis de destructuración para acceder a las funcionalidades dentro de la función createStitches
    styled,
    css,
    globalCss,
    keyframes,
    getCssText,
    theme,
    createTheme,
    config,
  **} = createStitches({** //Con valor asignado de ejecutar dicha función para crear una nueva instancia de Stitches que se utiliza para definir estilos, la cual recibe como argumento, un objeto con las siguientes propiedades, las cuales son las configuraciones para el proyecto
    **theme: {** //Propiedad de "tema" para definir los distintos tipos de temas que tendrá el componente
      **colors: {**  //Propiedad de colores para el tema, con las siguientes propiedades
        **black100: 'black',** //Declaración de TOKEN, que hará referencia a un valor de color, con valor asigado de, el color "negro"
        **gray500: 'lightgray',** //Declaración de TOKEN, que hará referencia a un valor de color, con valor asigado de, el color "lightgray"
        **primary500: 'blue',** //Declaración de TOKEN, que hará referencia a un valor de color, con valor asigado de, el color "azul"
        **secondary500: 'red'** //Declaración de TOKEN, que hará referncia a un valor de color, con valor asigado de, el color "rojo"
      **},
    },
    media: {** //Propiedad de pantallas de dispositvos, con las siguientes propiedades
      **bp1: '(min-width: 480px)',
    },
    utils: {**  //Propiedad de "utilidades" para estilos específicos mediante una función de flecha que recibe un valor y lo transforma para obtener un estilo CSS específico
      **paddingNormaliced: (value) => ({ padding: value * 4 })** //Declaración de propiedad personalizada, con valor asignado de, una función flecha que recibe un valor como argumento, y ejecuta, dentro de paréntesis el cual contiene un objeto, que a su vez posee como propiedad, el estilo CSS, que a su vez posee como valor, el valor recibido multiplicado por cuatro
    **},
});**

Dentro del archivo del componente, se importa desde el archivo de configuración de stitches, la función styled desde su ruta, para poder aplicar los estilos que se definieron:

**import { styled } from '../stitches.config.js';** //Se importa la función "styled" que se utiliza para definir un nuevo componente estilizado basado en un elemento HTML o en otro componente existente. Se utiliza "styled" para crear estilos y aplicarlos al componente que se está creando, todo dentro de JavaScript, desde, la ruta del archivo de configuración de stitches

Para aplicar los estilos:

Se declara una constante la cual será el componente, a la cual se le asigna como valor, ejecutar la función importada styled(’’, {}).
La función styled(’’, {}) recibe dos parámetros:
1. El elemento que será el componente, el cual se coloca dentro de comillas.
2. Los estilos que se le van a aplicar, mediante un objeto.
Dentro del objeto de la función styled(’’, {}), se colocan dentro del segundo parámetro, las propiedades CSS, las cuales serán aplicadas por defecto y a todas las variantes, hasta que se declare un estilo que lo cambie.
Dentro del segundo parámetro, se declara la propiedad “variants”, la cual dentro de un objeto, se declaran los distintos tipos de variantes como propiedad dentro de dicho objeto “variants”, las cuales pueden ser nombradas arbitrariamente, y deben ser separadas por comas.
Dentro del objeto que declara el tipo de variante, se declaran las distintas variantes, la cual dentro de un objeto se declaran las propiedades CSS que serán aplicados a dicha variante, siendo que a cada propiedad se le asigna como valor, un *********token:*********
- Empezado con el símbolo $ seguido del nombre del *******token******* que hace referencia al valor del estilo que se requiere aplicar, las cuales será separadas por comas.
- Cada token hace referencia a un valor de estilo declarado dentro del archivo de configuración “stitches.config.js”

// Button.jsx

import { styled } from '../stitches.config.js'; //Se importa la función "styled", desde, la ruta del archivo de configuración de stitches

**const Button = styled('button', {** //Declaración de constante, la cual será un componente, con valor asignado de, ejecutar la función "styled" que le declarará los distintos estilos del componente, la cual recibe como primer argumento "el elemento que será el componente", y como segundo argumento un objeto que contendrá sus distintos estilos, los cuales serán los siguientes y serán aplicados a todas las variantes hasta que dicho estilo sea cambiado al declarar el estilo de variante en el componente conrrespondiente
    **borderRadius: '5px',** //Propiedad de redondeo de las esquinas, con valor de 5 pixeles en cada esquina
    **border: '0',** //Propiedad de borde, con valor "0" para no tener borde
    **color: 'white',** //Propiedad de color del texto, con valor "blanco"
    **variants: {** //Propiedad de estilos, las cuales serán las distintas variantes del mismo componente, en un objeto contine los distos tipos de variantes
        **intent: {** //Variantes por "intención", dentro de un objeto contiene las dintintas variantes por "intención"
            **base: {** //Variante base, dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
                **color: '$black100',** //Propiedad de color del texto, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
                **backgroundColor: '$gray500'** //Propiedad de color de fondo, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
            **},
            active: {** //Variante de "activo", dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
                **backgroundColor: '$primary500'** //Propiedad de color de fondo, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
            **},
            disabled: {** //Variante de "desactivado", dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
                **backgroundColor: '$secondary500'** //Propiedad de color de fondo, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
            **}
        },
        size: {** //Variantes por "tamaño", dentro de un objeto contiene las dintintas variantes por "tamaño"
            **base: {** //Variante "base", dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
                **paddingNormaliced: 1,** //Propiedad personalizada en el archivo de configuraciones, con valor asignado de, el valor numérico 1, el cual será transformado a lo que fue declarado
                **fontSize: '1em'** //Propiedad de tamaño de fuente, con valor de 1 vez el tamaño de fuente declarado del elemento contenedor mas cercano
            **},
            small: {** //Variante "pequeña", dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
                **padding: '2px 6px',** //Propiedad de margen interno, con valor de, 2 pixeles superior e inferior, y 6 pixeles a los lados
                **fontSize: '0.6em'** //Propiedad de tamaño de fuente, con valor de 0.6 veces el tamaño de fuente declarado del elemento contenedor mas cercano
            **},
            large: {** //Variante "grande", dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
                **padding: '8px 10px',** //Propiedad de margen interno, con valor de, 8 pixeles superior e imferior, y 10 pixeles a los lados
                **fontSize: '1.2em'** //Propiedad de tamaño de fuente, con valor de 1.2 veces el tamaño de fuente declarado del elemento contenedor mas cercano
            **}
        }
    },
    defaultVariants: {** //Propiedad de estilos, los cuales serán los etilos por defecto del componente, en un objeto contine los estilos por defecto que serán aplicados al componente que no será una variante
        **intent: 'base',** //Propiedad de variante por "intención", con valor de, "base"
        **size: 'base'** //Propiedad de variante por "tamaño", con valor de, "base"
    **}
});**

export default **Button**; //Se exporta como valor por defecto, dicho componente "**Button**" con sus estilos aplicados, para poder ser renderizado

RESPONSIVE:

Mobile First: Se utiliza ‘(min-width: …px)’
Desktop First: Se utiliza ‘(max-width: …px)’

Las propiedades CSS de los estilos que se colocan primero, en el segundo argumento de la función styled, serán aplicados al break point que se esté trabajando, siendo recomendado empezar por Mobile First, e ir subiendo el tamaño de los break points.

Los break points se definen mediante un token en la propiedad *********media:{}*******, dentro de la función **createStitches({}) en el archivo stitches.config.js.

Se declara el token, y como valor, dentro de comillas y de paréntesis se coloca min-width: o max-width:, y se coloca el valor del break point.

media: { //Propiedad de tamaños de pantalla, con valor de un objeto con las siguientes propiedades
      **bpMobile: '(min-width: 480px)',** //Declaración de token, para break point de mobile, con valor asignado de, ancho minimo, de, 480 pixeles
      **bpTablet: '(min-width: 720px)',** //Declaración de token, para break point de tablet, con valor asignado de, ancho minimo, de, 720 pixeles
      **bpDesktop: '(min-width: 1080px)',** //Declaración de token, para break point de desktop, con valor asignado de, ancho minimo, de, 1080 pixeles
},

Una vez definidos los break points en el archivo stitches.config.js, al declarar los estilos utilizando la función *************styled(’’, {})**********, dentro de comillas *‘ ’*, se coloca, mediante el símbolo *@, el nombre del break point, y para asignar los estilos, se hace mediante un objeto al cual se le colocan las propiedades(estilo) CSS con su valor.

intent: { //Variantes por "intención", dentro de un objeto contiene las dintintas variantes por "intención"
    base: { //Variante "base", dentro de un objeto posee sus propiedades CSS para aplicar sus respectivos estilos
        **'@bpMobile': {** //token el cual hace refetencia al break point de mobile, con valor de un objeto, el cual contine los siguiente estilos de CSS 
            **color: '$mobile',** //Propiedad de color del texto, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
        **},
        '@bpTablet': {** //token el cual hace refetencia al break point de tablet, con valor de un objeto, el cual contine los siguiente estilos de CSS 
            **color: '$tablet',** //Propiedad de color del texto, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
        **},
        '@bpDesktop': {** //token el cual hace refetencia al break point de desktop, con valor de un objeto, el cual contine los siguiente estilos de CSS 
            **color: '$desktop',** //Propiedad de color del texto, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
        **},**
        backgroundColor: '$gray500' //Propiedad de color de fondo, con valor del token que hace referencia a un color declarado dentro de la configuración del archivo "stitches.config.js"
    },
},

Para renderizar:

Se importa el componente desde la ruta del archivo que lo contiene.
Se coloca como etiqueta HTML para poder ser renderizado.
Se le colocan las propiedades que hacen referencia a las variables declaradas dentro de la propiedad “variants” al declarar los estilos del componente.
- En caso de no necesitar ninguna variante, solo se renderiza el componente y así se le aplicarán los estilos por defecto.

import Button from './components/Button'; //Se importa como valor por defecto, el componente estilizado "Button", desde su ruta hasta el archivo del componente si colocar su extensión

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, el cual ejecuta el siguiente bloque
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            **<Button>Click me</Button>** //Se renderiza el componente "Button", el cual al no colocarle ningún atributo, se le aplican los estilos por defecto declarados en la propiedad "defaultVariants" y los estilos declarados al inicio del del objeto de estilos que son aplicados a todas las variantes, y contiene texto lo cual es lo que mostrará el componente
            **<Button** //Se renderiza el componente "Button", el cual recibe las siguientes "props"
                **intent={'active'}** //Propiedad de variante de "intención", con valor asignado dentro de llaves por ser código de JS, como cadena de texto, el valor de la variante que requiere, siendo el de "activo"
                **size={'large'}>** //Propiedad de variante de "tamaño", con valor asignado dentro de llaves por ser código de JS, como cadena de texto, el valor de la variante que requiere, siendo el de "grande"
                **Click me** //Contiene texto, lo cual es lo que mostrará el componente
            **</Button>
            <Button** //Se renderiza el componente "Button", el cual recibe las siguientes "props"
                **intent={'disabled'}** //Propiedad de variante de "intención", con valor asignado dentro de llaves por ser código de JS, como cadena de texto, el valor de la variante que requiere, siendo el de "desactivado"
                **size={'small'}>** //Propiedad de variante de "tamaño", con valor asignado dentro de llaves por ser código de JS, como cadena de texto, el valor de la variante que requiere, siendo el de "pequeño"
                **Click me** //Contiene texto, lo cual es lo que mostrará el componente
            **</Button>**
        </> 
    );
}

TailwindCSS:

Es una herramienta que se considera una “*********************utility first*********************”, que en este caso provee todas las utilidades necesarias las cuales son la necesidades que se requieren para el comportamiento y visualización de los elementos sin la necesidad de escribir todo el código del CSS.

Las *****************utilities***************** son las necesidades que se tienen al momento de escribir en CSS, las cuales son el comportamiento y visualización.

Así ya no se piensa directamente en el CSS, sino en las utilidades/necesidades requeridas para un elemento, enfocándose en el “*********************utility first*********************”.

El performance, a nivel de purgado, solo utiliza las clases que realmente se están utilizando en los componentes de React, así solo se tiene un archivo con las clases que se están utilizando, incrementando el rendimiento.

Provee las utilidades, las cuales pueden ser modificadas.
Generación de clases en tiempo de construcción.
Purging.
Plugins para extender tus clases.
PostCSS.
Estilizado condicional con una dependencias.

ESENCIALES DE REACT

Rodrigo Grau — Tue, 15 Aug 2023 00:56:32 +0000

[PROPS(propiedades):]
[REDERIZAR MEDIANTE UN ARREGLO:]
[RENDERIZAR CONDICIONAL:]
[STATE(estado):]
[HOOKS:]
[EVENTOS:]
[FORMULARIOS:]
[CONTROLLED COMPONETS:]
[UNCONTROLLED COMPONETS:]
[REFERENCIAS:]
[LISTAS Y LLAVES:]
[EJEMPLO:]

PROPS(propiedades):

Las *******props******* son como argumentos que le pasamos a una función. Se los pasa un padre a un hijo.

Es la manera que tienen los componentes para comunicarse entre ellos, es un objeto que contiene propiedades y valores, o alguna propiedad con valor, el cual es enviado como argumento en las funciones que serán componentes, el cual para acceder a dichas *******props*******, se hace como con un objeto:

Comunicación entre componentes, siendo la comunicación entre el componente padre y el hijo, o viceversa.
Tienen un flujo de cascada, en ejecución de superior a inferior.
Podemos mandar cualquier valor(objetos, funciones, string, etc).
Pueden cambiar a lo largo del tiempo.
Los componentes de React tienen prohibido mutar las props.

Para enviar los valores de las props:

Se deben de colocar dentro de la etiqueta que será el componente a ejecutar.
Se coloca el nombre, el símbolo de asignación y se utilizan llaves, ya que es código de JavaScript.
- Si es un valor de cadena de texto, se pueden omitir las llaves.
- Si será un objeto, se puede colocar el nombre de la variable que contiene el objeto, o dentro de las llaves declarar el objeto con sus propias llaves y colocando las propiedades y valores.

Así un mismo componente puede renderizar(mostrar) algo distinto dependiendo de las *******props(propiedades)******* que se le envíen.

Cuando se tiene un valor que se deduce a partir de una *****prop***** o un *********estado******, se puede guardar en una variable, ya que cada vez que se cambie la **prop***** o el *********estado*********, el componente se va a renderizar así se verá reflejado el cambio en la variable.

children:

Ésta es una *****prop**(propiedad) llamada ********children********, la cual es un ************componente*************** enviado como *****prop/argumento***** a un componente padre para renderizarlo dentro de dicho padre. Similar al contenido dentro de las etiquetas de HTML.

Ésta propiedad le indica a un componente que puede contener elementos hijos, uno o muchos, dependiendo de lo que se requiera.

Dicha *****prop***** es un arreglo de elementos de React.

Para enviar dicha *************************prop children**********************, se hace igual que el contenido de una etiqueta HTML, dentro de las etiquetas del llamado a la función componente, se coloca la ****prop children*******, la cual es un componente e igual se coloca como etiqueta HTML.

Para dichas *************************props children***********************, **no es necesario contenerlas dentro de un *************fragment************* o algún contenedor.
Para poder recibir dichas *************************props children*************************, se puede:
- Como parámetro, destructurar para obtener acceder directamente a dicha ***prop: {children}***
- Como parámetro, colocar “***props*** y para acceder a dicha *****prop***** children, se hace mediante llaves por ser código de JS dentro de JSX: {props.children}

import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes
import Avatar from './Avatar'; //Se importa como valor por defecto el componente "Avatar", desde, la ruta del archivo

function Card(**{children}**) { //Declaración de función la cual será un componente, posee un parámetro para recibir la ********prop******** **************children**************, mediante la sintaxis de destructuración para obtener la ********prop******** **************children************** la cual representa los elementos hijos que se encuentran contenidos dentro de un componente, la cual ejecuta el siguiente bloque
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div className="card"> //Etiqueta contenedora de bloque, posee un selector de clase, y contiene lo siguiente
            **{children}** //Dentro de llaves por ser código de JS, se renderiza la **********prop children**********, obtenida desde el argumento(********prop********) envíado al componente "******Card******" al llamarlo para ser renderizado
        </div>
    );
}

export default function Profile() { //Se exporta como valor por defecto, la declaración de función que será un componente, y que ejecuta el siguiente bloque
  return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
    <Card> //El llamado a ejecutar dicho componente, el cual recibe y contiene las siguientes ********props children********
        **<h1>Rei Ayanami</h1>** //prop children, que es una etiqueta de título principal, la cual contiene texto
        **<Avatar** //prop children, que es el llamado a ejecutar dicha funicón componente, la cual recibe las siguientes props
            ****size={100} ****//prop enviada al componente, la cual será el tamaño, y que tiene valor en código de JS, colocado entre llaves, el valor numérico 100
            ****person={{ ****//Propiedad enviada al componente, para los valores necesarios, con valor asignado de, dentro de llaves por ser código de JS, un objeto con las siguiente propiedades
             ****   name: 'Rei Ayanami', //Propiedad del objeto, con valor de una cadena de texto
                imageId: 'YfeOqp2' //Propiedad del objeto, con valor de una cadena de texto
            }}
        **/>**
    </Card>
  );
}

Card.propTypes = { //De dicha función componente, se accede a su propiedad estática "propTypes" que es un objeto para especificar los tipos de datos esperados de las propiedades(****props****) de un componente y asegurarse de que sean utilizadas correctamente, el cual es obtenido de la librería "prop-types", y se reasigna su valor para definir las validaciones de tipo para las propiedades person y size del componente "Perfil"
    children: PropTypes.array //Se establece que, la propiedad "children" debe, desde la librería "PropTypes", ser un arreglo
};

PropTypes:

Para saber que *******props******* recibe un componente y verificar los tipos de datos de las mismas, se hace uso de PropTypes:

Para declarar las PropTypes de un componente:
- Se coloca el nombre del componente.
- Se accede a la propiedad propTypes mediante un punto “.”
- Se le asigna como valor un objeto, el cual va a coincidir con el objeto *******props****, colocando la misma estructura de ****props*******.
- A cada propiedad, se le declara de que tipo de dato debe ser, mediante “PropTypes” se coloca el nombre del tipo de dato, y finalmente si es requerido, utilizando “isRequired”.

import **PropTypes** from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes

ComponentName.**propTypes** = { //De dicha función componente, se accede a su propiedad estática "propTypes" que es un objeto para especificar los tipos de datos esperados de las propiedades(****props****) de un componente y asegurarse de que sean utilizadas correctamente, el cual es obtenido de la librería "prop-types", y se reasigna su valor para definir las validaciones de tipo para las propiedades person y size del componente "Perfil"
    person: **PropTypes**.shape({ //La propiedad "person" que es un objeto, se le asigna como valor para validar su tipo de dato requerido, mediante de la librería "PropTypes" importada, ejecutar su método de validador shape(formas) para validar que una propiedad sea un objeto y especificar los tipos de datos de las propiedades dentro de ese objeto, el cual recibe como argumento un objeto para validar los valores de sus propiedades, donde las claves del objeto representan las propiedades del objeto que se está validando, y los valores representan los validadores para esas propiedades
        name: **PropTypes.string.isRequired**, //Se establece que, la propiedad "name" debe, desde la librería "PropTypes", ser una cadena de texto, y es requerida
        imageId: **PropTypes.string.isRequired** //Se establece que, la propiedad "imageId" debe, desde la librería "PropTypes", ser una cadena de texto, y es requerida
    }).**isRequired**, //Asegura que las propiedades especificadas sean requeridas y deben estar presentes cuando se utilice el componente
    size: **PropTypes.number.isRequired** //Se establece que, la propiedad "size" debe, desde la librería "PropTypes", ser un valor numérico, y es requerida
};

EJEMPLO:

//main.jsx

import React from 'react'; //Se importa la librería de React, desde, react
import ReactDOM from 'react-dom/client'; //Se importa la librería de react para manupular el DOM, desde, la librería de "react-dom/client"
import App from './App.jsx'; //Se importa como valor por defecto dicho componente, desde, otro módulo mediante su ruta

ReactDOM.createRoot(document.getElementById('root')).render( //Mediante la librería de react para manipular el DOM, se llama a su método para crear una raíz de React que se utilizará como punto de entrada para renderizar los componentes en el DOM, el cual recibe como argumento, del archivo HTML, obtener el elemento mediante su selector identificador el cual es enviado como argumento en cadena de texto, así dicho elemento será el punto de entrada, al que se le aplica el método de la raíz de React que se encarga de renderizar los componentes en el DOM, el cual recibe la siguiente estructura de JSX
    <React.StrictMode> //Se utiliza desde la librería de react, el componente para realizar comprobaciones adicionales en desarrollo
        <App /> //Se llama a ejecutar dicho componente importado desdes otro módulo, siendo ejecutado como etiqueta HTML para poder ser renderizado
    </React.StrictMode>
);

//App.jsx

import Avatar from "./Avatar"; //Se importa como valor por defecto dicho componente, desde, otro módulo mediante su ruta

export default function Profile() { //Se exporta como valor por defecto, la declaración de función que será un componente, el cual ejecuta el siguiente bloque
    let user1 = { //Declaración de variable con valor asignado de un objeto, el cual contiene las siguiente propiedades
        name: "Rei Ayanami", //Propiedad del objeto, con valor de una cadena de texto
        imageId: "YfeOqp2" //Propiedad del objeto, con valor de una cadena de texto
    };
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <Avatar //Se llama a ejecutar dicho componente importado, ejecutado como etiqueta HTML para poder ser renderizado, el cual recibe las siguientes "**props**"
                **size={150}** //Propiedad enviada al componente, para el tamaño, con valor asignado de, dentro de llaves por ser código de JS, el valor numérico 150
                **person={user1}** //Propiedad enviada al componente, para. los valores necesarios, con valor asignado de, dentro de llaves por ser código de JS, el valor de dicha variable, el cual es un objeto
            />
            <Avatar //Se llama a ejecutar dicho componente importado, ejecutado como etiqueta HTML para poder ser renderizado, el cual recibe las siguientes "**props**"
                **size={100}** //Propiedad enviada al componente, para el tamaño, con valor asignado de, dentro de llaves por ser código de JS, el valor numérico 100
                **person={{**  //Propiedad enviada al componente, para los valores necesarios, con valor asignado de, dentro de llaves por ser código de JS, un objeto con las siguiente propiedades
                    **name: "Azuka Langley",** //Propiedad del objeto, con valor de una cadena de texto
                    **imageId: "OKS67lh"** //Propiedad del objeto, con valor de una cadena de texto
                **}}**
            />
            <Avatar //Se llama a ejecutar dicho componente importado, ejecutado como etiqueta HTML para poder ser renderizado, el cual recibe las siguientes "**props**"
                **size={50}** //Propiedad enviada al componente, para el tamaño, con valor asignado de, dentro de llaves por ser código de JS, el valor numérico 50
                **person={{** //Propiedad enviada al componente, para. los valores necesarios, con valor asignado de, dentro de llaves por ser código de JS, un objeto con las siguiente propiedades
                    **name: "Shinji Ikari",** //Propiedad del objeto, con valor de una cadena de texto
                    **imageId: "1bX5QH6"** //Propiedad del objeto, con valor de una cadena de texto
                **}}**
            />
        </div>
    );
}

//Avatar.jsx

import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes

export default function Avatar(props) { //Se exporta como valor por defecto, la declaración de función que será un componente, el cual posee un parámetro para recibir las "props"(propiedades) en un objeto, la cual ejecuta el siguiente bloque
    return <Perfil {...props} />; //Se retorna la ejecución de dicho componente ejecutado como etiqueta HTML para poder ser renderizado, el cual recibe sus "props"(propiedades) desde dicho objeto enviado como argumento a la función, utilizando la sintaxis de "propagación" para pasar todas las propiedades de dicho objeto
}

function Perfil({ person, size }) { //Declaración de función que será un componente, el cual recibe mediante la sintaxis de "destructuración", dos argumentos que serán obtenidos desde un objeto "props"(propiedades), para acceder a las propiedades con dichos nombres, así evitando mutar dicho objeto ya que así se crear variable con el nombre declarado en la "destructuración" solo obtenido los valores del objeto
    let {name, imageId} = person; //Declaración de variable que destructura las propiedades "name" e "imageId", del objeto "person", que también fue destructurado desde el objeto "props" que se le envía como argumento a la función componente
    let image = "../public/rei.webp"; //Declaración de variable con valor asignado de, una cadena de texto la cual es una ruta para obtener una imagen
    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <img //Etiqueta de imagen, la cual posee los siguiente 
            className="avatar" //Selector de clase con sintaxis camelCase, con valor de, una cadena de texto
            src={image} //Atributo de "fuente", con valor de, el valor de dicha variable, siendo colocado dentro de llaves por ser código de JS
            alt={name} //Atributo de "alternativo" para cuando no pueda ser mostrada la imagen, con valor de, de dicho argumento destructurado en el parámetro de la función el cual es un objeto, acceder al valor de su propiedad "name", siendo colocado dentro de llaves por ser código de JS
            width={size} //Atributo de ancho, con valor de, el valor de dicho argumento destructurado en el parámetro de la funció, siendo colocado dentro de llaves por ser código de JS
            height={size} //Atributo de alto, con valor de, el valor de dicho argumento destructurado en el parámetro de la funció, siendo colocado dentro de llaves por ser código de JS
        />
    );
}

Perfil.propTypes = { //De dicha función componente, se accede a su propiedad estática "propTypes" que es un objeto para especificar los tipos de datos esperados de las propiedades(****props****) de un componente y asegurarse de que sean utilizadas correctamente, el cual es obtenido de la librería "prop-types", y se reasigna su valor para definir las validaciones de tipo para las propiedades person y size del componente "Perfil"
    person: PropTypes.shape({ //La propiedad "person" que es un objeto, se le asigna como valor para validar su tipo de dato requerido, mediante de la librería "PropTypes" importada, ejecutar su método de validador shape(formas) para validar que una propiedad sea un objeto y especificar los tipos de datos de las propiedades dentro de ese objeto, el cual recibe como argumento un objeto para validar los valores de sus propiedades, donde las claves del objeto representan las propiedades del objeto que se está validando, y los valores representan los validadores para esas propiedades
        name: PropTypes.string.isRequired, //Se establece que, la propiedad "name" debe, desde la librería "PropTypes", ser una cadena de texto, y es requerida
        imageId: PropTypes.string.isRequired //Se establece que, la propiedad "imageId" debe, desde la librería "PropTypes", ser una cadena de texto, y es requerida
    }).isRequired, //Asegura que las propiedades especificadas sean requeridas y deben estar presentes cuando se utilice el componente
    size: PropTypes.number.isRequired //Se establece que, la propiedad "size" debe, desde la librería "PropTypes", ser un valor numérico, y es requerida
};

REDERIZAR MEDIANTE UN ARREGLO:

Para renderizar elementos mediante un arreglo:

Se hace uso de la función *******map()*******, la cual será aplicada al arreglo a ser iterado y la cual recibirá una función para rendererizar elementos que usen los valores dentro del arreglo.

let **frutas** = [ //Declaración de variable con valor asigando de, un arreglo con varios valores de cadena de texto
    "banana",
    "pera",
    "manzana",
    "uva",
    "sandía",
    "cereza"
];

export default function ListaFrutas() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiente bloque
    function renderizarFruta(**fruta**) { //Declaración de función anidada, la cual posee un parámetro para recibir como argumento cada uno de los valores dentro del arreglo a ser iterado con map, y que ejecuta el siguiente bloque
            return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
            **<li key={fruta}>{fruta}</li>** //Etiqueta de elemento listado, la cual posee la propiedad "******key******" necesaria cuando se renderizan listas de elementos para que React pueda identificarlos de manera única y optimizar el proceso de actualización, con valor del mismo valor enviado como argumento a la función "renderizarFruta", siendo dicho elemento listado contiene dentro de llaves por ser código de JS el valor enviado como argumento a la función "renderizarFruta", así por cada valor dentro del arreglo
        )
    }

    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
            <div> //Etiqueta contenedora de bloque, la cual contiene lo siguiente
                  <h2>Las frutas que hay son:</h2> //Etiqueta de subtítulo, el cual contiene texto
                  <ul>**{frutas.map(renderizarFruta)}**</ul> //Etiquta de lista desordenada, la cual contiene entro de llaves por ser código de JS, a dicho arreglo "frutas", aplica el método de "crear un nuevo arreglo con cambios" el cual recibe como argumento, la función renderizarFruta, la cual retorna un elemento listado por cada uno de os valores dentro del arreglo "frutas"
            </div>
    )
}

RENDERIZAR CONDICIONAL:

En react cuando se necesita renderizar componentes de manera condicional, se hace:

Dentro de llaves por ser código de JS “*{ }*”.
Se coloca la condición a cumplir.
Se coloca el operador and(&&).

Finalmente se llama a ejecutar el componente cómo etiqueta HTML, ***.***

const [**show**, setShow] = useState(**true**); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano true

return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
    <div> //Etiqueta contenedora de bloque
        **{show && <Component />}** //Dentro de llaves por ser código de JS, se valida la condición de que si "**show**" que es el valor actual del estado del componente tiene valor "true", mediante el operador and(&&), llamar a ejecutar dicho otro componente como etiqueta de HTML para ser renderizado, de lo contrario no se hace nada
    </div>
)

También se puede utilizar el operador ternario:

Dentro de llaves por ser código de JS “*{ }*”.
Se coloca la condición a cumplir.
Se coloca el símbolo “?”.
Finalmente se llama a ejecutar el componente como etiqueta HTML, ***.***
Se coloca el símbolo “:”.

Y finalmente se coloca el caso en que no se cumpla la condición.

const [**show**, setShow] = useState(**true**); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano true

****return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
    <div> //Etiqueta contenedora de bloque
        **{show ? <Component /> : null}** //Dentro de llaves por ser código de JS, se valida la condición de que si "**show**" que es el valor actual del estado del componente tiene valor "true", mediante el operador ternario(? :), llamar a ejecutar dicho otro componente como etiqueta de HTML para ser renderizado, de lo contario, si su valor es "false", se retorna "nulo", para no renderizar nada
    </div>
)

STATE(estado):

El estado es como la memoria de un componente. El componente debe “recordar” esto.

El estado solo se puede usar en funciones que serán componentes.
El estado no se muta directamente, sino que lo actualizamos mediante una función.
Es donde un componente guarda cierta información y la puede cambiar como respuesta a interacciones.
Se pueden tener más de un solo estado en un componente.
useState() es una función que se importa desde la librería de React, la cual recibe como argumento un valor por defecto.
useState() retorna un arreglo de elementos, el cual para acceder a ellos es necesario la sintaxis de *****************************destructuración:*****************************
- Siendo el primer valor, el valor actual del estado.
- Como segundo valor, se retorna una función, la cual al ser llamada y enviarle un valor como argumento, hará la actualización del estado y dicho valor enviado como argumento será el nuevo valor del estado y será el que se mostrará siendo renderizado.

import { **useState** } from "react"; //Se importa la función hook "useState", desde la librería de react, para agregar el estado a los componentes

export default function App() { //Se exporta como valor por defecto, la declación de función que será un componente, la cual ejecuta el siguiente bloque
    return( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Contenedor de bloque
            <Counter /> //Se llama a ejecutar dicho componente importado, ejecutado como etiqueta HTML para poder ser renderizado
        </div>
    );
}

function Counter() { //Declaración de función que será un componente, la cual ejecuta el siguiente bloque
    **const [age, setAge] = useState(0)**; //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor numérico "0"
    **const [name, setName] = useState("Name")**; //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor numérico "Name"

    function inputContent() { //Declaración función, la cual ejecuta el siguiente bloque
        let input = document.querySelector(".name"); //Declaración de variable con valor asignado de, del documento HTML, obtener el primer elemento mediante su selector, el cual es el de clase enviado como cadena de texto 
        return input.value; //Se retorna, del elemento obtenido mediante su selector, su valor ingresado
    }

    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div className="counter"> //Contendor de bloque, posee un selector de clase
            <h1>My age is: {**age**} years old</h1> //Etiqueta de título pricipal, la cual contiene texto y dentro de llaves por ser código de JS, el valor de "age" el cual es uno de los valores actuales del componente
            <button onClick={() => **setAge(age + 1)**}>Sumar uno</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, una función de flecha, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor actual del componente("age") y se le suma el valor numérico 1, siendo el resultado, el nuevo valor actual del compente, y dicha etiqueta contiene texto
            <button onClick={() => **setAge(age - 1)**}>Restar uno</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, una función de flecha, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor actual del componente("age") y se le resta el valor numérico 1, siendo el resultado, el nuevo valor actual del componente, y dicha etiqueta contiene texto
            <button onClick={() => **setAge(age + 10)**}>Sumar diez</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, una función de flecha, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor actual del componente("score") y se le suma el valor numérico 10, siendo el resultado, el nuevo valor actual del componente, y dicha etiqueta contiene texto
            <button onClick={() => **setAge(age - 10)**}>Restar diez</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, una función de flecha, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor actual del componente("age") y se le resta el valor numérico 10, siendo el resultado, el nuevo valor actual del componente, y dicha etiqueta contiene texto
            <h1>My name is: {**name**}</h1> //Etiqueta de título pricipal, la cual contiene texto y dentro de llaves por ser código de JS, el valor de "name" el cual es uno de los valores actuales del componente
            <input type="text" className="name"/> //Etiqueta de ingreso de datos, la cual recibe como "prop"(propiedad) siendo un atributo, el tipo de ingreso de datos con valor de texto, y posee un selctor de clae
            <button onClick={() => **setName(inputContent)**}>Establecer</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, una función de flecha, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, la función para obtener el valor del input siendo el retorno de la misma, el nuevo valor actual del componente, y dicha etiqueta contiene texto
        </div>
    );
}

Al cambiar el estado, React detecta que hubo cambios y hay que reflejarlos en la pantalla, renderizándolos.
Si lo que se necesita para hacer un nuevo render con una variable que cambie a lo largo de tiempo, lo necesario es el ***********state(estado).*********** React no renderiza las mutaciones de las variables porque no detecta dichos cambios.
React junta todos los cambios en los estados, los realiza y el estado cambio y finalmente los renderiza todos juntos.

El hook useState() es esencial para crear componentes funcionales con estado en React, lo que te permite mantener la coherencia y reactividad en tu aplicación mientras manipulas y actualizas datos de manera sencilla.

HOOKS:

Los hooks son funciones que en general comienzan con *****use*****, y permiten reutilizar código. Algunas son:

useState(): Para manejar el estado de los componentes y renderizar los cambios respecto al cambio del estado.
useEffect(): Para manejar los efectos secundarios de los componentes respecto a cambio de valor de una propiedad del componente.
useRef(): Para ****acceder directamente al elemento HTML mediante el DOM. Las referencias no provocan una actualización del componente cuando cambian su valor, y tampoco provocan una nueva renderización.
useImperativeHandle(): Permite pasar y acceder a la referencia de un elemento del DOM.

REGLAS:

No puede estar dentro de un condicional if.
Se tienen que llamar en el top-level(parte superior) del componente.
Solo se puede invocar en funciones que serán componentes (o en otros hooks).

useEffect(function, [ , ]):

Se usa para realizar efectos secundarios en un componente.
Se ejecuta luego de los cambios del DOM.
Recibe dos argumentos:
- Una función: Ésta función puede no retornar nada o retornar a su vez otra función, la cual es llamada “clean up”, porque suele “limpiar” acciones y es la última en ser ejecutada.
- Un array de dependencias (opcional): Puede ser un arreglo vacío o un arreglo con dependencias:
  - Si no se recibe dicho arreglo, el efecto se va a ejecutar cada vez que se renderice el componente.
  - Si se recibe un arreglo vacío, el efecto se va a ejecutar la primera y última vez que se renderice el componente.
  - Se se recibe un arreglo con dependencias, el efecto se va a ejecutar cada vez que cambie algún elemento del arreglo de dependencias.
  Dichas dependencias son valores son valores que están relacionadas con los componentes, las cuales pueden ser modificadas y cambiar con el tiempo, pueden ser “*******props*******” enviadas al componente.
Se recomienda el uso de ***************useEffect*************** cuando:
- Se necesita agregar un “listener”(escuchador).
- Que se requiera hacer algo cuando se cambie el valor de una “*****prop*****” del componente.

EJEMPLO:

import { useState } from "react"; //Se importa la función hook para manejar el estadoo en componentes, desde, la libreriía de react
**import { useEffect } from "react";** //Se importa la función hook para manejar efectos secundarios en componentes, desde, la libreriía de react
import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, la cual ejecuta el siguiete bloque
    const [show, setShow] = useState(true); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor booleano "true"
    const [counter, setCounter] = useState(0); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto envuiado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor numérico "0"

    function open() { //Declaración de función para mostrar un elemento en el DOM, la cual ejecuta el siguiente bloque
        setShow(true); //Se llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor booleano "true"
    }
    function close() { //Declaración de función para ocultar un elemento en el DOM, la cual ejecuta el siguiente bloque
        setShow(false); //Se llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor booleano "false"
    }
    function addCounter() { //Declaración de función para modificar el valor de un estado del componente, la cual ejecuta el siguiente bloque
        setCounter(counter + 1); //Se llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor actual del dicho estado, y se le suma el valor numérico 1, siendo el resultado el nuevo valor actual del componente
    }
    function removeCounter() { //Declaración de función para modificar el valor de un estado del componente, la cual ejecuta el siguiente bloque
        setCounter(counter - 1); //Se llama a ejecutar la función de actualización del estado la cual recibe como argumento, el valor actual del dicho estado, y se le resta el valor numérico 1, siendo el resultado el nuevo valor actual del componente
    }

    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div className="app"> //Etiqueta contenedora de bloque, la cual recibe una "prop" que es un selector de clase, con valor de una cadena de texto
            <button onClick={open}>Abrir</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, llamar a la función para mostrar un elemento en el DOM, y dicho botón contiene texto 
            <button onClick={close}>Cerrar</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, llamar a la función para ocultar un elemento en el DOM, y dicho botón contiene texto 
            {show && <Cartel />} //Dentro de llaves por ser código de JS, se valida la condición de que si "show" que es el valor actual del estado del componente tiene valor "true", mediante el operador and(&&), llamar a ejecutar dicho otro componente como etiqueta de HTML para ser renderizado, de lo contrario no se hace nada
            <button onClick={addCounter}>Sumar al contador</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, llamar a la función para modificar el valor de un estado del componente, y dicho botón contiene texto 
            <button onClick={removeCounter}>Restar al contador</button> //Etiqueta de botón, el cual recibe como "prop"(propiedad) siendo un atributo, el manejador de eventos en respuesta a un clic del mouse en el botón, con valor asignado de, dentro de llaves por ser código de JS, llamar a la función para modificar el valor de un estado del componente, y dicho botón contiene texto 
            <Elemento show={show} counter={counter}/> //Se llama a ejecutar dicho compoente como etiqueta de HTML para ser renderizado, el cual recibe dos "props", ambas propiedades son el valor de cada uno de los estados del compoente, para poder acceder a ellos
        </div>
    );
}

function Elemento(props) { //Declación de función, la cual posee un argumento para reibir el objeto "props", y que ejecuta el siguiente bloque
    **useEffect(efecto, [props.show]);** //Se llama a ejecutar la función hook para manejar efectos secundarios en componentes, la cual recibe como primer argumento, una función a ser ejecutada cada vez que haya algún cambio en el segundo parámetro, el cual es un arreglo que contiene, del objeto "props", acceder a la propiedad "show" la cual es el estado actual del componente "App"

    let esMayorA5 = props.counter > 5; //Declaración de variable con valor asignado de, del del objeto "props", acceder a la propiedad "counter" la cual es el estado actual del componente "App", y validar si es mayor que el valor numérico 5, así funcionando como una condicional

    **function efecto() {** //Declaración de función, la cual será la función que manejará los efectos secundarios del componente, y que ejecuta el siguiente bloque
        console.log("Se ejecuta efecto"); //Llamado a la consola del navegador, a la que se le aplica el método de imprimir sobre la misma, al cadena de texto enviada como argumento
        return despedida //Retorna el llamado de dicha función, la cual es un "clean up"
    **}**
    function despedida() { //Declaración de función que será el "clean up" del efecto secundario del componente, y que ejecuta el siguiente bloque
        console.log("Se ejecuta despedida");  //Llamado a la consola del navegador, a la que se le aplica el método de imprimir sobre la misma, al cadena de texto enviada como argumento
    }

    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <p>La prop show vale: {**props.show** ? "true" : "false"}</p> //Etiqueta de párrafo, la cual contiene texto, y dentro de llaves por ser código de JS, una condicional de operador ternario, la cual valida, desde el objeto "props", acceder a la propiedad "show" la cual es el estado actual del componente "App", y si su valor actual es el valor booleano "true", se muestra "true", de lo contrario si es valor es el valor booleano "false", se muestra "false"
            <p>La prop counter vale: {props.counter}</p>  //Etiqueta de párrafo, la cual contiene texto, y dentro de llaves por ser código de JS, del objeto "counter", acceder a la propiedad "show" la cual es el estado actual del componente "App"
            {esMayorA5 && <p>Y es mayor que 5</p>} //Dentro de llaves por ser código de JS, se valida la condición de que si el valor de la variable "esMayorA5" la cual es una condicional, mediante el operador and(&&), renderizar la etiqueta de párrafo la cual contiene texto, de lo contrario no se hace nada
        </div>
    );
}

function Cartel() { //Declación de función, la cual ejecuta el siguiente bloque
    **useEffect(efecto, []);** //Se llama a ejecutar la función hook para manejar efectos secundarios en componentes, la cual recibe como primer argumento, una función a ser ejecutada dependiente del segundo parámetro, el cual es un arreglo vacío, provocando que la función sea ejecutada la primera y última vez que se renderice el componente

    **function efecto() {** //Declaración de función, la cual será la función que manejará los efectos secundarios del componente, y que ejecuta el siguiente bloque
        console.log("Primer render"); //Llamado a la consola del navegador, a la que se le aplica el método de imprimir sobre la misma, al cadena de texto enviada como argumento
        return despedida //Retorna el llamado de dicha función, la cual es un "clean up"
    **}**
    function despedida() { //Declaración de función que será el "clean up" del efecto secundario del componente, y que ejecuta el siguiente bloque
        console.log("Último render"); //Llamado a la consola del navegador, a la que se le aplica el método de imprimir sobre la misma, al cadena de texto enviada como argumento
    }

    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <p>Soy un cartel</p> //Etiqueta de párrafo, la cual contiene texto
        </div>
    )
}

Elemento.propTypes = { //De dicha función componente, se accede a su propiedad estática "propTypes" que es un objeto para especificar los tipos de datos esperados de las propiedades(props) de un componente y asegurarse de que sean utilizadas correctamente, el cual es obtenido de la librería "prop-types", y se reasigna su valor para definir las validaciones de tipo para las propiedades "show" y "counter" del componente "Elemento"
    show: PropTypes.bool, //Se establece que, la propiedad "show" debe, desde la librería "PropTypes", ser un valor booleano
    counter: PropTypes.number //Se establece que, la propiedad "counter" debe, desde la librería "PropTypes", ser un valor numérico
}

EVENTOS:

Los eventos son interacciones que suceden sobre elementos dentro del HTML, Cuando usamos Javascript en páginas de HTML, Javascript puede “reaccionar” sobre estos eventos y así poder darle algún comportamiento.

Algunos de los los eventos más comunes son:

Click Events
Form Events
Keyboard Events
Mouse Events

EVENT BUBBLING:

Este proceso inicia cuando un elemento ha ejecutado el evento y este se propaga en cadena dentro de los elementos que se contienen dentro de la jerarquía, empezando desde el elemento hijo más profundo y siendo desencadenados los eventos del mismo tipo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div **onclick="alert('div')"**> <!--Etiqueta contenedora de bloque, la cual posee como atributo, el manejador de eventos de click sobre el elemento, con valor de, ejecutar código de JS el cual es llamar a ejecutar la función de de ventana emergente, la cual muestra la cadena de texo enviada como argumento-->
            <p **onclick="alert('p')"**> <!--Etiqueta de párrafo, la cual posee como atributo, el manejador de eventos de click sobre el elemento, con valor de, ejecutar código de JS el cual es llamar a ejecutar la función de de ventana emergente, la cual muestra la cadena de texo enviada como argumento-->
                <button **onclick="handleClick()"**>Click me</button> <!--Etiqueta de botón, la cual posee como atributo, el manejador de eventos de click sobre el elemento, con valor de, jecutar código de JS el cual es llamar a ejecutar dicha función desde el archivo de JS-->
            </p>
        </div>
    </div>
    <script src="./main.js"></script>
</body>
</html>

function **handleClick**() { //Declaración de función, la cual ejecuta el siguiente bloque
    alert("button"); //Llamado a ejecutar la función de ventana emergente, la cual muestra la cadena de texto enviada como argumento
}

Para evitar la propagación de los eventos se utiliza la función *********************stopPropagation().*********************

<div onclick="alert('div')"> <!--Etiqueta contenedora de bloque, posee la propiedad manejadora de eventos de hacer click sobre el elementos, con valor asignado de, dentro de comillas ejeuctar código de JS, siendo la función de ventana emergente, la cual muestra la cadena de texto enviada como argumento-->
    <p 
    onclick="**event.stopPropagation();** <!--Propiedad de manejador de eventos de click sobre el elemento, con valor de ejecutar código de JS, el cual es, al evento ejecutado el cual es el click sobre el elemento, se le aplica el método de detener la propagación del evento en la jerarquía, para solo ejecutarse en este elemento-->
    alert('p')">
        <button 
        onclick=**"handleClick(event)**"> <!--Propiedad de manejador de eventos de click sobre el elemento, con valor de ejecutar código de JS, el cual es, el llamado a ejecutar dicha dicha función desde el archivo de JS, a la cual se el envía el evento ejecutado como argumento-->
        </button>
    </p>
</div>

```jsx
function **handleClick**(**event**) { //Declaración de función, recibe como argumento el evento ejecutado, la cual ejecuta el siguiente bloque
    **event.stopPropagation();** //A dicho evento ejecutado, se le aplica el método de detener la propagación del mismo en la jerarquía, para solo ejecutarse en este elemento
    alert("button"); //Llamado a ejecutar la función de ventana emergente, la cual muestra la cadena de texto enviada como argumento
}
```

SYNTHETIC EVENT:

Ya que cada navegador tiene un comportamiento distinto de como funcionan lo eventos, a pesar de que dichos eventos sean muy similares algunos navegadores poseen propiedades que otros no, esto genera mucha inconsistencia, teniendo que crear una lógica para cada uno de los navegadores.

Es una implementación ***************************cross-browser*************************** por arriba de los eventos nativos del navegador.
Normaliza los eventos para que las propiedades de los eventos sean consistentes en en diferentes navegadores.

Dentro de dicha funcionalidad hay distintos tipos de atributos que vienen incluidos dentro de éste evento sintético, pero sin contener todas las propiedades de un evento nativo dentro del navegador, para ello se puede utiliza el atributo: DOMEvent nativeEvent.

NOMALIZACIÓN:

Para normalizar se utiliza siempre *******lower camelCase*******, lo cual es que la primer palabra se coloca en minúsculas y las siguientes palabras comenzarán en mayúsculas.

Para acceder a un evento en react, se hace directo en la etiqueta HTML de JSX con los atributos de manejadores de eventos, los cuales utilizan la sintaxis *******lower camelCase*******.

//JS
function handleClick() { //Declaración de función, la cual ejecuta el siguiente bloque
    alert("button"); //Llamado a ejecutar la función de ventana emergente, la cual muestra la cadena de texto enviada como argumento
}

//React
<button **onClick=**"handleClick**"**>Click me</button> //Etiqueta HTML JSX de botón, el cual posee como atributo el evento sentético de click sobre el elemento, con valor de llamar a dicha función anterior

FORMULARIOS:

Los formularios en HTML tienen comportamientos por defecto en los navegadores y en muchos casos se requiere evitar dichos comportamientos por defecto para crear una propia funcionalidad de manera manual.

Para prevenir los comportamientos por defecto al enviar los formularios:

Al evento ***********onsubmit*********** del formulario *************************se le aplica el método **preventDefault()*****.

<form action="" method="post" **onsubmit="event.preventDefault()**"> <!--Eiqueta de formulario, la cual posee los atributos de "acción" para la petición a la ruta web, el de "método" con valor para "publicar", y el manejador de eventos de "entregar" los datos del formulario con valor de código de JS de hacer referencia al evento ejecutado, y aplicar el método para prevenir el comportamiento por defecto de dicho evento de "entregar"-->
    <div> <!--Etiqueta contenedora de bloque,-->
        <label for="name">Name</label> <!--Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto-->
        <input type="text" name="name" id="name"> <!--Etiqueta de ingreso de datos, posee los atributo de "tipo" con valor para ser de texto, el de "nombre" que es el nombre del control, el cual es enviado con los datos del formulario, y un selector "identificador" el cual lo enlazará con el label correspondiente-->
    </div>
    <div> <!--Etiqueta contenedora de bloque,-->
        <label for="email">Email</label> <!--Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "for" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto-->
        <input type="email" name="email" id="email"> <!--Etiqueta de ingreso de datos, posee los atributo de "tipo" con valor para ser de email, el de "nombre" que es el nombre del control, el cual es enviado con los datos del formulario, y un selector "identificador" el cual lo enlazará con el label correspondiente-->
    </div>
    <div> <!--Etiqueta contenedora de bloque-->
        <button>Send</button> <!--Etiqueta de botón, contiene texto-->
    </div>
</form>

CONTROLLED COMPONETS:

Éstos componentes son aquellos que pueden mantener su propio estado y la funcionalidad es ejecutada por React. Dichos componentes son controlados por completo directamente por la lógica que se les aplique, mediante las propiedades enviadas al componente o la funcionalidad de React.

Se recomienda controlar los formularios.

**import { useState } from "react";** //Se importa la función "useState", desde la librería de react

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente JSX
    **const [name, setName] = useState('name');** //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, la cadena de texto "name"
    **const [email, setEmail] = useState('email');** //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, la cadena de texto "email"

    **const handleSubmit = (e) => {** //Declaración de constante con valor asignado de, una función de flecha que recibe como argumento un evento ejecutado, así conviertiendo dicha constante en una función que adopta su nombre declarado, y que ejecuta el siguiente bloque 
        **e.preventDefault();** //A dicho evento enviado a la función, se le aplica el método para prevenir el comportamiento por defecto de dicho evento

        **if (name === '' || email === '') {** //Condicional que valida si, el valor actual del estado "name" es estrictamente igual que una cadena vacía, o si el valor actual del estado "email" es estrictamente igual que una cadena vacía, se ejecuta el siguiente bloque
            **alert('Falta algún campo');** //Se ejecuta la función de ventana emergente, la cual muestra la cadena de texto envida como argumento
            **return** //No se retorna nada para detener la ejecución
        **}

        console.log(name, email);** //LLamado a la consola del navegador, a la que se le aplica el método de imprimir sobre la misma, el valor actual del estado "name", y el valor actual del estado "email"
    **};**

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <div> //Etiqueta contenedora de bloque
            <form onSubmit={**handleSubmit**}> //Eiqueta de formulario, la cual posee el atributo manejador de eventos de "entregar" los datos del formulario con valor de código de JS entre llaves de llamar a dicha función y ejecutarla cuando se ejecute el dicho evento
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="name">Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, posee los siguientes atributos
                        value={name} //Atributo de "valor" con valor, dentro de llaves por ser código de JS, de el valor actual de uno de los estados del componente
                        type="text" //Atributo de "tipo" con valor, para ser de texto
                        name="name" //Atributo de "nombre" con valor, que es el nombre del control el cual es enviado con los datos del formulario
                        id="name" //Selector identificador el cual lo enlazará con el label correspondiente
                        **onChange={(e) => setName(e.target.value)}** //"prop"(propiedad) ****tributo manejador de eventos de "cambio de valor", con valor de ejecutar código de JS entre llaves, ejecutando una función flecha que recibe como argumento dicho evento ejecutado, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, del evento ejecutado acceder al elemento que lo ejecutó y obtener su valor, siendo dicho valor el nuevo valor actual del compente
                    />
                </div>
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="email">Email</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, posee los siguientes atributos
                        value={email} //Atributo de "valor" con valor, dentro de llaves por ser código de JS, de el valor actual de uno de los estados del componente
                        type="email" //Atributo de "tipo" con valor, para ser de correo electrónico
                        name="email" //Atributo de "nombre" con valor, que es el nombre del control el cual es enviado con los datos del formulario,
                        id="email" //Selector identificador el cual lo enlazará con el label correspondiente
                        **onChange={(e) => setEmail(e.target.value)}** //"prop"(propiedad) ****tributo manejador de eventos de "cambio de valor", con valor de ejecutar código de JS entre llaves, ejecutando una función flecha que recibe como argumento dicho evento ejecutado, la cual llama a ejecutar la función de actualización del estado la cual recibe como argumento, del evento ejecutado acceder al elemento que lo ejecutó y obtener su valor, siendo dicho valor el nuevo valor actual del compente
                    />
                </div>
                <div> <!--Etiqueta contenedora de bloque-->
                    <button>Send data</button> <!--Etiqueta de botón, contiene texto-->
                </div>
            </form>
        </div>
    );
}

UNCONTROLLED COMPONETS:

Al contrario de los componentes controlados, la funcionalidad es ejecutada desde el DOM.

En éstos componentes lo único que se puede hacer es obtener valores e información, NO se puede modificar o controlar.

REFERENCIAS:

Permite acceder directamente al elemento HTML mediante el DOM original.
Permite acceder a los datos del elemento, mas no modificarlos.
Ayuda para elementos que no pueden ser controlados directamente.
Ayuda a saber si un elemento ya fue definido o si éste existe.

Para asociar la referecia con el elemento:

En el elemento se accede a su propiedad *******ref={}*******, la cual la mayoría de los elementos HTML lo poseen.
Dentro de las llaves por ser código de JS, se coloca el nombre declarado que ejecuta el hook useRef().

Para acceder a la información de dichas referencias:

A la referencia declarada la cual es la que ejecuta el hook useRef(), se accede a su propiedad ***********current***********, la cual obtiene el elemento al que se está haciendo referencia.
De dicha propiedad ***********current********, se accede al valor mediante ****value*******.

Hay un solo elemento que no se puede controlar y solo se puede acceder vía referencia:

Cuando ***********************************se adjunta un archivo: Adjuntar.***********************************
Éste elemento *NO* posee la propiedad *******value*******.
Para acceder al archivo adjuntado:
- Se accede a su propiedad ***********current***********, la cual obtiene el elemento al que se está haciendo referencia
- Y mediante files, se accede a la lista de archivos adjuntados, el cual es un objeto al que se pueden acceder a su contenido mediante el índice del lo valore como en un arreglo.

**import { useRef } from "react";** //Se importa la función(hook) para referenciar elementos mediante el DOM, desde, la librería de React

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente JSX
    **const inputNameRef = useRef();** //Declaración de variable con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM
    **const inputEmailRef = useRef();** //Declaración de variable con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM
    **const attachedFile = useRef();** //Declaración de variable con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM

    const handleSubmit = (e) => { //Declaración de constante con valor asignado de, una función flecha, convirtiédola en una función, la cual recibe como argumento la referencia del evento eejcutado, la cual ejecuta el siguiente bloque
        e.preventDefault(); //A dicho evento ejecutado, se le aplica el método para prevenir su comportamiento por defecto, y asignale uno

        console.log( //A la consola del navegador, se le aplica el método de imprimir sobre la misma lo siguiente
            **inputNameRef.current.value,** //A dicho elemento referenciado desde el DOM, se accede al elemento, y a su valor
            **inputEmailRef.current.value** //A dicho elemento referenciado desde el DOM, se accede al elemento, y a su valor
        );

        **console.log**(**attachedFile.current.files[0].name**); //A la consola del navegador, a la que se le aplica el método de imprimir sobre la misma, de dicho elemento referenciado desde el DOM, se accede al elemento, a la lista(objeto) del "archivos", se accede al primer elemento mediante su índice, y se accede a su propiedad de "nombre"
    };

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <div> //Etiqueta contenedora de bloque
            <form onSubmit={handleSubmit}> //Etiqueta de formulario, posee el atributo manejador de eventos del evento de entregar los datos del formualrio, con valor dentro de llaves por ser código de JS, de llamar a dicha constante función apra ser ejecutada al momento de detectar la ejecución de dicho evento
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="name">Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, posee los siguientes atributos
                        type="text" //Atributo de "tipo" con valor, para ser de texto
                        name="name" //Atributo de "nombre" con valor, que es el nombre del control el cual es enviado con los datos del formulario
                        id="name" //Selector identificador el cual lo enlazará con el label correspondiente
                        **ref={inputNameRef}** //Propiedad de "referencia" para vincular el hook para acceder al elemento que posee ésta propiedad, con valor de, en código de JS dentro de llaves, dicha constante, la cual será éste elemento
                    />
                </div>
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="email">Email</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, posee los siguientes atributos
                        type="email" //Atributo de "tipo" con valor, para ser de correo electrónico
                        name="email" //Atributo de "nombre" con valor, que es el nombre del control el cual es enviado con los datos del formulario
                        id="email" //Selector identificador el cual lo enlazará con el label correspondiente
                        **ref={inputEmailRef}** //Propiedad de "referencia" para vincular el hook para acceder al elemento que posee ésta propiedad, con valor de, en código de JS dentro de llaves, dicha constante, la cual será éste elemento
                    />
                </div>
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="file">Adjuntar</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <input //Etiqueta de ingreso de datos, posee los siguientes atributos
                        type="file" //Atributo de "tipo" con valor, para ser de carga de archivos
                        name="file" //Atributo de "nombre" con valor, que es el nombre del control el cual es enviado con los datos del formulario
                        id="file" //Selector identificador el cual lo enlazará con el label correspondiente
                        **ref={attachedFile}** //Propiedad de "referencia" para vincular el hook para acceder al elemento que posee ésta propiedad, con valor de, en código de JS dentro de llaves, dicha constante, la cual será éste elemento
                    />
                </div>
                <div> //Etiqueta contenedora de bloque
                    <button>Send data</button> <!--Etiqueta de botón, contiene texto-->
                </div>
            </form>
        </div>
    );
}

REFERENCIAS:

Las referencias o mejor conocidas dentro de React como Refs, nos permiten acceder a propiedades del elemento dentro del DOM directamente.

No usar Ref:
- Para simular comportamientos de componentes controlados (anti-patterns).
Usar Ref:
- Solo usamos refs cuando necesitemos implicitamente llamar a un comportamiento que React no nos permita controlar.
- Integrar con librerías de terceros.
- Gestionar focus, text selection, etc.
- Detectar si el elemento existe o no.
- Cuando haya necesidad de acceder a un elemento del DOM.

Para acceder a las referencias:

se utiliza el hook *****useRef()****, la cual debe ser asignada a una variable, y dicha variable debe ser enlazada a un elemento de etiqueta HTML JSX mediante la propiedad de "ref={}*":

**import { useEffect, useRef } from "react";** //Se importan la funciónes(hooks) para  referenciar elementos mediante el DOM, desde, la librería de React

export default function DemoFocus() { //Se exporta como valor por defecto, la declaración de fucnión que será un componente JSX, la cual eecuta el siguiente bloque
    **const inputRef = useRef();** //Declaración de variable con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM

    useEffect(() => { //Se llama a ejecutar la función para manejar los efectos secundarios del componente, la cual recibe como primer argumento una función flecha, la cual ejecuta el siguiente bloque 
        console.log("Mounted"); //A la consola del navegador, se le aplica el método de imprimir sobre la misma, la cadena de texto envida como argumento
        console.log(**inputRef**); //A la consola del navegador, se le aplica el método de imprimir sobre la misma, el valor de dicha referencia, el cual es el elemento del DOM, que en su propiedad "ref" tenga asignado dicha referencia
        if (**inputRef.current**) { //Condicional que valida que, si, de dicho elemento referenciado desde el DOM, se accede al elemento, para validar si existe al obtener valor "true", ejecutando el siguiente bloque si se cumple dicha condición
            **inputRef.current.focus()**; //A dicho elemento referenciado desde el DOM, se accede al elemento, y se aplica el método para hacer focus sobre el mismo
        }
    }, []); //Como segundo argumento, recibe un arreglo vacío, así ejecutando  el efecto la primera y última vez que se renderice el componente

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <input type="text" **ref={inputRef}**/> //Etiqueta de ingreso de datos, posee el atributo de "tipo" con valor para ser de texto, y la propiedad de "referencia" para vincular el hook para acceder al elemento que posee ésta propiedad, con valor de, en código de JS dentro de llaves, dicha constante la cual será éste elemento
    );
}

export function DemoFocusDos() { //Se exporta ladeclaraciónde función que será un compente, la cual ejecuta el siguiente bloque
    **const inputRef = useRef();** //Declaración de variable con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM
    const handleClick = () => { //Declaración de constante con valor asignado de, una función flecha, convirtiédola en una función, la cual ejecuta el siguiente bloque
        **inputRef.current.focus()**; //A dicho elemento referenciado desde el DOM, se accede al elemento, y se aplica el método para hacer focus sobre el mismo
        console.log(**inputRef.current.value**); //LLamado a la consola del navegador, a la que se le aplica el método para imprimir sobre la misma, a dicho elemento referenciado desde el DOM, se accede al elemento, y a su valor
    }

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            <input type="text" **ref={inputRef}**/> //Etiqueta de ingreso de datos, posee el atributo de "tipo" con valor para ser de texto, y la propiedad de "referencia" para vincular el hook para acceder al elemento que posee ésta propiedad, con valor de, en código de JS dentro de llaves, dicha constante la cual será éste elemento
            <button onClick={handleClick}>Focus</button> //Etiqueta de botón, posee la propiedad manejadora de eventos para el evento de click sobre el mismo, con valor dentro de llaves por ser código de JS, de llamar a dicha constante función para ser ejecutada cuado se ejecute dicho evento, y la cual contiene texto
        </>
    );
}

forwardRef():

Esta función es necesaria para poder crear un componente funcional que soporte el uso de referencias (refs).

Esta técnica la vamos a utilizar cuando nos veamos en la necesidad de aislar funcionalidad.

Esto significa que nos permitirá no perder la referencia del elemento aunque este en otro componente.

Es una forma en la cual no se pierde la referencia que se tiene desde dentro para utilizarla desde fuera, *****************solamente como referencia del elemento que se está seleccionado*****************, no del componente.

En resumen, ayuda a no perder la referencia del elemento que esté en otro componente y así mismo poderlo reutilizar en alguna otra parte del código.

Para implementarlo:

Se debe importar la función forwardRef desde la librería de React. Dicha función ayuda a contener un componente y le agrega propiedades para poder tener acceso a esa información.
Al llamar a ejecutar la función forwardRef(), se le envía un componente como argumento, así se le indica que se le hace una devolución de la referencia hacia el componente padre que lo esté llamando.
Al componente que será enviado como argumento a la función forwardRef(), a demás de poseer el parámetro para recibir las “*****props**”, posee el parámetro **ref***** para recibir una referencia la cual será la referencia que se obtiene desde la función forwardRef() la cual es la que se va a asociar a la referencia que se está aplicando desde afuera.

Para obtener la referencia de un elemento dentro de un componente:

Al llamar a ejecutar el componente como etiqueta de HTML JSX, se le coloca la propiedad *********************ref={}********************* a la cual se le asigna como valor dentro de llaves por ser código de JS, la variable/constante que utiliza el hook *****useRef()*****.
Así se le agrega la propiedad *********ref={}********* al componente, la cual hará referencia al elemento contenido dentro del componente que posea la propiedad *********ref={}********* la cual tiene el valor que se envíe al parámetro ***ref*** del componente que posee dicho elemento contenido.

//InputForward.jsx

**import { forwardRef } from "react";** //Se importa la función "forwardRef", desde, la librería de React, para poder crear un componente funcional que soporte el uso de referencias (refs)

**function InputForward(props, ref) {** //Declaración de función, la cual posee el parámetro para recibir el objeto de propiedades(props), y el parámetro para recibir la referencia que se utilizará para acceder al elemento interno del componente, en este caso, el input
    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            <label htmlFor="input">{props.label}</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene dentro de llaves por ser código de JS, del objeto de "props" enviado al componente, acceder a la propiedad label el cual será un elemento label
            **<input type="text" ref={ref} id="input"/>** //Etiqueta de entrada de datos, la cual posee la propiedad de "tipo" con valor para ser de texto, y la propiedad de "referencia" con valor dentro de llaves por ser código de JS, de la referencia pasada al parámetro del componente, esto permitirá que la referencia se enlace al elemento input interno del componente, y un selector identificaor para enlazarlo con su respectivo label
        </>
    );
}

**export default forwardRef(InputForward);** //Se exporta como valor por defecto, llamar a ejecutar la función "forwardRef", la cual recibe como argumento, el componente InputForward, esto permite que el componente pueda ser utilizado por un componente padre que necesita acceder al elemento input interno utilizando una referencia

//App.jsx

import { useEffect, **useRef** } from "react"; //Se importan los hooks useEffect y useRef de la librería de React, el hook useRef se utilizará para crear una referencia que apuntará al input interno del componente "ForwardRef"
**import ForwardRef from "./components/inputForward";** //Se importa el componente "**ForwardRef**", desde, su ruta de archivo

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, y que ejecuta el siguiente bloque
    **const inputRef = useRef();** //Declaración de constante con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM, el cual es el input interno del componente "ForwardRef"

    useEffect(() => { //Se llama a ejecutar la función para manejar los efectos secundarios del componente, la cual recibe como primer argumento una función flecha, la cual ejecuta el siguiente bloque
        **console.log("ref input", inputRef);** //LLamado a la consola del navegador, a la que se le aplica el método para imprimir sobre la misma, la cadena de texto, y el valor de dicha constante, el cual es el elemento contenido dentro del componente **ForwardRef** al que se le hace referencia
        handleFocusForward(); //Se llama a ejecutar dicha constante función
    }, []) //Como segundo argumento, recibe un arreglo vacío, así ejecutando  el efecto la primera y última vez que se renderice el componente

    const handleFocusForward = () => { //Declaración de función con valor asignado de, una función de flecha, así convirtiéndola en una función, y que ejecuta el siguiente bloque
        **inputRef.current.focus();** //De dicha referencia que es el elementos, se accede al elemento mismo, y se le aplica el método para hacer "enfoque" sobre el mismo, para eso se utilizó la referencia
    }

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <div> //Etiqueta contenedora de bloque
            **<ForwardRef ref={inputRef} label="Nombre"/>** //Se llama a ejecutar dicho componete como etiqieta HTML JSX, la cual posee la propiedad de "referencia" la cual fue dada mediante la función **forwardRef** y que tiene valor asignado de, vincular la referencia inputRef para acceder al elemento contenido dentro de éste componente, al que se quiere acceder y que también tiene la propiedad ref, siendo así que la constante **inputRef** es la referencia del elemento input contenido dentro del componente, y también se le pasa una propiedad "label" con el valor "Nombre", así se vincula con la referencia "inputRef" para que el componente padre ("App") pueda acceder a él.
        </div>
    );
}

useImperativeHandle():

Al igual que el ref, este hook nos permitirá de igual forma pasar la referencia de un elemento para poder utilizarla dentro de un componente, a diferencia de utilizar directamente el ref que se asoció a un elemento, la referencia es asociada a useImperativeHandle() para indicar que nosotros vamos a personalizar los datos o atributos que se retornan a esta referencia.

Sin embargo, además nos permitirá personalizar lo que se regresa en la referencia, ya sea para devolver algún dato/función que nos permita cambiar su comportamiento.

Para implementarlo:

Se debe importar la función useImperativeHandle desde la librería de React.

Al llamar a ejecutar la función forwardRef(), posee:

Como primer parámetro para recibir el argumento que será una referencia de un elemento la cual es la que va a llegar desde donde se quiere obtener.
Como segundo parámetro, una función flecha callback la cual va a retornar lo que se requiera.

//Slider.jsx

**import { forwardRef, useImperativeHandle } from "react"**; //Se importan las funciones "forwardRef" para pasar "refs" de un componente secundario al componente padre, y "useImperativeHandle" que permite exponer funciones específicas del componente hijo a través del "ref" del componente padre
import { useKeenSlider } from "keen-slider/react"; //Se importa el hook "useKeenSlider" desde, librería "keen-slider" para react, que permite inicializar y utilizar el slider
import 'keen-slider/keen-slider.min.css'; //Se importa un archivo de CSS, desde su ruta

const Slider = (props, ref) => { //Declaración de constante que será un compoente JSX, con valor asignado de una función flecha, la cual posee como primer parámetro para recibir como argumento el objeto "props", y como segundo parámetro para recibir como argumento una "referencia" para poder ser usada en un componente padre
    **const [sliderRef, intanceRef] = useKeenSlider()**; //Declaración de constante con sintaxis de destructuración de arreglos, siendo el primer valor una referencia que debe adjuntarse al contenedor del slider (div.keen-slider en este caso) para que funcione correctamente, y el segundo valor una referencia al objeto de instancia del slider que representa el objeto de instancia del slider que contiene varios métodos y propiedades útiles para controlar y gestionar el slider los cuales son métodos como "next" y "prev" para controlar la navegación del slider, y tiene valor asignado de, llamar a ejecutar dicho hook para acceder a dichos valores destructurados

    **useImperativeHandle(ref, () => {** //Se llama a ejecutar el hook que permite exponer funciones específicas del componente hijo a través del "ref" del componente padre, la cual recibe como primer argumento es la "ref" que se pasa al componente hijo (en este caso, al componente Slider), y como segundo argumento reibe una función de flecha que debe devolver un objeto para personalizar lo que se retornará a dicha referencia, y que ejecuta el siguiente bloque
        **return {** //Se retorna un objeto con las siguientes propiedades
            **next: intanceRef.current.next,** //Propiedad del objeto, con valor de, de dicho objeto que posee propiedades para controlar y gestionar el slider, con "current" se accede al dicho objeto, para poder acceder a su método para avanzar al siguiente slide en el slider
            **prev: intanceRef.current.prev** //Propiedad del objeto, con valor de, de dicho objeto que posee propiedades para controlar y gestionar el slider, con "current" se accede al dicho objeto, para poder acceder a su método para retroceder al anterior slide en el slider
        **}
    })**;

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            **<div className="keen-slider" ref={sliderRef}**> //Etiqueta contenedora de bloque, la cual posee un selector de clase con valor de "keen-slider", y posee el atributo de referencia que se obtuvo a partir del hook "useKeenSlider" para asegurar que el slider pueda funcionar correctamente al vincular la referencia con el contenedor del slider.
                <div className="keen-slider__slide">1</div> //Etiqueta contenedora de bloque, la cual posee un selector de clase con valor de "keen-slider__slide" y contiene texto
                <div className="keen-slider__slide">2</div> //Etiqueta contenedora de bloque, la cual posee un selector de clase con valor de "keen-slider__slide" y contiene texto
                <div className="keen-slider__slide">3</div> //Etiqueta contenedora de bloque, la cual posee un selector de clase con valor de "keen-slider__slide" y contiene texto
            </div>
        </>
    );
}

**export default forwardRef(Slider)**; //Se exporta como valor por defecto, el componente "Slider" utilizando "forwardRef", lo que permite que el componente padre pueda acceder a las funciones next y prev proporcionadas por el ref de este componente.

```jsx
//App.jsx

**import { useEffect, useRef } from "react"**; //Se importan los hooks useEffect y useRef de la librería de React, el hook "useEffect" maneja los efectos secundarios de un componente, y le hook "useRef" se utilizará para crear una referencia que apuntará al input interno del componente "ForwardRef"
**import Slider from "./components/Slider"**; //Se importa como valor por defecto, dicho componente, desde, su ruta

export default function App() { //Se exporta como valor por defecto, la declaración de función que será un componente, y que ejecuta el siguiente bloque
    **const sliderRef = useRef()**; //Declaración de constante con valor asignado de, llamar a ejecutar el hook para referenciar y acceder a un elemento del DOM, el cual será el que en su atributo "ref" tenga ésta refencia asignada, para acceder a la instancia del componente "Slider"

    useEffect(() => { //Se llama a ejecutar la función para manejar los efectos secundarios del componente, la cual recibe como primer argumento una función flecha, la cual ejecuta el siguiente bloque
        **console.log("ref input", sliderRef)**; //A la consola del navegador, se le aplica el método para imprimir sobre la misma, dicha cadena de texto, y el valor de dicha referencia, el cual es el objeto con métodos para controlar y gestionar el slider
    }, []) //Como segundo argumento, recibe un arreglo vacío, así ejecutando  el efecto la primera y última vez que se renderice el componente

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <div> //Etiqueta contenedora de bloque
            **<button onClick={() => sliderRef.current.prev()}>Prev</button>** //Etiqueta de botón, la cual posee la propiedad manejadora de eventos del evento e click sobre éste elemento, con valor asignado dentro de llaves por ser código de JS, una función de flecha callback la cual ejecuta, de dicha referencia que es el objeto con métodos para controlar y gestionar el slider, acceder a dicho objeto, y llamar a ejecutar su propiedad método "prev()", y contiene texto
            **<button onClick={() => sliderRef.current.next()}>Next</button>** //Etiqueta de botón, la cual posee la propiedad manejadora de eventos del evento e click sobre éste elemento, con valor asignado dentro de llaves por ser código de JS, una función de flecha callback la cual ejecuta, de dicha referencia que es el objeto con métodos para controlar y gestionar el slider, acceder a dicho objeto, y llamar a ejecutar su propiedad método "next()", y contiene texto
            **<Slider ref={sliderRef}/>** //Se llama a ejecutar dicho componente para como etiquta HTML para ser renderizado, y recibe la "prop" de "referencia" con valor asignado dentro de llaves por ser código de JS, dicha referencia "sliderRef" lo que permite que el componente App acceda y controle la instancia del slider a través de la referencia, esto hace que los botones "Prev" y "Next" controlen el desplazamiento del slider
        </div>
    );
}
```

LISTAS Y LLAVES:

Las listas nos ayudan a renderizar un set de elementos con diferentes tipos de información.

KEYS:

Son una forma de identificar un elemento de otro en las listas que son repetitivas.

Las llaves “*****keys*****” deben ser identificadores únicos para no causar conflictos entre elementos.

import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes
import { useState } from "react"; //Se importa la función hook "useState", desde la librería de react, para agregar el estado a los componentes

**const data = [** //Declaración de constante con valor asignado de, un arreglo, el cual contiene los siguientes objetos
    **{** //Objeto, posee las siguientes propiedades
        **id: 1,** //Propiedad del objeto, con valor numérico 1
        **name: 'Rodrigo',** //Propiedad del objeto, con valor de una cadena de texto
        **question: '¿What is React?'** //Propiedad del objeto, con valor de una cadena de texto
    **},
    {
        id: 2,** //Propiedad del objeto, con valor numérico 1
        **name: 'Angelica',** //Propiedad del objeto, con valor de una cadena de texto
        **question: '¿What is design?'** //Propiedad del objeto, con valor de una cadena de texto
    **}
];**

const Question = (**{id, name, question}**) => { //Declaración de constante que será un componente, con valor de una función de flecha, la cual recibe como argumento la destructuración de un objeto para acceder individualmente a cada una de las propiedades evitando mutarlas las cuales serán "propiedades", conviertiendo la constante en una función, la cual ejecuta el siguiente bloqu
    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            <h2>UserId: **{id}**</h2> //Etiqueta de subtítulo, la cual contiene texto, y dentro de llaves por ser código de JS, el valor de dicha propiedad "id" destructurada del objeto "prop" envíado a la función componente "Question"
            <span>**{name}**</span> //Etiqueta contenedora en línea, la cual contiene dentro de llaves por ser código de JS, el valor de dicha propiedad "name" destructurada del objeto "prop" envíado a la función componente "Question"
            <p>**{question}**</p> //Etiqueta de párrafo, la cual contiene dentro de llaves por ser código de JS, el valor de dicha propiedad "question" destructurada del objeto "prop" envíado a la función componente "Question"
        </>
    )
}

export default function List() { //Se exporta como valor por defecto, la declaración de función que será un componente, y que ejecuta el siguiente bloque 
    ****const [**question**, setQuestion] = useState**(data);** //Declaración de constante la cual será el estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de dicho arreglo para poder acceder a los objetos y sus propiedades

    return ( //Se retorna dentro de paréntesis por ser un componente JSX
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            <ul> //Etiqueta de lista desordenada, la cual contiene dentro de llaves por ser código de JS, lo siguiente
                **{question.map((question) =>** //Sobre el estado actual del componente, el cual es el arreglo "data", se aplica el método de crear un nuevo arreglo aplicando una función por cada elemento que es un objeto dentro del arreglo, el cual recibe como argumento una función de flecha que por cada elemento "question" ejecuta el sigueinte bloque
                    **<Question {...question} key={question.id} />** //Se llama a ejecutar dicho componente como etiqueta HTML para ser renderizado, el cual recibe como "props" un objeto utilizando el "spread operator" el cual es el objeto dentro del arreglo "data" así recibe las propiedades "id", "name", y "question" correspondientes a cada objeto dentro del arreglo "data", también posee el atributo "key" para dar una identificación única a cada elemento en la lista, con valor asignado dentro de llaves por ser código de JS, del objeto dentro del arreglo "data", acceder a su propiedad "id" siendo asignado su valor           
                **)}**
            </ul>
        </>
    );
}

Question.propTypes = { //Al componente "Question", se accede a su propiedad "propTypes" para especificar los tipos de datos esperados para las props, a la cual se le asigna como valor, un objeto con las siguientes propiedades
    id: PropTypes.number, //Se establece que, la propiedad "id" debe, desde la librería "PropTypes", ser un valor numérico
    name: PropTypes.string, //Se establece que, la propiedad "name" debe, desde la librería "PropTypes", ser un valor de cadena de texto
    question: PropTypes.string, //Se establece que, la propiedad "question" debe, desde la librería "PropTypes", ser un valor de cadena de texto
}

EJEMPLO:

import { useState } from "react"; //Se importa la función hook "useState", desde la librería de react, para agregar el estado a los componentes
import PropTypes from "prop-types"; //Se importa la librería PropTypes, desde, "prop-types" que se utiliza para declarar y validar los tipos de las propiedades que se pasan a los componentes

export const Question = () => { //Se importa como valor por defecto, la declaración de constante que será un componente, con valor asignado de, una funicón de flecha que ejecuta el siguiente bloque, así la constante se convierte en una función
    const [name, setName] = useState(""); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de una cadena de texto vacía
    const [question, setQuestion] = useState(""); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, el valor de una cadena de texto vacía
    const [questionsList, setQuestionsList] = useState([]); //Declaración de constante la cual será un estado del componente, en la cual se utiliza la sintaxis de destructuración de arreglos, siendo el primer valor, el valor actual del estado el cual empieza siendo el valor por defecto enviado a "useState", y como segundo valor la función que actualizará el estado, dicha constante tiene valor asignado de, llamar a ejecutar la función importada para el estado del componente, la cual recibe como argumento para el valor por defecto del componente, un arreglo vacío

    const handleSubmit = (e) => { //Declaración de constante, con valor asignado de una función de flecha la cual recibe como argumento un evento ejecutado, la cual ejecuta el siguiente bloque, así cual controlará el comportamiento al enviar los datos del formulario
        e.preventDefault(); //A dicho evento ejecutado, se le aplica el método para prevenir su comportamiento por defecto, para controlar su comportamiento
        setQuestionsList([ { name, question }, ...questionsList]); //Se llama a ejecutar la función de actualización del estado "questionsList" la cual es un arreglo, la cual recibe como argumento, un nuevo arreglo, el cual es una copia del arreglo "questionsList", el cual recibe un objeto que representa la "pregunta a ser renderizada" el cual posee dos propiedades cuyos valores provienen de aambos estados del componente, así cada nueva pregunta será colocada al inicio de la lista para ser renderizada al incio del componente, y como segundo elemento dentro del nuevo arreglo, se utiliza operador de propagación que toma cada elemento del arreglo "questionsList" y los incluye en el nuevo array. Esto asegura que no estamos modificando directamente el array questionsList original, así se mantendrán renderizadas las preguntas anteriores y las nuevas preguntas
        setName(""); //Se llama a ejecutar la función de actualización del estado "name", la cual recibe como argumento, una cadena vacía, pará así actualizar el estado, que esta cadena vacía sea en nuevo valor actual del estado, para que así se vacie el campo del input que controla este estado
        setQuestion(""); //Se llama a ejecutar la función de actualización del estado "question", la cual recibe como argumento, una cadena vacía, pará así actualizar el estado, que esta cadena vacía sea en nuevo valor actual del estado, para que así se vacie el campo del input que controla este estado
    };

    const handleNameChange = (e) => { //Declaración de constante, con valor asignado de una función de flecha la cual recibe como argumento un evento ejecutado, la cual ejecuta el siguiente bloque, así cual controlará el comportamiento al detectar un cambio de valor en el input "name"
        setName(e.target.value); //Se llama a ejecutar la función de actualización del estado "name", la cual recibe como argumento, del evento ejecutado, acceder al elemento que lo ejecutó, y acceder a su valor, para que así cada vez que se actualice el valor del input que ejecuta el evento "onChange", ese valor sea el nuevo valor actual del estado
    };

    const handleQuestionChange = (e) => { //Declaración de constante, con valor asignado de una función de flecha la cual recibe como argumento un evento ejecutado, la cual ejecuta el siguiente bloque, así cual controlará el comportamiento al detectar un cambio de valor en el input "question"
        setQuestion(e.target.value); //Se llama a ejecutar la función de actualización del estado "question", la cual recibe como argumento, del evento ejecutado, acceder al elemento que lo ejecutó, y acceder a su valor, para que así cada vez que se actualice el valor del input que ejecuta el evento "onChange", ese valor sea el nuevo valor actual del estado
    };

    return ( //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <> //Fragmento de React para contener el componente sin ser renderizado dentro de otro elemento
            <form onSubmit={handleSubmit}> //Etiqueta de formulario, la cual posee el atributo manejador de eventos del evento de "entrega" de datos del formulario, con valor asignado dentro de llaves por ser código de JS, de ejecutar dicha función para controlar el comportamiento de dicho evento
                <div> //Etiqueta contenedora de bloque
                    <input //Etiqueta de ingreso de datos, la cual posee las siguiente propiedades
                        type="text" //Propiedad de tipo, con valor para ser de "texto"
                        id="name" //Selector identificador, con valor de cadena de texto, para enlazarlo con su respectivo label
                        value={name} //Propiedad de valor, con valor dentro de llaves por ser código de JS, de el valor actual de su respectivo estado
                        onChange={handleNameChange} //Propiedad manejadora de eventos del evento de "cambio de valor" del input, con valor asignado dentro de llaves por ser código de JS, de ejecutar dicha función para controlar el comportamiento de dicho evento, cada vez que cambie el valor de éste input
                        required //Propiedad de "requerido" para que el vlaor de éste input sea obligatorio
                    />
                    <label htmlFor="name">Name</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                </div>
                <div> //Etiqueta contenedora de bloque
                    <label htmlFor="question">Question</label> //Etiqueta para etiquetar elementos de interfaz de usuario, posee el atributo "htmlFor" para enlazarla con el elemento correspondiente con valor de una cadena de texto la cual es la misma que el identificador del elemento a ser enlazado, y contiene texto
                    <br /> //Etiqueta de salto de línea
                    <input //Etiqueta de ingreso de datos, la cual posee las siguiente propiedades
                        type="text" //Propiedad de tipo, con valor para ser de "texto"
                        id="question" //Selector identificador, con valor de cadena de texto, para enlazarlo con su respectivo label
                        value={question} //Propiedad de valor, con valor dentro de llaves por ser código de JS, de el valor actual de su respectivo estado
                        onChange={handleQuestionChange} //Propiedad manejadora de eventos del evento de "cambio de valor" del input, con valor asignado dentro de llaves por ser código de JS, de ejecutar dicha función para controlar el comportamiento de dicho evento, cada vez que cambie el valor de éste input
                        required //Propiedad de "requerido" para que el vlaor de éste input sea obligatorio
                    />
                </div>
                <div> //Etiqueta contenedora de bloque
                    <button type="submit">Post</button> //Etiqueta de botón, posee la propiedad de "tipo" con valor para ser de "entregar" los valores del formulario, y contiene texto
                </div>
            </form>

            <div> //Etiqueta contenedora de bloque
                {questionsList.map((q, index) => ( //Dentro de llaves por ser código de JS, al estado actual del estado "questionsList" el cual es una lista, aplicar el método para crear un nuevo arreglo aplicando una fución a cada uno de los elementos dentro del arreglo, el cual reicibe como primer arguento, la referencia a cada uno de los elementos dentro de dicho arreglo, y como segundo argumento, el indice que será de cada uno de los elementos, y por cada elemento dentro de dicho arreglo, se ejecuta el siguiente bloque
                    <ListQuestions //Se llama a renderizar dicho componente, el cual posee las siguientes "props"(propiedades)
                        key={index} //Propiedad que se requiere cuando se renderiza una lista de componentes en React, ayuda a React a identificar de manera única cada elemento en la lista y mejora el rendimiento al realizar actualizaciones en la interfaz de usuario, con valor asignado dentro de llaves por ser código de JS, de el valor del índice del elemento, para que éste seá único
                        name={q.name} //Propiedad "prop" necesaria para el componente, con valor asignado dentro de llaves por ser código de JS, del elemento dentro de arreglo, acceder a su propiedad "name" para obtener su valor
                        question={q.question}  //Propiedad "prop" necesaria para el componente, con valor asignado dentro de llaves por ser código de JS, del elemento dentro de arreglo, acceder a su propiedad "question" para obtener su valor
                    />
                ))}
            </div>
        </>
    );
};

function ListQuestions(props) { //Declaración de función que será un componente, el cual posee un parámetro para recibir sus "props", y que ejecuta el siguiente bloque
    return (  //Se retorna una estructura de JSX, el cual será el componente a ser renderizado, siendo colocado entre paréntesis
        <div> //Etiqueta contenedora de bloque
            <h2>{props.name}</h2>  //Etiqueta de subtítulo, la cual contiene dentro de llaves por ser código de JS, del objeto de "propiedades", acceder a su propiedad de "name" para obtener su valor
            <p>{props.question}</p> //Etiqueta de párrafo, la cual contiene dentro de llaves por ser código de JS, del objeto de "propiedades", acceder a su propiedad de "question" para obtener su valor
        </div>
    );
}

ListQuestions.propTypes = { //Al componente "ListQuestions", se accede a su propiedad "propTypes" para especificar los tipos de datos esperados para las props, a la cual se le asigna como valor, un objeto con las siguientes propiedades
    name: PropTypes.string, //Se establece que, la propiedad "name" debe, desde la librería "PropTypes", ser un valor de cadena de texto
    question: PropTypes.string, //Se establece que, la propiedad "question" debe, desde la librería "PropTypes", ser un valor de cadena de texto
};

INTRODUCCIÓN A REACT Y JSX

Rodrigo Grau — Tue, 15 Aug 2023 00:54:08 +0000

[HISTORIA DE REACT:]
[¿CÓMO IDENTIFICAR COMPONENTES?]
[VIRTUAL DOM:]
[SINTAXIS - JSX:]

HISTORIA DE REACT:

Facebook inventó React para su uso interno en 2011 y lo convirtieron en código abierto en 2013.
En 2015 React tuvo su primer versión estable, empresas como Netflix y Airbnb empezaron a usarlo.

React es una biblioteca de JavaScript. Una biblioteca es código que resuelve problemas por nosotros. Las podemos agregar/modificar/eliminar en nuestro proyecto usando npm.

¿QUÉ PROBLEMAS RESUELVE REACT?

Intermediario entre desarrolladores y el DOM:
- No tenemos la necesidad de hablar directamente con la API del DOM.
Uso de componentes:
- ¿Tengo un problema complejo? Dividiéndolo se puede crear un componente con otros componentes dentro.
- Componentes:
  - Permite reutilización de código.
  - Son independientes.
Programación declarativa:
- Se le dan instrucción de *******cómo******* debe quedar.

¿CÓMO IDENTIFICAR COMPONENTES?

Un componente es un bloque de código que permite reutilizarlo, siendo comúnmente una función.
Para utilizar un componente, se hace mediante detección de patrones, donde dicho componente será utilizado o mostrado varias veces en distintos lugares de la página web.

Esto es detectado cuando hay similitudes entre elementos, ya sea porque se utiliza la misma estructura o la misma lógica, la cual será implementada en varios casos.

Cuando se crean componentes, se busca no crear componentes de más ni de menos.

Al crear componentes, los cuales son funciones, éstas deben declarar su nombre con *******************mayúscula.*******************

VIRTUAL DOM:

En las páginas web, tenemos que realizarle cambios al DOM. Estos cambios son muy costosos a medida que nuestro DOM se va volviendo más grande y complejo.

El Virtual DOM es una representación del DOM que se guarda en la memoria. Posibilita que React sea declarativo:

Se le dice a React en qué estado quiero que esté la página, y se hará cargo de cómo llevar al DOM a ese estado con la menor cantidad de cambios posibles.

Para ello, React utiliza su algoritmo “reconciliation” para hacer los cambios.

SINTAXIS - JSX:

JSX es “Syntactic Sugar”, lo cual es una sintaxis más amigable y fácil de comprender.

La sintaxis JSX nos permite tener Javascript y HTML en un mismo archivo:

Sólo se retorna un solo elemento, siendo que si se requiere que un elemento contenga varios elementos, estos tendrán que estar contenidos dentro del único elemento retornado.

Para evitar la complejidad en la creación de elementos HTML, React tiene la solución son los *************************, lo cual ayuda que los componentes necesarios se contengan en un “contenedor”, pero cuando se inspeccione el DOM, no se encontrará dicho “contenedor*”, así evitando agregar un nuevo nodo y aumentar la complejidad. Esto en caso de no necesitar un contenedor.
Todos los tags(etiquetas HTML) que abren deben cerrarse, deben de colocarse las etiquetas de apertura*<>* y cierre*</>* en todos los elementos.
camelCase en casi todos los atributos HTML.
Al agregar una clase a algún componente o elemento HTML, se debe de hacer mediante ***************className***************.
Para utilizar valores de variables dentro de una etiqueta de HTML, se utiliza llaves “{ }” donde dentro se coloca el nombre de la variable a utilizar.
Se pueden utilizar valores retornados desde funciones, para ello, se utiliza llaves “{ }” donde dentro se coloca el nombre de la función y se colocan paréntesis para ejecutarla.

//main.jsx

import { StrictMode } from "react"; //Se importan mediante su nombre, el componente "modo estricto", desde, la librería de react
import { createRoot } from "react-dom/client"; //Se importan mediante su nombre, la función "crear raíz", desde, la librería de react-dom
import App from "./App"; //Se importa como valor por defecto y con un nombre cualquiera, desde, la ruta de otro módulo 

const rootElement = document.getElementById("root"); //Declaración de variable con valor asignado de, del documento HTML obtener el elemento mediante su selector identificador, el cual es enviado como parámetro en cadena de texto
const root = createRoot(rootElement); //Declaración de variable con valor asignado de, ejecutar la función importada para "crear raíz", la cual recibe como argumento el elemento anterior obtenido, así se indicará dónde serán "mostrados" los componentes

root.render( //A dicho elemento que es donde serán "mostrado" los componentes, se le aplica la función de "mostrar" los componentes, la cual recibe como argumento lo siguiente
    **<StrictMode>** //Se coloca el componente "modo estricto" para resaltar posibles problemas en la aplicación 
        **<App />** //Se llama a ejecutar dicho componente importado, el cual es el elemento "section" retornado de dicha función, y se coloca como una etiqueta de HTML ya que será un elemento del DOM
    **</StrictMode>**
);

//App.jsx

function Profile() { //Declaración de función que será un componente, le cual ejecuta el siguiente bloque
    return **<img src="../public/images/rei.webp" alt="Rei Ayanami" className="image"/>**; ****************//Se retorna un solo elemento, el cual es una etiqueta de imagen, la cual posee los atributos de "fuente" con valor para obtener la imagen desde su ruta, el de "alternativo" para colocar un texto alternativo en caso de que no cargue la imagen, y posee un selector de clase declarado en camel case, dicha etiqueta es cerrada con "/>"
}

export default function Gallery() { //Se exporta como valor por defecto, una función la cual será un componente que contiene otros componentes, la cual ejecuta el siguiente bloque
    return ( //Se retorna dentro de paréntesis el componente, el cual es
        <Fragment> **//**Etiqueta de fragmento para no crear un nuevo nodo dentro del HTML pero que contiene todos los componentes siguientes
            **<h1>First child</h1>** //Etiqueta de título principal, la cual contiene texto
            **<Profile />** //Se llama a ejecutar dicho componente, el cual es el elemento "imagen" retornado de la función, y se coloca como una etiqueta de HTML ya que será un elemento del DOM
            **<Profile />** //Se llama a ejecutar dicho componente, el cual es el elemento "imagen" retornado de la función, y se coloca como una etiqueta de HTML ya que será un elemento del DOM
            **<Profile />** //Se llama a ejecutar dicho componente, el cual es el elemento "imagen" retornado de la función, y se coloca como una etiqueta de HTML ya que será un elemento del DOM
        **</Fragment>**
    );
}

//App.jsx

export default function Avatar() { //Se exporta como valor por defecto, una función la cual será un componente que contiene otros componentes, la cual ejecuta el siguiente bloque
    const avatar = "../public/images/rei.webp"; //Declaración de constante con valor asignado de, una cadena de texto la cual es la ruta para obtener una imagen
    const description = "Rei Ayanami"; //Declaración de constante con valor asignado de, una cadena de texto 
    function name() { //Declaración de función, la cual ejecuta el siguiente bloque
        return  "Rei"; //Se retorna una cadena de texto
    }
    return ( //Se retorna dentro de paréntesis el componente, el cual es
        **<div>** //Etiquta contenedora de blque
            **<p>{name()}</p>** //Etiqueta de párrafo, el cual contiene dentro de llaves el llamado a ejecutar dicha función para obtener la cadena de texto que retorna
            **<img
            className="avatar"
            src={avatar} 
            alt={description}/>** //Etiqueta de imagen la cual posee un selector de clase declarado en camelCase, y los atributos de "fuente" con valor de dicha variable, y el de "alternativo" con valor de dicha variable, ambas referencias de las variable entre llaves
            **<p>{description}</p>** //Etiqueta de párrafo, el cual contiene dentro de llaves el valor de dicha variable
        **</div>**
    );
}

EJEMPLO:

<!DOCTYPE html> <!--Etiqueta de declaración del tipo de archivo de y versión de HTML-->
<html lang="es"> <!--Etiqueta raíz contenedora de la pagina, posee el atributo de lenguaje, con el valor de inglés-->
  <head> <!--Etiqueta de los elementos no visibles de la pagina-->
    <meta charset="UTF-8" /> <!--Etiqueta de metadatos, posee el atributo de caracteres, con el valor de caracteres del español-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--Etiqueta de metadados, posee los atributos de nombre con el valor de la ventana del navegador, y el de contenido, con el valor para establecer el zoom inicial de la pagina con valores respecto al ancho del dispositivo y la escala inicial en 1.0-->
    <title>I'm Fronted Dev</title> <!--Etiqueta para colocar un titulo en la pestaña del navegador, contiene texto-->
  </head>
  <body> <!--Etiqueta del cuerpo de la pagina la cual contiene todos los elementos visibles de la pagina-->
    <div id="root"></div> <!--Etiqueta contenedora de bloque, la cual posee un selector identificador-->
    <script type="module" src="./src/main.jsx"></script> <!--Etiqueta de dinamismo mediante javascript, posee el atributo de tipo con valor para poder usar módulos, y el de recursos para obtener el archivo javascriptdesde su ruta-->
  </body>
</html>

//main.jsx

import { StrictMode } from "react"; //Se importa mediante su nombre declarado, el componente de modo estricto, desde, la librería de react
import { createRoot } from "react-dom/client";//Se importan mediante su nombre, la función "crear raíz", desde, la librería de react-dom
import { User } from "./App"; //Se importan mediante su nombre, el componente "User", desde, otro módulo mediante su ruta donde 

const rootElement = document.getElementById("root"); //Declaración de constante con valor asignado de, del documento HTML, obtener el elemento mediante su selector identificador el cual es enviado como argumento en cadena de texto
const root = createRoot(rootElement); //Declaración de variable con valor asignado de, ejecutar la función importada para "crear raíz", la cual recibe como argumento el elemento anterior obtenido, así se indicará dónde serán "mostrados" los componentes

root.render( //A dicha variable anterior que es donde se mostrarán los componentes, se le aplica el método para renderizar"mostrar" componentes, la cual recibe los siguiente componentes como argumento
    <StrictMode>  //Se coloca el componente "modo estricto" para resaltar posibles problemas en la aplicación 
        <User /> //Se llama a ejecutar dicho componente importado, el cual son los elementos dentro del "Fragment" retornados de dicha función componente, y se colocan como etiquetas de HTML ya que serán elementos del DOM
    </StrictMode>
);

//App.jsx

import { Fragment } from "react"; //Se importa el componente de fragmentos desde, la librería de react

let styles = { //Declaración de variable con valor asignado de un objeto
    height: "450px", //Propiedad del objeto, con valor de una cadena de texto, el cual será el alto de la imagen
    width: "350px", //Propiedad del objeto, con valor de una cadena de texto,el cual será el ancho de la imagen
    objectFit: "cover", //Propiedad del objeto, con valor de una cadena de texto, el cual será el comportamiento de redimensión para ajustar la imagen manteniendo su relación de aspecto recortando la imagen si es neecsario
    overflow: "hidden" //Propiedad del objeto, con valor de una cadena de texto, el cual será el comportamiento de ajuste de la imagen desbordada siendo recordarta
}

let user = { //Declaración de variable con valor asignado de un objeto
    name: "Rei",  //Propiedad del objeto, con valor de una cadena de texto
    description: "First child",  //Propiedad del objeto, con valor de una cadena de texto
    greeting: "I'm very tired of my life"  //Propiedad del objeto, con valor de una cadena de texto
}

function Profile() { //Declaración de función que será un componente, el cual ejecuta el siguiente bloque
    return <img src="../public/images/rei.webp" alt="Rei Ayanami" style={styles}/>; //Retorna un elemento HTML, el cual es una etiqueta HTML de imagen, la cual posee los atributos de "fuente" con valor de la ruta para obtener la imagen, el de "alternativo" con valor de un texto para cuando no sea visible la imagen, y el de "estilos" para colocar estilos en línea, con valor del valor de dicha variable, el cual es el objeto con las propiedades y valores de los estilos
}

export function User() { //Se exporta, la declaración de función que será un componente, el cual ejecuta el siguiente bloque
    let name = user.name; //Declaración de variable con valor asignado de, del objeto "users", obtener el valor de su propiedad "name"
    let description = user.description; //Declaración de variable con valor asignado de, del objeto "users", obtener el valor de su propiedad "description"
    let greeting = user.greeting; //Declaración de variable con valor asignado de, del objeto "users", obtener el valor de su propiedad "greeting"
    return ( //Se retorna un componente dentro de paréntesis
        <Fragment> //Se coloca el componente de fragmentos para retornar un solo componente que contenga más componentes sin crear un nuevo nodo 
            <h1>¡Hola! mi nombre es {name}</h1> //Etiqueta de título principal, la cual contiene texto y el valor dentro de llaves de dicha variable
            <Profile /> //Se llama a ejecutar dicho componente, la cual es una imagen
            <h2>{description}</h2> //Etiqueta de subtítulo, la cual contiene el valor dentro de llaves de dicha variable
            <p>{greeting}</p> //Etiqueta de párrafo, la cual contiene el valor dentro de llaves de dicha variable
        </Fragment>
    );
}