INTRODUCCIÓN A REACT Y JSX

• [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?

1. Intermediario entre desarrolladores y el DOM:
   • No tenemos la necesidad de hablar directamente con la API del DOM.
2. 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.
3. 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>
    );
}