React

CURSO REACT Y
SCRUM
M. C. HORACIO AUGISTO NAVARRO GARCÍA

JUL 2024
REACT
INDICE DE
1. INTRODUCCIÓN
CONTENIDOS
2. PREPARACIÓN DEL
ENTORNO
3. PENSANDO EN REACT
4. PRIMEROS PASOS
5. DESCRIPCIÓN DE LA
UI
6. AGREGAR
INTERACTIVIDAD
7. GESTIONAR ESTADOS
SCRUM
1. SCRUM
2. EL EQUIPO
3. EVENTOS
4. ARTEFACTOS
5. HERRAMIENTAS
REACT
Es una librería Javascript de código abierto diseñada para crear interfaces de

usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola
página.
Fue creada por Facebook y actualmente es un software libre que se usa en

cientos de páginas y aplicaciones de primer nivel. El desarrollo con React se
basa en componentes, una arquitectura que nos permite una mayor
reutilización del código, y la realización de aplicaciones complejas que sean
más sencillas de programar y de mantener.
React es una herramienta muy usada en el desarrollo del lado del cliente, no
solamente en Facebook, sino también en miles de páginas y aplicaciones
web como BBC, Airbnb, Netflix, Dropbox entre otras..
Es una evolución natural para aquellos que quieren llegar más lejos de lo
que permiten otras librerías más básicas, como jQuery.
https://es.react.dev/
REACT
Características
★Usa un virtual DOM en vez del DOM real.

★Basado en componentes. Con estados y ciclos de vida.
★Se puede trabajar con React del lado del servidor con Node
★Se puede crear aplicaciones móviles con React Native.
REACT
La parte escencial en React son los componentes, pequeños snippets de

código reusable que combinados entre sí, nos permiten construir la
aplicación deseada. Con ellos, logramos que el código esté encapsulado
por conceptos/objetivos y nos da facilidad de implementar pruebas en
nuestra aplicación.
Los componentes tienen dos formas de modela los datos, las props y los
states. Ambos nos permiten manejar la información en los componentes.
Las props son como argumentos que pasas a una función. Le permiten a
un componente padre pasar datos a un componente hijo y personalizar
su apariencia. Por ejemplo, un componente Form puede pasar una prop
color a un componente Button.
Los states son como la memoria de un componente. Le permite a un

componente realizar un seguimiento de alguna información y cambiarla
en respuesta a interacciones. Por ejemplo, un componente Button
pudiera querer hacer un seguimiento del estado isHovered.
Las props y los states son diferentes, pero trabajan en conjunto. Un

componente padre a menudo mantendrá alguna información en el estado
(para poder cambiarla), y pasarla a componentes hijos como props.
REACT
Para gestionar el ciclo de vida de los componentes, React nos proporciona

un conjunto de eventos donde podremos controlar cuándo ha sido dibujado
(renderizado) un componente, o cuando va a ser dibujado; o también cuando
se ha cambiado el valor de una propiedad o state, entre otros.
Con estos eventos, podremos manejar el Virtual DOM, controlar el estado

de un componente e integrar plugins de terceros).
React no retorna HTML. El código embebido dentro de Javascript, parece

HTML pero realmente es JSX (Javascript sintax extension). Son como
funciones Javascript, pero expresadas mediante una sintaxis propia de React
llamada JSX. Lo que produce son elementos en memoria y no elementos del
DOM tradicional, con lo cual las funciones no ocupan tiempo en producir
pesados objetos del navegador sino simplemente elementos de un DOM
virtual.
PREPARACIÓN DEL ENTORNO
NODE.JS
Node.js es un entorno de ejecución para Javascript

multiplataforma que permite a los desarrolladores
crear servidores, aplicaciones web, herramientas de
línea de comando y scripts.
Disponible para su descarga desde su página oficial
https://nodejs.org/en/
PROYECTO FIN DE GRADO - 08

NPM
Node es un sistema modular por lo que la instalación

tiene solamente lo necesario; por lo que para utilizar
alguna librería, paquete o dependencia extra
deberemos utilizar NPM (node package manager)
Este gestor de paquetes se instala de forma

automática al instalar Node.js

CLI
CLI (command line interface) es la interfaz de línea de

comandos para utilizar node y npm.
En Ms. Windows es importante utilizar el símbolo del

sistema específico de node.

NODE.JS - INSTALACIÓN
1. Descargamos el instalador desde:

https://nodejs.org/en/
2. Ejecutamos el archivo de instalación y seguimos
los pasos.
Es recomendable ejecutar el instalador con clic

derecho y ejecutar como administrador.
Para la instalación de Node.js es recomedable

seleccionar todas las opciones
Al final sugiere algunas herramientas extras que no

son necesarias.
Una vez que termine la instalación podemos probar

desde línea de comandos en el símbolo de sistema o
una terminal escribimos:
node -v

VS CODE
Necesitamos un editor de código para editar nuestros

archivos, por lo que instalaremos Vs Code, aún
cuando pueden trabajar con Sublime Text o cualquier
editor de su preferencia.
Vs Code
https://code.visualstudio.com/
Sublime Text
https://www.sublimetext.com/

REACT SIN NOD.JS
Existe una posibilidad de trabajar con React sin utilizar

Node.js
La alternativa utiliza etiquetas script e imports en

línea; es funcional pero se pierden las características
de Node.js

PRIMER APLICACIÓN
Para crear nuestra primer aplicación debemos abrir una ventana de símbolo de sistema de
node.js en Ms. Windows o una ventana de terminal en Linux o iOS.
Navegamos hasta la carpeta donde deseamos guardar nuestro proyecto, en el caso de

Linux o iOS se puede navegar de forma visual, clic derecho abrir terminal.
Lo primero será instalar React CLI, y posteriormente crear la aplicación, tenemos dos
opciones:
Opción 1 Opción 2
npm install -g create-react-app npx create-react-app <carpeta-destino>
create-react-app <carpeta-destino> npx create-react-app <nombre-app>
Llinux e iOS necesitarán de sudo Punto en lugar de nombre toma el de la carpeta

PRIMER APLICACIÓN
Una vez crado el proyecto ingresamos a la carpeta y lo probamos mediante el comando:
npm start
En una ventana de navegador podemos acceder colocando la dirección

ESTRUCTURA DE LA APP
Descripción de los componentes principales de un proyecto:
Carpeta node_modules: aquí se encuentran las dependencias

instaladas vía npm, por lo que evitaremos manejarla.
Carpeta public: aquí tenemos archivos de uso general sin
necesidad de procesamiento.
Carpeta src: la carpeta del código fuente contiene los archivos
que le darán funcionaladidad.
Archivo .gitignore: control de versiones git.
Archivo index.html: archivo raíz del proyecto
Archivos package-lock.json y package.json: configuraciones del
proyecto, dependencias, scripts y otros detalles.
EJECUCIÓN DE LA APP
Al escribir npm start iniciamos la ejecución del proyeto y sucede lo

siguiente:
Se compila y crea un servidor de desarrollo, el servidor de desarrollo

utiliza Webpack para compilar el código fuente de la aplicación (los
archivos en el directorio src/).
Webpack toma el index.js como el punto de entrada y comienza a

crear un gráfico de dependencias, resolviendo todos los módulos
importados; la aplicación es empaquetada en memoria y servida a
través del servidor de desarrollo.
DESCRIPCIÓN DE ARCHIVOS
Los archivos dentro de las carpetas public/ y src/ específicamente la

aplicación inicia en index.js que monta App.js:
public/
- index.html -> Este es el archivo HTML principal donde se monta tu
aplicación React; otros recursos estáticos pueden ser colocados aquí.
src/
- App.css -> Archivo CSS para estilizar el componente App.
- App.js -> Componente principal de tu aplicación.
- index.css -> Archivo CSS global para tu aplicación.
- index.js -> Punto de entrada principal de tu aplicación React.
- reportWebVitals.js -> Mide el rendimiento de la aplicación.
DESCRIPCIÓN DE ARCHIVOS
El proceso de creación de una aplicación através del comando

create-react-app además de consumir tiempo, consume recursos
por lo que una estrategía válida para el aprendizaje consiste en crear
un solo proyecto.
El componente principal es App.js por lo que podemos crear un

componete para cada ejercicio y modificamos el punto de entrada
index.js para que importe el componente (ejercicio) con el que
deseamos trabajar.
ORGANIZACIÓN DE LA APP
Formas de organizar los archivos de una aplicación carpetas public/ y src/:
Tipo de archivo: consiste en organizar carpetas por tipo de archivo: componentes,

hooks, páginas, rutas, utilerias, servicios, entre otros.
Funcionalidad o modular: consiste en organizar carpetas por módulos.
Diseño atómico: la idea principal es dividir los componentes en 5 elementos: átomos,
móleculas, organismos, plantillas y páginas.
PENSANDO EN REACT
React puede llevar a cambiar la forma de pensar en los diseños que ves y las aplicaciones
que construyes.
Cuando construyes una interfaz de usuario (UI) con React, primero la separarás en piezas
denominadas componentes. Luego, describirás los diferentes estados visuales para cada
uno de tus componentes. Para finalizar, conectarás tus componentes de forma tal que los
datos fluyan por ellos. En este ejemplo, te guiaremos en el proceso de pensamiento para
construir una tabla de datos de productos con una funcionalidad de búsqueda usando
React.
PENSANDO EN REACT
Iniciamos con un boceto el cuál analizamos para definir su diseño y
funcionalidad.
Paso 1: Separa la UI en una jerarquía de componentes
Podemos iniciar por dibujar cuadros alrededor de cada componente y

subcomponente y nombralos.
Dependiendo experiencia, puedes pensar en dividir el diseño en

componentes de distintas formas:
Programación: utiliza las mismas técnicas para decidir si debes crear
una nueva función o un objeto.
CSS: considera para qué harías selectores de clase.
Diseño: considera cómo organizarías las capas del diseño.
Si los datos estan bien estructurados es posible que se correspondan con

el diseño casi de una forma natural, donde cada componente de los datos
se corresponde a uno del diseño.
PENSANDO EN REACT
Los componentes en el boceto, ordenados

en una jerarquía:
FilterableProductTable
SearchBar
ProductTable
ProductCategoryRow
ProductRow
1. FilterableProductTable contiene toda la aplicación.

2. SearchBar recibe la entrada del usuario.
3. ProductTable muestra y filtra la lista de acuerdo a la entrada del usuario.
4. ProductCategoryRow muestra un encabezado para cada categoría.
5. ProductRow muestra una fila para cada producto.
PENSANDO EN REACT
Paso 2: Construye una versión estática
Construir una versión estática requiere mucha escritura y

poco pensamiento, pero añadir interactividad requiere
mucho pensamiento y no mucha escritura.
Para construir la versión estática de la aplicación que

renderiza el modelo de datos debemos construir
componentes que reutilicen otros componentes y pasen
datos usando props. Las props son una forma de pasar
datos de padres a hijos.
Al ser un versión estática de momento no necesitamos FilterableProductTable

interacción por lo que tampoco requerimos de states. SearchBar
ProductTable
ProductCategoryRow
ProductRow
PENSANDO EN REACT
Paso 3: Encuentra la representación mínima pero
completa del estado de la UI
Para hacer la UI interactiva, los usuarios deben poder

cambiar el modelo de datos. Para ello utilizamos states.
Pensemos en el estado como el conjunto mínimo de

datos cambiantes que la aplicación necesita recordar.
El principio más importante para estructurar datos es

mantenerlos DRY (Don’t Repeat Yourself) No te repitas.
Buscamos la representación absolutamente mínima del

state que la aplicación necesita y el resto será bajo
demanda.
PENSANDO EN REACT
Analicemos los componentes con datos en esta
aplicación:
1. La lista original de productos

2. El texto de búsqueda que el usuario ha escrito
3. El valor del checkbox
4. La lista de productos filtrada
¿Se mantiene sin cambios con el tiempo? Si es así, no

es estado.
¿Se pasa desde un padre por props? Si es así, no es
estado.
¿Puedes calcularlo basado en estado existente on en
props en tu componente? Si es así, ¡definitivamente
no es estado!
PENSANDO EN REACT
Lo que queda probablemente es estado.
1. La lista original de productos se pasa como props, por

lo que no es estado.
2. El texto de búsqueda parece ser estado dado que
cambia con el tiempo y no puede ser calculado a
partir de algo más.
3. El valor del checkbox parece ser estado porque
cambia con el tiempo y no puede ser calculado a
partir de algo más.
4. La lista filtrada de productos no es estado porque
puede ser calculada tomando la lista original de
productos y filtrándola de acuerdo al texto de
búsqueda y el valor del checkbox.
¡Esto significa que solo el texto de búsqueda y el valor del

checkbox son estado! ¡Bien hecho!
PENSANDO EN REACT
Paso 4: Identificar dónde debe vivir tu estado
Después de identificar los datos mínimos, se debe

identificar qué componente es responsable de cambiar
este estado, o posee el estado.
React utiliza un flujo de datos en una sola dirección,

pasando datos de arriba hacia abajo de la jerarquía de
componentes desde el componente padre al hijo.
Por cada pieza de estado en tu aplicación:

1. Identifica cada componente que renderiza algo
basado en ese estado.
2. Encuentra su componente padre común más cercano,
un componente que esté encima de todos en la
jerarquía.
3. Decide dónde debe residir el estado.
DESCRIPCIÓN DE LA UI
Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas componentes. Un
componente de React es una función de JavaScript a la que le puedes agregar un poco de marcado (markup).
Los componentes pueden ser tan pequeños como un botón, o tan grandes como una página entera.
Este marcado representa un artículo, su encabezado, y una tabla de contenidos representada como una lista
ordenada.
React te permite combinar tu marcado, CSS y JavaScript en «componentes» personalizados, elementos

reutilizables de UI para tu aplicación. El código de la tabla de contenidos que viste arriba pudo haberse
transformado en un componente <TableOfContents /> que podrías renderizar en cada página donde se
requiera.
Pasos para crear un componente:
Paso 1: Exporta el componente

El prefijo export default es parte de la sintaxis estándar de
Javascript. Te permite marcar la función principal en un
archivo para que luego puedas importarlas en otros
archivos.
Exportar el componente solo es necesario cuando esta en

su propio archivo.
Paso 2: Define la función

Con function Profile() { } se define una función con el
nombre Profile.
NOTA: ¡Los componentes de React son funciones

regulares de JavaScript, pero sus nombres deben
comenzar con letra mayúscula o no funcionarán!
Paso 3: Agrega marcado
El componente devuelve una etiqueta <img /> con
atributos src y alt. <img /> se escribe como en HTML, ¡pero
en realidad es JavaScript por detrás! Esta sintaxis se llama
JSX, y te permite incorporar marcado dentro de JavaScript.
Las sentencias return se pueden escribir todo en una línea.
Pero si tu marcado no está todo en la misma línea que la

palabra clave return, debes ponerlo dentro de paréntesis
como en el ejemplo.
Nota: ¡Sin paréntesis, todo el código que está en las

líneas posteriores al return serán ignoradas!
Usa el componente
Ahora que has definido el componente Profile, puedes
anidarlo dentro de otros componentes. Por ejemplo,
puedes exportar un componente Gallery que utilice
múltiples componentes Profile.
Lo que ve el navegador
Nota la diferencia de mayúsculas y minúsculas:
<section> está en minúsculas, por lo que React sabe
que nos referimos a una etiqueta HTML.
<Profile /> comienza con una P mayúscula, por lo que
React sabe que queremos usar nuestro componente
llamado Profile.
Anidar y organizar componentes
Puedes tener múltiples componentes en el mismo archivo. Esto es
conveniente cuando los componentes son relativamente
pequeños o están estrechamente relacionados entre sí.
Si el archivo se extiende, siempre puedes mover Profile a un

archivo separado.
Dado que los componentes Profile se renderizan dentro de Gallery

podemos decir que Gallery es un componente padre, que
renderiza cada Profile como un hijo.
Este es la parte mágica de React: puedes definir un componente

una vez, y luego usarlo en muchos lugares y tantas veces como
quieras.
NOTA: Los componentes pueden renderizar otros

componentes, pero nunca debes anidar sus definiciones.
Exportar e importar un componente
Actualmente en el ejemplo nuestro componente reside en un archivo de componente raíz, llamado App.js. No
obstante, dependiendo de tu configuración, el componente raíz podría estar en otro archivo.
¿Y si quisieras cambiar la pantalla de inicio en el futuro y poner allí una lista de libros científicos? ¿O ubicar todos
los perfiles en otro lugar? Tiene sentido mover Gallery y Profile fuera del componente raíz. Esto los haría más
modulares y reutilizables en otros archivos. Puedes mover un componente en tres pasos:
1. Crea un nuevo archivo JS para poner los componentes dentro.

2. Exporta el componente de función desde ese archivo (ya sea usando exports por defecto o con nombre).
3. Impórtalo en el archivo en el que se usará (usando la técnica correspondiente de importar exports por
defecto o con nombre).
Hay dos formas fundamentales de exportar valores con JavaScript: exports por defecto y exports con nombre.
Hasta ahora en el ejemplo solo se utilizo exports por defecto.
Se puedes usar uno o ambos en el mismo archivo, pero un archivo no puede tener más de un export por
defecto; sin embargo puede tener tantos exports con nombre como sea necesario.
Cómo exportas un componente dicta la forma en que debes importarlo. ¡Tendrás un error si intentas importar
un export por defecto de la misma forma que lo harías con un export con nombre! Este cuadro te puede ayudar
a recordarlo.
Cuando escribes un import por defecto puedes poner cualquier nombre después de import. Por ejemplo,
podrías escribir en su lugar import Banana from './Button.js' y aun así te daría el mismo export por defecto. En
cambio, con los imports con nombre, tiene que haber una correspondencia con los nombres en ambos lados.
¡Por eso se llaman exports con nombre!
Marcado con JSX
JSX es una extensión de sintaxis para JavaScript que permite escribir marcado similar a HTML dentro de una
archivo JavaScript. Aunque hay otras formas de escribir componentes, la mayoría de los desarrolladores de
React prefieren JSX, y la mayoría de las bases de código lo usan.
La Web se ha construido sobre HTML, CSS, y JavaScript. Durante mucho t¿tiempo, los desarrolladores web
mantuvieron el contenido en HTML, el diseño en CSS, y la lógica en JavaScript, ¡a menudo en archivos
separados!. El contenido se marcó dentro del HTML mientras que la lógica de la pagina vivía por separado en
JavaScript
NOTA: JSX y React son independientes.

Comunmente se usan en conjunto, pero
se pueden usar de forma separada.
Las reglas de JSX
1. Devolver un solo elemento raíz
Para devolver múltiples elementos de un componente, envuélvelos con una sola etiqueta principal.
Por ejemplo, puedes usar un <div>
Si no deseas agregar un
<div> a tu marcado, puedes
escribir <> y </> en su
lugar,
Esta etiqueta vacía se le

llama Fragmento. Estos
permiten agrupar cosas sin
dejar rastro en el árbol
HTML.
2. Cierra todas las etiquetas
JSX requiere que las etiquetas se cierren explícitamente: las etiquetas de cierre automático como <img> deben
convertirse en <img />, y etiquetas envolventes como <li>naranjas deben convertirse como <li>naranjas</li>.
3. ¡camelCase en la mayoría de las cosas!
JSX se convierte en JavaScript y los atributos escritos en JSX se convierten en keys de objetos JavaScript. En tus
propios componentes, a menudo vas a querer leer esos atributos en variables. Pero JavaScript tiene limitaciones
en los nombres de variables.
Por ejemplo, sus nombres no pueden contener guiones ni ser palabras reservadas como class.
Por eso, en React, muchos atributos HTML y SVG están escritos en camelCase. Por ejemplo, en lugar de stroke-
width usa strokeWidth o en lugar de class usamos className.
JavaScript en JSX con llaves
JSX permite escribir marcas similares a HTML dentro de un archivo JavaScript, manteniendo la lógica de
renderizado y el contenido en el mismo lugar. A veces requerimos agregar un poco de lógica JavaScript o hacer
referencia a una propiedad dinámica dentro de ese marcado. En esta situación, puedes usar llaves en tu JSX
para abrir una ventana a JavaScript.
Observa la diferencia entre className="avatar",

que especifica un nombre de clase CSS, "avatar" que
hace referencia a una clase de estilo, y src={avatar}
que lee el valor de una variable JavaScript llamada
avatar. ¡Eso es porque las llaves te permiten
trabajar con JavaScript allí mismo en tu marcado!.
JavaScript en JSX con llaves
Cualquier expresión JavaScript funcionará entre llaves, incluidas las llamadas a funciones
Dónde usar llaves
Solo puedes usar llaves de dos maneras dentro de JSX:
Como texto directamente dentro de una etiqueta JSX: <h1>Lista de tareas pendientes de {name}</h1>
funcionará, pero <{tag}>Lista de tareas pendientes de Gregorio Y. Zara</{tag}> no lo hará.
Como atributos inmediatamente después del signo =: src={avatar} leerá la variable avatar, pero src="
{avatar}" pasará el string "{avatar}".
Usando «llaves dobles»: CSS y otros objetos en JSX
Además de strings, números, y otras expresiones de

JavaScript, incluso podemos pasar objetos en JSX. Los
objetos también se indican con llaves, como { name:
"Hedy Lamarr", inventions: 5 }. Por lo tanto, para pasar
un objeto de JavaScript en JSX, debes envolver el objeto
en otro par de llaves: person={{ name: "Hedy Lamarr",
inventions: 5 }}.
Puedes ver esto con estilos en línea CSS, en JSX. React

no requiere que uses estilos en línea (las clases CSS
funcionan muy bien para la mayoría de los casos). Pero
cuando necesitas un estilo en línea, pasas un objeto al
atributo style.
La próxima vez que veas {{ y }} en JSX, ¡sabe que no es
más que un objeto dentro de las llaves JSX!
Nota:
Las propiedades de style en línea se escriben en

camelCase.
Por ejemplo,
el HTML <ul style="background-color: black"> se

escribiría como <ul style={{ backgroundColor:
'black' }}> en tu componente.
Pasar props a un componente
Los componentes de React utilizan props para comunicarse entre

sí. Cada componente padre puede enviar información a sus
componentes hijos mediante el uso de props. Las props pueden
parecerte similares a los atributos HTML, pero permiten pasar
cualquier valor de JavaScript a través de ellas, como objetos,
arrays y funciones.
Las props son los datos que se pasan a un elemento JSX. Por
ejemplo, className, src, alt, width y height son algunas de las
props que se pueden pasar a un elemento <img>
Las props que podemos utilizar con una etiqueta <img> están
predefinidas (ReactDOM se ajusta al estándar HTML). También
podemos definir props a tus propios componentes, para
personalizarlos.
Props personalizadas
Pasamos algunas props al elemento

Avatar. Por ejemplo, asignamos dos
props: person (un objeto) y size (un
número)
Para acceder a estas props especificando

sus nombres person, size separados por
comas dentro de ({ y }) justo después de
function Avatar. Esto te permitirá
utilizarlas dentro del código de Avatar
como si fueran variables.
Las props te permiten considerar de forma
independiente los componentes padre e hijo.
Por ejemplo, puedes modificar las props

person o size dentro del componente Profile
sin preocuparte por cómo serán utilizadas
por el componente Avatar.
De manera similar, puedes cambiar la forma

en que Avatar utiliza estas props sin
necesidad de revisar el componente Profile.
Las props son el único argumento del

componente; las funciones de los
componentes de React aceptan un único
argumento, un objeto props.
Asignar un valor predeterminado para una prop
Podemos asignar un valor predeterminado para una prop en caso de que no se especifique ningún valor,
puedes hacerlo mediante la desestructuración colocando = seguido del valor predeterminado justo después
del parámetro
Ahora, si renderizas <Avatar person={...} /> sin la prop size, el valor de size se establecerá automáticamente en
100.
El valor predeterminado sólo se utilizará si falta la prop size o si se pasa size={undefined}. Sin embargo,
si se pasa size={null} o size={0}, el valor predeterminado no se aplicará.
Reenviar props con la sintaxis de propagación JSX
A veces, pasar props se vuelve extenso; no hay ningún problema en tener código extenso ya que puede ser
más legible. Sin embargo, en ocasiones, es posible ser más conciso. Algunos componentes reenvían todas sus
props a sus hijos, como lo hace Profile con Avatar. Dado que no utilizan directamente ninguna de sus props,
tiene sentido utilizar una sintaxis de «propagación» más corta.
Pasar JSX como hijos
Es común anidar etiquetas nativas del navegador,

tambien es posible anidar los componentes de la
misma forma.
Al anidar contenido dentro de una etiqueta JSX, el

componente padre recibirá ese contenido a través
de una prop llamada children. En el ejemplo a
continuación, el componente Card recibe una
prop children con el valor de <Avatar /> y lo
renderiza dentro de un div contenedor.
DESCRIPCIÓN UI
Renderizado condicional
Los componentes a menudo necesitarán mostrar

diferentes cosas dependiendo de condiciones.
En React, puedes renderizar JSX de forma
condicional utilizando la sintaxis de JavaScript
como las declaraciones if, && y los operadores ? :
Supongamos que tienes un componente

PackingList que muestra varios Items, que
pueden ser marcados como empaquetados o no
DESCRIPCIÓN UI
Observamos que algunos de los componentes
Item tienen su prop isPacked asignada a true en
lugar de false.
Para añadir una marca de verificación (*) a los

elementos empaquetados si isPacked={true}.
Podemos escribir esto como una declaración

if/else así
DESCRIPCIÓN UI
Devolución de nada con null
En algunas situaciones, podríamos no mostrar

nada en absoluto.
Por ejemplo, digamos que no queremos mostrar

elementos empaquetados en absoluto. Un
componente debe devolver algo. En este caso,
puedes devolver null
DESCRIPCIÓN UI
Exclusión condicional de JSX
En el ejemplo anterior, controlamos qué árbol JSX era devuelto por el componente.
Es posible que ya hayas notado alguna duplicación en la salida de la renderización; aunque esta duplicidad no
es perjudicial, podría hacer que tu código sea más difícil de mantener.
¿Qué pasa si quieres cambiar el className? ¡Tendrías que hacerlo en dos lugares en tu código! En tal situación,
podrías incluir condicionalmente un poco de JSX para hacer tu código más DRY.
DESCRIPCIÓN UI
Operador condicional (ternario) (? :)
Este operador lo podemos ver como un if en una línea y nos permite reducir código, haciéndolo más legible y
compacto.
si isPacked es verdadero, entonces (?) renderiza name + ' ✔’, de lo contrario (:) renderiza name
DESCRIPCIÓN UI
Operador condicional (ternario) (? :)
Digamos que queremos envolver el texto del elemento completado en otra etiqueta HTML, como <del> para
tacharlo. Podemos añadir aún más líneas nuevas y paréntesis para que sea más fácil anidar más JSX en cada
uno de los casos
DESCRIPCIÓN UI
Renderizando listas
A menudo necesitamos mostrar muchos componentes similares de una colección de datos. Puedes usar los
métodos de array de JavaScript para manipular un array de datos. Usaremos filter() y map() con React para
filtrar y transformar tu array de datos en un array de componentes.
La única diferencia entre estos elementos de la lista es su contenido, sus datos. Generalmente necesitaremos
mostrar muchas instancias del mismo componente usando diferentes datos cuando construyas interfaces:
desde listas de comentarios a galerías de fotos de perfiles. En estas situaciones, puedes guardar estos datos en
objetos de JavaScript y arrays, y usar métodos como map() y filter() para renderizar listas de componentes
desde ellos.
DESCRIPCIÓN UI
Renderizando listas
Trabajaremos con el siguiente arreglo, que

podría ser la consulta a una tabla convertida en
un arreglo.
DESCRIPCIÓN UI
Renderizando listas
Mapeamos los miembros de people en un

nuevo array de nodos JSX, listItems y
devolvemos listItems desde el componente
envuelto en un <ul>
Al abrir la consola nos damos cuenta que

tenemos una advertencia:
Warning: Each child in a list should have a

unique «key» prop.
(Traducción)
Advertencia: Cada hijo en una lista debe
tener una única prop «key».
DESCRIPCIÓN UI
Renderizando listas
Podemos filtrar los datos utilizando el

método filter del arreglo.
Este método toma un array de objetos, los

pasa por un «test» (una función que devuelve
true o false), y devuelve un nuevo array de
solo esos objetos que han pasado el test
(que han devuelto true).
Por ejemplo: solo obtenemos los objetos

donde profession es 'químico'.
DESCRIPCIÓN UI
Renderizando listas
Las funciones de flecha implícitamente

devuelven la expresión justo después
del =>, así que no es necesario declarar
un return
Sin embargo, se debe escibir el return

explícitamente si tu => está seguida por
una llave {
Los elementos JSX directamente dentro

de una llamada a un map() siempre
necesitan keys
DESCRIPCIÓN UI
Mantener los componentes puros
Algunas funciones de JavaScript son puras. Las funciones puras solo realizan un cálculo y nada más. Al escribir
estrictamente componentes como funciones puras, evitamos una clase completa de errores desconcertantes y
un comportamiento impredecible a medida que crece el código. Sin embargo, para obtener estos beneficios,
hay algunas reglas que debes seguir.
En informática (y especialmente en el mundo de la programación funcional), una función pura es una función
con las siguientes características:
Se ocupa de sus propios asuntos. No cambia ningún objeto o variable que existiera antes de ser llamado.
Las mismas entradas, la misma salida. Dadas las mismas entradas, una función pura siempre debe
devolver el mismo resultado.
Es posible que ya estés familiarizado con un ejemplo de funciones puras: fórmulas en matemáticas.
Considera esta fórmula matemática: y = 2x.
DESCRIPCIÓN UI
Ejercicio
Recordando el boceto de pensando en

React construyamos algo más serio.
FilterableProductTable contiene toda

la aplicación.
SearchBar recibe la entrada del
usuario.
ProductTable muestra y filtra la lista
de acuerdo a la entrada del usuario.
ProductCategoryRow muestra un
encabezado para cada categoría. FilterableProductTable
ProductRow muestra una fila para SearchBar
ProductTable
cada producto.
ProductCategoryRow
ProductRow
AGREGAR INTERACTIVIDAD
Agregar interactividad
Algunos componentes en pantalla se actualizan en respuesta a la entrada del usuario. Por ejemplo, hacer clic
en una galería de imágenes cambia la imagen activa. En React, los datos que cambian con el tiempo se
denominan state. Puedes agregar state a cualquier componente y actualizarlo según sea necesario.
Responder a eventos
React permite agregar controladores de eventos a tu JSX. Los controladores de eventos son tus propias
funciones que se activarán en respuesta a las interacciones del usuario, como hacer clic, pasar el mouse,
enfocarse en las entradas de un formulario, entre otros.
Los componentes integrados como <button> solo admiten eventos de navegador integrados como onClick. Sin
embargo, también puedes crear tus propios componentes y darle a sus props de controladores de eventos los
nombres específicos de la aplicación que desees.
Respondiendo a eventos
Children te permite manipular y transformar el JSX que

recibes como la prop children.
NOTAS:
El uso de Children es poco común y puede conducir
a un código frágil.
Requiere de: import { Children } from 'react';
El state: la memoria de un componente
Los componentes a menudo necesitan cambiar lo que aparece en la pantalla como resultado de una
interacción. Escribir en el formulario debería actualizar el campo de entrada, hacer clic en «siguiente» en un
carrusel de imágenes debería cambiar la imagen que se muestra, hacer clic en «comprar» pone un producto en
el carrito de compras.
Los componentes necesitan «recordar» cosas: el valor de entrada actual, la imagen actual, el carrito de
compras. En React, este tipo de memoria específica del componente se llama state.
Podemos agregar state a un componente con un useState Hook. Los Hooks son funciones especiales que
permiten que tus componentes usen funciones de React (el state es una de esas funciones). El Hook useState
te permite declarar una variable de state. Toma el estado inicial y devuelve un par de valores: el estado actual y
una función de establecimiento de state que te permite actualizarlo.
Entendiendo los hook
La forma más común de manejar los state es

utilizando hook, en este ejemplo tenemos el hook:
const [contador,setContador]=useState(0)
La declaración del hook esta formada por el state

contador y una función encargada de afectarlo
setContador, useState crea la relación entre el state
y su manejador además de establecer el valor inicial
del state.
Se necesita una función que invoque a la función

manejadora del state que será asociada a un
evento del navegador.
Renderizado y confirmación
Antes de que los componentes se muestren en la pantalla, deben ser renderizados por React. Comprender los
pasos de este proceso nos ayudará a pensar en cómo se ejecuta el código y explicar su comportamiento.
Imagina que tus componentes son cocineros en la cocina, montando sabrosos platos a partir de los
ingredientes. En este escenario, React es el camarero que hace las peticiones de los clientes y les trae sus
pedidos. Este proceso de solicitud y servicio de UI tiene tres pasos:
1. Desencadenamiento de un renderizado (entrega del pedido del cliente a la cocina)
2. Renderizado del componente (preparación del pedido en la cocina)
3. Confirmación con el DOM (poner el pedido sobre la mesa)
El estado como una instantánea
A diferencia de las variables regulares de JavaScript, el estado de React se comporta más como una
instantánea. Establecerlo no cambia la variable de estado que ya tienes, sino que activa una nuevo
renderizado.
Actualizar arrays en el estado
Los arrays son otro tipo de objetos de JavaScript mutables que puedes almacenar en el estado y debes tratar
como de solo lectura. Al igual que con los objetos, cuando deseas actualizar un array almacenado en el estado,
se debe crear uno nuevo (o hacer una copia de uno existente) y luego configurar el estado para utilizar el
nuevo array.
Ejercicio
Retomando el boceto del cual construimos el

modelo estático, agrega la funcionalidad para
que quede completo.
Recuerda que se tiene dos state (el texto de

busqueda y la casilla de verificación) que viven
en el componente padre común
REFERENCIA SITIO OFICIAL REACT
HTTPS://ES.REACT.DEV/
CLIC EN APRENDE REACT

React

Cargado por

Copyright:

Formatos disponibles

React

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

React

Cargado por

Copyright:

Formatos disponibles

CURSO REACT Y

M. C. HORACIO AUGISTO NAVARRO GARCÍA

Es una librería Javascript de código abierto diseñada para crear interfaces de

Fue creada por Facebook y actualmente es un software libre que se usa en

★Usa un virtual DOM en vez del DOM real.

La parte escencial en React son los componentes, pequeños snippets de

Los states son como la memoria de un componente. Le permite a un

Las props y los states son diferentes, pero trabajan en conjunto. Un

Para gestionar el ciclo de vida de los componentes, React nos proporciona

Con estos eventos, podremos manejar el Virtual DOM, controlar el estado

React no retorna HTML. El código embebido dentro de Javascript, parece

Node.js es un entorno de ejecución para Javascript

Disponible para su descarga desde su página oficial

PROYECTO FIN DE GRADO - 08

Node es un sistema modular por lo que la instalación

Este gestor de paquetes se instala de forma

PROYECTO FIN DE GRADO - 08

CLI (command line interface) es la interfaz de línea de

En Ms. Windows es importante utilizar el símbolo del

PROYECTO FIN DE GRADO - 08

1. Descargamos el instalador desde:

Es recomendable ejecutar el instalador con clic

Para la instalación de Node.js es recomedable

Al final sugiere algunas herramientas extras que no

Una vez que termine la instalación podemos probar

PROYECTO FIN DE GRADO - 08

Necesitamos un editor de código para editar nuestros

PROYECTO FIN DE GRADO - 08

Existe una posibilidad de trabajar con React sin utilizar

La alternativa utiliza etiquetas script e imports en

PROYECTO FIN DE GRADO - 08

Navegamos hasta la carpeta donde deseamos guardar nuestro proyecto, en el caso de

Llinux e iOS necesitarán de sudo Punto en lugar de nombre toma el de la carpeta

Una vez crado el proyecto ingresamos a la carpeta y lo probamos mediante el comando:

En una ventana de navegador podemos acceder colocando la dirección

Descripción de los componentes principales de un proyecto:

Carpeta node_modules: aquí se encuentran las dependencias

Al escribir npm start iniciamos la ejecución del proyeto y sucede lo

Se compila y crea un servidor de desarrollo, el servidor de desarrollo

Webpack toma el index.js como el punto de entrada y comienza a

Los archivos dentro de las carpetas public/ y src/ específicamente la

El proceso de creación de una aplicación através del comando

El componente principal es App.js por lo que podemos crear un

Formas de organizar los archivos de una aplicación carpetas public/ y src/:

Tipo de archivo: consiste en organizar carpetas por tipo de archivo: componentes,

Paso 1: Separa la UI en una jerarquía de componentes

Podemos iniciar por dibujar cuadros alrededor de cada componente y

Dependiendo experiencia, puedes pensar en dividir el diseño en

Si los datos estan bien estructurados es posible que se correspondan con

Los componentes en el boceto, ordenados

1. FilterableProductTable contiene toda la aplicación.

Construir una versión estática requiere mucha escritura y

Para construir la versión estática de la aplicación que

Al ser un versión estática de momento no necesitamos FilterableProductTable

Para hacer la UI interactiva, los usuarios deben poder

Pensemos en el estado como el conjunto mínimo de

El principio más importante para estructurar datos es

Buscamos la representación absolutamente mínima del

1. La lista original de productos