ReactJS

Utilidades:

fnm => Administrador de versiones de NodeJS

npm => Instalar dependencias de NodeJS - Opción 1

pnpm ⇒ Instalar dependencias de NodeJS - Opción 2

Muy importante aplicar estos comandos en el PowerShell:

fnm list.remote ⇒ Lista las versiones de Node JS a instalar.

fnm list ⇒ Lista las versiones de Node JS instaladas.

fnm install "vxx.x.x" ⇒ Instala la versión de Node JS seleccionada.

fnm use "vxx.x.x" ⇒ Usa la versión Node JS seleccionada.

notepad $PROFILE ⇒ Crea un archivo de perfil.

fnm env --use-on-cd | Out-String | Invoke-Expression ⇒ Esto para

agregar dentro del archivo creado de PROFILE.

fnm uninstall "vxx.x.x" ⇒ Desinstalar la versión seleccionada de Node JS.

node --version ⇒ Ver la versión que está usando Node JS.

¿Qué es React?

● Es una biblioteca de Javascript para construir interfaces de usuario,

independientemente de donde se ha.
● Esto quiere decir que se puede utilizar para hacer paginas web,
aplicaciones móviles e incluso aplicaciones de terminal y es
agnóstico de la plataforma.
● Es declarativo y está basado en componentes.
 ○ Componentes ⇒ Son piezas que se van a ir reutilizando para
construir la interfaz.
● Es una biblioteca universal, quiere decir que se puede ejecutar tanto
en el cliente como en el servidor. Con ello reutilizar el código de la
parte del cliente y del servidor y unirlo en un solo.

¿Por qué React?

React es de meta y es de código abierto

¿Quién es Meta?

Es facebook, whatsapp, etc.

En 2011 nace el embrión de React, como una forma de intentar simplificar

las interfaces de usuarios por Jordan Walke, además poder evitar ataques
por XSS (Cross Site Scripting), básicamente esto es que te intenten
inyectar código, cuando estas ejecutando código del usuario, 2012
utilizado en instagram y 2013 en código abierto y está en Github.

¿Por qué aprender React?

1. Lo más importante, es el framework más demandado en el mundo, muy

por encima de otros frameworks y con mucha salida laboral.

2. Se puede desarrollar para aplicaciones móviles y de escritorio, con

React Native.

3. Tiene mantenimiento asegurado por Facebook y la otra parte muy

importante es la comunidad que tiene React.

4. Aprender React, te ayuda aprender los demás frameworks.

5. Futuro muy prometedor y en tendencias Nº1.

6. Api estable, es una biblioteca muy estable, esto quiere decir que incluso
el código de las versiones anteriores a la actual se puede utilizar, mucha
de su sintaxis es igual, ha cambiado muy poco aunque incluso hagan
cambios posteriormente, los cambios son muy fáciles de poder tomarlos
de forma incremental o en cambio se puede ejecutar un comando que los
cambie.

7. La comunidad de React es muy grande.

● En principio lo que va hacer React es generar un árbol de elementos,

un árbol que va ir creando nuestra UI a nivel de componentes y
cada componente va tener dentro, otro componente ya que en
React todo es un componente.
● Y para iniciar, se tiene que iniciar desde una raíz/base, así que se ha
de crear un tronco y el tronco se crea con:
○ ReactDOM.createRoot(parameter) ⇒ Y como parámetro se le
pasa donde se va a crear ese tronco.
○ React.createElement() ⇒ Sirve para crear el elemento, como
primer parámetro es el elemento a crear, segundo parámetro
son los atributos o propiedades que debería tener ese
elemento y como tercer parámetro es el contenido que debe
tener el elemento.
● Una vez se tenga el elemento creado, se ha de renderizar con:
○ render(parameter) ⇒ Se le pasa como parámetro el elemento
creado.
● Al renderizar más de un elemento, esto no los renderiza y solo
muestra el primero, esto pasa porque en React, no se puede
renderizar más de un elemento a la vez y para poder arreglar y
poder renderizar más de un elemento se ha de envolver esos
elementos dentro de un elemento PADRE, por ejemplo:
○ const div = ReactDOM.createElement('div', null, [element,
element2, element3]) ⇒ Esos elementos se han de pasar
dentro de un array y luego renderizar ese elemento PADRE.
● Ahora esto puede generar un HTML innecesario, ya que se ha de
generar un elemento que envuelva esos elementos para que se
puedan renderizar más de 1 a la vez, en ese caso se puede optar por
crear un:
○ React.Fragment ⇒ Es un componente propio de React, como
una forma de envolver elementos con algo vacío para no
renderizar nada.
○ const div = app(React.Fragment, null, [button, button2,
button3])
Componente sin React - Code

Link ⇒ https://nanourl.org/component-sin-react

React sin JSX - Code

Link ⇒ https://nanourl.org/react-sin-jsx

JSX ⇒ Es una extensión de ECMASCRIPT, que está basada en XML, y lo que

nos va a permitir es crear de una forma mucho más declarativa los
elementos y así no tener que escribir un elemento de una forma más
compleja.

Y quien se encarga de realizar toda esa magia, estas transformaciones,

actualmente el más usado es SWC aunque también está Babel y que son,
son unos transpiladores de código donde le puedes escribir JS y lo que
hace es transformarlo.

Estas son 2 herramientas que son las que utilizan por debajo algunos
empaquetadores de aplicaciones como: webpack, nextjs, vite, etc…

Algo muy importante en JSX son las expresiones y que son, las expresiones
son algo a evaluar dentro un elemento ejemplo:

const name = 'Frances Dev'

<h1>

{name} ⇒ Esto sería una expresión.

<h1>

Y no solo se puede evaluar una constante dentro de un elemento, sino que

también se puede evaluar una función llamándola.:

const random = <strong>Numero aleatorio.

{Math.random()}</strong>
Las llaves son para que se evalúe esa expresión y no se puede poner nada
de declaraciones como un IF,etc, solo se puede poner algo que devuelva
un valor.

JSX, evita la inyección de código por ejemplo pasarle un script como

expresión dentro de una constante

React + JSX - Code

Link ⇒

Para poder trabajar con JSX y React, se ha de utilizar un

empaquetador de aplicaciones WEB como:

Vite ⇒ Es un empaquetador de aplicaciones Web, el cual es compatible

con VIU y SVELTE, entre otras.

● npm init -y ⇒ Inicializa el proyecto y crea un package.json

● npm create vite@latest ⇒ Instala la última versión de Vite
● Configurar vite
● npm install (Dentro del proyecto) ⇒ Para instalar las dependencias.
● npm run dev ⇒ Para correr el proyecto

Dentro del proyecto que ha creado Vite, hay diferentes archivos como:

● .gitignore ⇒ El cual ignora para Git, los archivos que no se quieran

subir al repositorio.
● package.json ⇒ Dondé están las dependencias y dependencias de
desarrollo.

Main.jsx

import React from 'react'

import ReactDOM from 'react-dom/client'
import App from './App' ⇒ Componente
import './index.css' ⇒ estilos

<React.StricMode> ⇒
Create React App ⇒ Es el oficial para crear tu página web pero es lento y
no se ha actualizado y ahora desaconsejable por parte de la propia web
de React.

Un componente es una función que devuelve un elemento, muy

importante el nombre de los componentes tienen que ser PascalCase.

Porque se tiene que nombrar los componentes en PascalCase, la razón es

porque React, entiende que le estas pasando una etiqueta HTML, se ha
cual se ha el nombre puesto, ya que por X motivo HTML puede generar un
TAG con ese nombre y esto es lo que previene React y para que no exista
esa colisión se tiene que nombrar el componente con la primera letra en
mayúsculas.

Si se quiere introducir estilos en línea, no se puede hacer de la forma

tradicional, se ha de poner dentro de un objeto y no dentro de una cadena
de texto, en React una se utiliza el className, ya que Class es una
palabra reservada en JS.
 Forma Correcta ✅
Forma Incorrecta ❌

Al definir una clase en React, lo recomendable es utilizar la metodología

SUIT CSS, es una herramienta para el desarrollo de UI basado en
componentes, también se puede utilizar la metodología BEM.

Suit CSS, consiste en añadir un tipo de prefijo como por ejemplo: tw-
followCard - tw-followCard-header - tw-followCard-avatar.
Importante al crear un componente este se ha de reutilizar para ir creando
la interfaz, pero lo más importante al crear el componente es tenerlo
parametrizado, ya que la base de cualquier componente en React son las
propiedades/parámetros, así como las funciones reciben parámetros, los
componentes también los reciben y para reutilizarlos se les tienen que
pasar X información.
Algo interesante que pasar en el src del tag IMG es que se puede pasar el
parámetro userName::

Pero al reemplazar el Franck3017 por {userName} podemos ver que este

lo renderiza como si fuese un string.
para evitar y resolver ese pequeño fallo se puede hacer de 2 maneras:

● Con una constante, usando el template string y dentro del atributo

src pasarle la constante para que evalúe esa expresión.

● También dentro pasándole un objeto a atributo src y dentro pasarle

el template string para que evalúe la expresión {username}.

En ambos casos la imagen se renderiza de forma correcta.

<React.Fragment> === <></> ⇒ Para renderizar más de 1 elemento a la vez

Si al renderizar el componente, se le pasa un booleano y en el caso de que

se pase el parámetro con true, en vez de pasarle:
● isFollowing={true} ⇒ Es más recomendable pasarle isFollowing y
nada más.
Cuando no se le pasa una PROP a nuestro componente y se intenta
acceder a ella, el valor que va estar disponible es UNDEFINED.

También se le puede pasar una función como expresión para que se ha

evaluada con un parámetro, por ejemplo en el caso del userName que
tiene una @ pero puede ver el caso de que por X motivo dependiendo
como venga el nombre no lo tenga y se le tiene que añadir en esos casos:
Ahora en el caos de que esa función en vez esta dentro del componente,
se le pudiera pasar desde afuera.

Haciendo esto en la consola saldrián puros errores.

¿Porque de estos errores?

el parámetro nombrado formatUserName es undefined, ya que se esta

intentado utulizar pero en ningun momento se le esta pasando esa
parámetro dentro del componente App, ya que si se esta intentando
ejecutar la función formatUserName como undefined es normal que pete.

Aparte de que se le puede pasar un función, también se le puede pasar un

elemento, pero hay que tener cuidado ya que existe una diferencia entre
un componente y un elemento, un componente es una factoría de
elementos, función que al ejecutarla devuelve el elemento y los elementos
es lo que renderiza React.

Como parámetros también se pueden pasar funciones, en el caso de que

pete, es porque lo que le está pasando es undefined, lo que se ha de
hacer pasarlo como parámetro y crear la función antes de renderizar el
componente.

Al pasar un elemento como prop en React, tener en cuenta:

● Las props deberían ser inmutables, nunca se debe modificar o mutar

las prop en React.
● Cuando un elemento es envuelto por otro elemento a esto se le
denomina children, hijos de ese elemento.
● Esto mismo se puede usar a nivel de componente, al no pasarle una
PROP, pero si un texto dentro del componente, como se hace para
recuperarlo.
● En esos casos se tiene una PROP especial llamada "children".
● El children es todo lo que está envuelto, tener en cuenta que así
como se puede renderizar un texto, también se renderizar cualquier
cosa, como otro componente y esto se le denomina
componentización.

En el caso de que no se le pase una PROP, en el componente se le puede

pasar al parámetro un valor por defecto.

Aunque no es recomendable se le pueden pasar todas las props juntas

con el rest operator {...props}, esto lo que va hacer es pasar todas las
propiedades del objeto como props al componente y esto solo tiene
sentido cuando se recibe mucha información.

● Se incluye información que no es necesaria.

● Puede que el componente por tema de optimización se renderice o
se re-renderice sin necesidad.
● Puede ser más complejo que información le esta llegando al
componente.

¿Qué es un Estado en React?

Es como un interruptor, a veces la luz de un foco puede estar apagada
como otras encendidas. Este concepto es el mismo en los componentes y
con ello visualizar algún cambio en nuestro componente.

¿Cómo se crea un Estado?

Para ello se ha de importar una utilidad, useState de react o hooks y son la

vida en React.

Los hooks permiten añadir cierta funcionalidad a los componentes de

React o poder ejecutar código arbitrario cuando ocurren ciertas cosas en
los componentes o tener algún tipo de funcionalidad para mejorar el
rendimiento de los componentes.

El useState, sirve para guardar una variable, la cual vaya cambiando de

estado según la acción que se haga en el componente.

El useState es un array con dos parámetros, el primero es el valor del

estado y el segundo es una función la cual nos va a permitir actualizar el
estado.

¿Que es el Renderizado condicional?

Dependiendo de una condición va a renderizar una cosa u otra.

Cada vez que cambia el estado lo que hace React es detectar el cambio
estado y reflejar los cambios en la UI.

¿Qué es el Virtual DOM?

Cuando se realiza un cambio de estado, lo que React hace es que en vez

de volver a renderizar todo lo el componente, solo, lo que hace React es
actualizar todo aquello cambia de forma quirúrgica, con lo que cual lo
único que va a volver a renderizar es aquello que se actualiza.

Cómo React sabe que es lo único que va a volver a renderizar, y es que

React hace una foto a todo lo que renderiza, esto lo crea como un árbol de
elementos y lo va separando, hace un diferencia entre lo que ha
renderizado antes y lo que se quiere renderizar, encuentra las diferencias y
lo que renderiza es aquello que a cambiado, haciendo las actualizaciones
mínimas para reflejar esos cambios en la UI.
Hay otra forma en la que se re-renderize el componente:
 ● Se actualiza el estado interno, cada vez que se actualiza el estado
interno de un componente, React entiende que tiene que volver
renderizar el componente y reflejar los cambios pero solo aquellas
partes que han cambiado.
● Otra forma es cuando un componente padre se vuelve a renderizar,
con ello propaga los cambios hacia abajo, nunca hacia arriba.

¿Qué es la propagación de cambios?

Esto es cuando se está actualizando un componente que está en un nivel

superior, propaga los cambios hacia abajo.

Importante: Cuando se vuelve a renderizar un componente PADRE,

también se renderiza el HIJO, independientemente que sus PROPS hayan
cambiado.

La única diferencia es que aunque renderize lo mismo, aunque el código

se ejecuta igual, lo que pasa es que no renderiza nada en el DOM
Se pueden poner comentarios como en JS // ó /* */, pero no se puede
poner comentarios dentro de lo que quiera renderizar, devolver o retornar,
para ello se ponen dentro de las { }, porque se tiene que evaluar esa línea
y solo se le pueden pasar los comentarios de /* */, aunque no es
recomendable pasarle dentro del RETURN un comentario, sólo en ciertos
casos.

Se puede inicializar un estado con una PROP, cuando es una PROP que
sirve para inicializar un estado, la buena práctica es que se llame con
initial…

Esto nos permite utilizar una PROP para inicializar un estado de nuestro
componente.

Si se inicializa un PROP como estado inicial, solo se puede inicializar una

sola vez, en el caso de que se intente cambiar el estado inicial con un
estado superior, este estado no se propagara hacia abajo y esto
normalmente suele ser una mala práctica.

¿Qué es el renderizado de listas?

Es un array con elementos y con el array de elementos se ha renderizar

esa lista de elementos.

Tener en cuenta que al renderizar cada elemento de una lista de

elementos, en la consola del BROWSER saldrá un warning:

Qué significa ese warning, lo que nos indica es que cuando se renderiza
una lista de elementos en React, se tiene que añadir o indicar la KEY.

¿Qué es la KEY?

Es un identificador único para ese elemento.

¿De qué sirve la KEY?

Ya que React utiliza el Dom Virtual, tiene que saber a qué elementos se
está refiriendo al renderizar y para identificar ese elemento del array, se ha
de identificar con algo que sea único.

● No es recomendable utilizar el INDEX, sólo se debe utilizar cuando se

tiene claro que siempre ese elemento va tener ese mismo índice, ya
que puede causar ciertos errores como:
○ ver información anterior o que no cuadra
● Tampoco es recomendable utilizar el Math.random(), ya que cada
vez que se renderiza el componente tendrá un ID distinto.
● Tampoco el Date.now(), ya que cada vez que se renderice será
diferente, ya que al pasarle un estado a un componente de nivel
superior esto va renderizar todo el componente hasta abajo, ya que
React lo toma como un componente nuevo.

Key, es un identificador único para ese elemento, no es recomendable

utilizar el index, porque eso lo puedes utilizar otro apartado y ello pueda
causar un error.