Apuntes Front End III

Tabla de contenido
Primeros pasos en React.......................................................................................................................2
Herramientas y conocimientos útiles................................................................................................2
JSX..................................................................................................................................................2
Crear una aplicación con React..........................................................................................................4
¿Qué es Create React App?...........................................................................................................4
Componentes reutilizables....................................................................................................................6
Trabajando con componentes...........................................................................................................6
Componentes................................................................................................................................6
Componentes dinámicos...................................................................................................................8
Componentes con estado..................................................................................................................9
Ciclo de vida.....................................................................................................................................14
Eventos y formularios......................................................................................................................17
APIs y enrutamiento dinámico............................................................................................................17
Integración con APIs........................................................................................................................17
React Router....................................................................................................................................20
Enrutamiento estático.................................................................................................................20
Enrutamiento dinámico...............................................................................................................22
Hooks...................................................................................................................................................24
Introducción a Hooks.......................................................................................................................24
useState......................................................................................................................................25
useEffect .....................................................................................................................................26
Primeros pasos en React
Herramientas y conocimientos útiles
JSX
EL DOM Y EL DOM VIRTUAL

El DOM es una interfaz de objetos que interpreta nuestro HTML. Es el mismo que estudiamos
cuando vimos JavaScript. Sirve para acceder a nuestros elementos y poder manipularlos.

El Virtual DOM es una interpretación liviana del DOM. La biblioteca de JavaScript, React, permite la
comparación del Virtual DOM con el DOM, y hace modificaciones solo en los elementos que hayan
cambiado. Este proceso requiere menor procesamiento ya que no precisa volver a renderizar todo el
DOM, sino que solamente actualiza los elementos que hayan sufrido cambios.

¿QUÉ ES JSX?

JSX son las siglas de JavaScript XML, y es una extensión de la sintaxis de JavaScript, es decir, que nos
permite escribir JavaScript de otra forma diferente a la manera estándar. No es un requisito para
usar React, pero es muy conveniente ya que se puede escribir HTML directamente dentro de código
de JavaScript.

En el corazón de React está la idea de que en realidad la lógica de renderizado (o representación

visual) esta intrínsicamente acoplada con la lógica encargada de cómo manejar los eventos, como
cambiar de la interfaz con el tiempo y como preparar los datos para su visualización.
Por eso, React separa los aspectos (concerns) en unidades débilmente acopladas llamadas
“componentes” que contienen tanto el marcado (HTML) como la lógica (JavaScript), en lugar de
separarlos en diferentes archivos.

Integración de JSX en React

JSX es una extensión de ECMAScript que provee una forma más conveniente (syntactic sugar) de
crear elementos que llaman a la función React . createElement . JSX, es una sintaxis similar a
XML/HTML que extiende ECMAScript.

function Name (){

const name=John Doe ;
return ¿
}

Datos importantes:

1- JSX significa JavaScript XML y no es una extensión estándar. También se conoce como
JavaScript Syntax Extension, pero el nombre más aceptado es JavaScript XML
2- JSX permite crear estructuras tipo árbol compuestas por HTML o elementos de React como
si fueran variables de JavaScript
3- En realidad, JSX no es absolutamente necesario, pero es la forma actual favorecida por la
comunidad porque es más cómoda (syntactic sugar) para crear elementos, mostrar errores
y advertencias

Reglas para escribir JSX

La intención de JSX es que sea utilizado por transpiladores que conviertan los tokens JSX en
JavaScript estándar.

- Los componentes definidos por el usuario deben empezar con mayúscula. Si se tiene un
componente que comience con una letra minúscula, debe asignarse a una variable en
mayúscula antes de usarla con sintaxis JSX
- Para los elementos HTML que tiene etiquetas de cierre automático ¿ etc.), la barra diagonal
antes del corchete angular de cierre es obligatoria en JSX.
- Las expresiones entre llaves se evalúan como JavaScript, por lo que deben ser expresiones
validas de JavaScript
- JSX acepta anidación, pero la expresión debe tener solo un elemento externo
- Las propiedades (props) en JSX utilizan la convención de nomenclatura de camelCase en
lugar de la usada para nombres de atributos en HTML, porque se basa en la API DOM, no en
las especificaciones del lenguaje HTML

REACT DEVELOPER TOOLS

Estas herramientas instalan un inspector de componentes junto a las herramientas de desarrollo

nativas del navegador. De esta manera, el navegador, muestra dos pestañas nuevas en las
herramientas de desarrollo, llamadas “Componentes” y “Profiler”.
El inspector revela el árbol de componentes de React que construye la página y para cada
componente se puede verificar sus propiedades, su estado, que componente lo renderizo, que
eventos lo renderizan, y permiten evaluar la performance de los componentes.

Crear una aplicación con React

¿Qué es Create React App?
Create React App es un creador oficial de aplicaciones de React desarrollado por Facebook. CRA
configura, mediante un solo comando, un ambiente de desarrollo de forma que podemos usar las
ultimas características de JavaScript. Esto permite una gran y simple experiencia de desarrollo, y
optimizando nuestra aplicación para producción.

También genera proyecto con compilación y linting preestablecidos. También viene con un servidor
de desarrollo y soporte de aplicación web progresiva (PWA) de primera clase.

¿QUÉ ES LINTING?

Se trata de la detección de ciertos errores en el momento de desarrollo de aplicaciones (es decir,

antes de su ejecución). Entre estos podemos encontrar:

- Errores de sintaxis
- Código poco intuitivo o difícil de mantener
- Uso de “malas prácticas”
- Estilo de código inconsistentes

BENEFICIOS DE CREATE REACT APP

- Menos herramientas de configuración que aprender

- Simplifica nuestra existencia en este planeta
- Recarga automáticamente del proyecto ante cambios
- Al implementar el proyecto, los paquetes se optimizan automáticamente
- La aplicación solo necesita una dependencia de compilación
- Podemos modificar la configuración por defecto

¿CÓMO EJECUTAMOS CREATE REACT APP?

Create React App se ejecuta mediante un comando, es decir, es un CLI que se puede ejecutar en una
terminal independiente, en PowerShell, CMD, etc.

El comando básico

npx create−react −app <nombre−del− proyect >¿

O yarn:

yarn create react −app< nombre−del−proyecto >¿

También podemos crear una aplicación React en Typescript, agregando lo siguiente al final del
comando:

−−template typescript

Arrancar nuestro proyecto

Los dos comandos mas usados y que deben correrse en la terminal ubicados en la carpeta raíz del
proyecto son:

npm start

Si se tiene yarn instalado:

yarn start

¿CUÁLES SON LAS PRINCIPALES HERRAMIENTAS QUE INSTALAMOS CON CRA ADEMÁS DE REACT Y REACTDOM?

Webpack

Webpack es un empaquetador de aplicaciones que convierte archivos y módulos en un estático

distribuible. En términos mas simples, es un bundle, un conglomerado de varios recursos que una
pagina web necesita para funcionar.

- El componente obvio de un bundle es JS. Pero, en algunos casos, también incluye CSS e
imágenes, codificadas para su uso en data URLs
- El bundle frecuentemente es un solo archivo
- Beneficios de un bundle:
o Solo requiere una solicitud a la red
o Puede superponer otras optimizaciones como la mitificación y compresión de código

Cuando se le dice a Webpack que empaquete una aplicación, este mira todos los archivos que
encuentra, examina y determina que archivos dependen de otros. Crea lo que se llama un grafico de
dependencias bundles de forma inteligente para tener la cantidad mínima de código requerida para
que un sitio web o aplicación funcione.

- Empaqueta código
- Transpila Typescript
- Sabe como trabajar con React y sus archivos .tsx

Lo mejor de créate React App es que nos evita tener que configurar una aplicación por nosotros
mismos.

Babel

Bebel es un transpilador (traductor) que al mismo tiempo transforma y compila cualquier código de
JS escrito en versiones superiores a ECMAScript 2015+ a versiones de JS que los distintos
navegadores puedan leer.

Cuando aparece una nueva versión de ECMAScript, los navegadores y el motor JS de Node necesitan
tiempo para absorberla. Babel permite esto. Tomará el código y generara un polyfill (refactorizar una
característica nueva de un lenguaje utilizando características más antiguas de este)
¿Qué es ECMAScript?

Es un estándar publicado por ECMA International. Contiene la especificación para lenguaje de

scripting de propósito general. Es decir, sirve como guía o referencia para estandarizar los avances
del código de JS.

ESLint

Es una herramienta de linting. Realiza análisis de código estático para identificar patrones
problemáticos encontrados en el código JavaScript.

Jest

Jest es un marco de prueba de JS mantenido por Facebook. Diseñado y construido con un enfoque
en la simplicidad y el soporte para grandes aplicaciones web.

@testing-library

React Testing Library es una solución muy liviana para probar componentes de React. Proporciona
funciones de utilidad ligeras con el fin de fomentar mejores prácticas de testeo.

Componentes reutilizables
Trabajando con componentes
Componentes
Los componentes son piezas funcionales y fundamentales de la aplicación, ya que nos van a permitir
separar las distintas partes que conforman la estructura de un sitio web en pequeñas piezas
independientes y reutilizables. Estas están pensadas para trabajar de forma aislada, pero haciendo
parte de un “todo”.

Técnicamente, los componentes son funciones de JavaScript que se ejecutan cada vez que sea
necesario. Como cualquier función, puede estar atadas, o no, a una serie de argumentos que nos
permiten generar que este bloque de código pueda ser reutilizable, estableciendo partes de la
interfaz de usuario con información realmente dinámica.

Un componentes es una clase o una función que devuelve HTML a través de sintaxis JSX. Una vez
definido, este se inscribe dentro del árbol de componentes de la aplicación.

¿Para qué sirven?

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y

pensar en cada pieza de forma aislada.

Características

1- Anidación: Un componente puede ser mostrado dentro de otro

2- Reusabilidad: Un componente bien construido puede reutilizarse en cualquier aplicación
3- Configuración: Permite la posibilidad de configurarse en su creación

Componentes de clase vs funcionales

A partir de la versión 16.8 de React los componentes funcionales implementaron el uso de Hooks.
Esto permitió que los componentes funcionales poder brindar la misma utilidad que los de clase con
algunas ventajas relacionas a su mayor simpleza y legibilidad y su menor peso, entre otras.

De clase Funcionales
Es una clase de JavaScript que se extiende de Es una función
React . Component
Sintaxis meno breve y clara Sintaxis más breve y clara
Usa this No usa this
Usa constructor No requiere constructor
Tiene un ciclo de vida a través de métodos Usa hooks a partir de la versión 16.8
Menos facilidad de reutilización Mas reutilizables

PROPS

Las props son los datos internos de un componente. Representan información que es enviada al
momento en el que un componente es utilizado. Estas permitirán que la información interna del
componente sea variable para que podamos tener estructuras HTML realmente dinámicas y 100%
reutilizables.

Las props representan información a las que un componente puede acceder, para saber cómo o que
renderizar. Permiten el pasaje de información o atributos a entre componentes, estos atributos son
pasados desde componentes padres a los hijos como un solo objeto (props).

Esto refleja también el carácter unidireccional de los datos, que va de arriba hacia abajo.

Las props poseen cuatro características fundamentales:

1- Son inmutables. Es decir, no pueden ser modificadas por el componente hijo, solo son de
lectura
2- Son recibidas. Los hijos las reciben y las utilizan
3- Facilitan la reutilización de componentes
4- Son pasadas al componente hijo cuando este se está creando

¿Qué pasa si las props son modificadas desde el mismo componente raíz que las provee?

Un cambio de props en un componente, ameritaría un cambio en la interfaz gráfica. Es decir, el

componente iniciaría un nuevo ciclo de vida. Es importante mencionar, que para un componente
hijo, las propiedades no cambian después del render inicial.

Este tipo de flujo, de arriba hacia abajo, facilita la previsibilidad en el manejo de datos de la
aplicación. Las props, además, permiten a la arquitectura de componentes React, evitar llamadas
redundantes, facilitando la creación de componentes encapsulados y reutilizables.

FRAGMENT

Cuando se trabaja con componentes React, es necesario retornarlos dentro de una etiqueta que los
envuelva. Esto produce que, en un HTML, se creen etiquetas vacías innecesarias. Para esto, React
nos da la posibilidad de usar Fragment, un envoltorio que finalmente no generara un nodo extra en
el DOM.

¿ React . Fragment >¿/ React . Fragment >¿

¿> ¿/¿
CHILDREN

Seguramente van a existir casos en los que tengamos un componente y queramos que tenga un uso
más dinámico de manera que las props no sean suficientes. Es aquí donde cobran un particular
protagonismo los children.

A través de los children vamos a tener la capacidad de enviar, como si fuera un prop, cualquier tipo
de estructura HTML.

¿Cuándo usamos children?

En caso de no saber que contenido puede llegar a haber dentro de un componente padre, es común
que los componentes actúen como cajas o contenedores genéricos de otros componentes. En estos
casos es recomendable usar la prop especial children para pasar elementos hijos directamente en el
resultado.

const Padre=( props)=¿{

return ¿
¿÷¿
¿ h 5> Soy un padre<¿ h 5>¿
{ props . children }
¿ /¿> ¿
¿;
};

const App=()=¿{
return ¿
¿ Padre>¿
¿ Hijo autor=Soy un hijo/¿
¿ /Padre>¿
¿;
};

Esto permite que otros componentes pasen hijos arbitrarios anidando el JSX. Cualquier elemento
que pasemos dentro de la etiqueta JSX <Padre> se pasara a Padre como ¿ . children. Como resultado
obtendremos al Hijo envuelto en el contenedor Padre.

Componentes dinámicos
MAP

La función map de Array se usa para crear un nuevo array con los resultados de llamar a una función
aplicada sobre cada elemento de un array. Es decir, map aplica la función que se le indique en cada
uno de los elementos del array y devuelve un nuevo array de resultados.

La función map nos permite mapear o transformar, los elementos de un array en otros elementos
para un nuevo array.

Sintaxis en forma de function arrow:

map((element )=¿ {... })

map((element ,index)=¿ {... })

Sintaxis en forma de callback inline:

map( function callbacFn(element){... })

map(functioncallbacFn(element ,index){... })

La función map acepta un array como tercer parámetro, pero la forma en que mas se utiliza necesita
los dos primeros parámetros.

KEYS

En React, la palabra clave key es un atributo especial de tipo string que se debe incluir al crear listas
de elementos. React lo utiliza para identificar cuales elementos han cambiado, se han agregado o se
han eliminado.

Es importante asignar la propiedad key a los elemento dentro de una lista para que React pueda
identificarlos con precisión. Las keys deben ser dadas a los elementos dentro del mapeo del array
para darles una identidad única y estable.

const MiLista=( props)=¿ {

return ¿
¿÷¿
¿ ol >¿
{ props . items. map ¿
¿ li key ={index }>{item }<¿ li> ¿
¿¿}
¿ /ol> ¿
¿ /¿> ¿
¿;
};

CSS EN COMPONENTES

Existen dos aproximaciones modernas para trabajar con CSS. Módulos y componentes estilizados
(styled components)

Módulos CSS

- Escriben estilos en archivos, pero son consumidos como objetos JS

- Automatizan nomenclaturas de clases y animaciones
- Se importa el archivo en cada componente. Para acceder a las diferentes clases, se llama al
CSS como si fuese un objeto y entre llaves. ( style . nombreDeLaClase )

Componentes estilizados

- Explotan las “tagged templates”. Para poder escribir código CSS real en los componentes
- Elimina el mapeo entre componentes y estilos
Componentes con estado
En programación, al hablar de estado, nos referimos a programas que manejan sus propios datos
internos y, de alguna manera, los protegen para que no pueda ser modificados desde otras partes
del mismo o por programas externos.

Una de las formas de resolver el manejo del estado es usar clases. El concepto de clase viene del
paradigma de la programación orientada a objetos. Define la forma de comportamiento de nuevos
tipos de datos.

En la programación orientada a objetos una clase tiene dos partes diferenciadas, pero
interrelacionadas, datos internos y funciones que operan sobre estos datos internos. Los datos
internos son el estado, y las funciones permiten cambiar y actualizar los datos internos, o estados.

¿CÓMO SE ESTRUCTURAN LOS COMPONENTE DE ESTADO EN REACT?

import React ¿ react ;

class App extends React . Component {

render (){
return null ;
}
}

Para indicar que la clase es una utilización de la clase base component utilizamos la palabra
“extends”. Dentro de la clase hay una función que debe implementarse si o si, la función render, esta
debe tener un return.

Otra función importante para una clase es la función constructor. Dentro de esta función es donde
definiremos las variables de estado.

COMPONENTES STATEFUL

Los componentes stateful, o con estado, son aquellos que poseen información interna la cual, a su
vez, puede ser modificada propiamente por estos componentes. Son aquellos que pueden cambiar
su contenido a partir de eventos externos

Este tipo de componente es sumamente funcional dado que nos permite dejar de depender de las
props para trabajar con información dinámica. Sin embargo, no debemos pensar que ahora todos
nuestros componentes deberán ser stateful, ya que dicha decisión dependerá del contexto dentro
del que se utilice dicho componente.

¿ /Importamos React , aclarando que queremos trabajar con Component

import React ,{Component }¿ react ;

¿ /Usamos la palabrareservada class para definir nuestro component

¿ /Usamos la palabrareservada extends , seguida de la palabra Component
class NombreComponente extends Component {
¿ /Para poder renderizar los elementos visuales , usamos render ()
render (){
return ¿
¿ /Codigo a renderizar
¿;
}
}

export default NombreComponente ;

STATE Y setState

El estado de un componente es aquel que permite que el mismo pueda guardar información
internamente. Al estado de un componente lo llamamos “state”. Este es un objetivo literal
(clave/valor) que almacenara la información que deseemos.

Por otro lado, el setState() es un método que nos va a permitir actualizar el estado cuando lo
estimemos necesario, logrando así que sea el mismo componente quien se encargue de administrar
esta información.

El setState()programa una actualización al objeto state de un componente. Cuando el state cambia,

el componente responde volviendo a renderizar.

State

React nos beneficia en la actualización por componentes del DOM. Además, los componentes con
estado son reactivos a las interacciones con el usuario y de esto depende si se actualizan o no.

Constructor

El método constructor es necesario para poder definir la estructura de un componente.

class contador extends Component {

constructor (){
¿ /La funcion super es necesaria en React . De esta forma podemosutilizar las props que
hereda del componente padre
super( );
this . state={
valor :1 ,
};
}
}

El constructor es el único lugar donde debemos asignar this . state directamente. Este va a ser un
objeto literal.

Podemos recibir las props en el constructor. Es buena práctica utilizarlas al llamar al super.

setState
En todos los métodos que no sean el constructor debemos utilizar this . setState () .

class contador extends Component {

constructor (){
super( );
this . state={
valor :1 ,
};
}

incrementar (){
this . setState ¿
valor :this . state . valor+ 1,
}¿;
}

render (){
return ¿
¿÷¿
¿ h 1>{this . state . valor }< ¿ h1> ¿
¿ button onClick={()=¿ this . incrementar()}> Incrementar <¿ button>¿
¿ /¿> ¿
¿;
}
}

Con el evento onClick vamos a estar modificando, a través del método incrementar, el estado de
nuestro componente.

CLASES Y OBJETOS

Es equivalente a:

Manejo del estado en componentes de clase

Lo que queremos, es que las variables de estado se ajusten cuando el componente se monten.
Luego, si alguna de las variables cambia, buscaremos que se reflejen esos cambios.

costructor ( props){
super( props);
this . state={
title : ,
year :0 ,
director : ,
actors :[ ],
genre : ,
score :0 ,
};
}
Para asignar valores al estado tenemos que utilizar la función setState. Esta función podremos
aplicarla dentro de otras funciones de clase, que estarán en uso durante la vida del componente
luego de montarse, luego de actualizarse y antes de destruirse

- Después de montarse: componentDidMount . Utilizamos la función this . setState para

actualizar los valores del estado, cuando las propiedades cambian de sus valores iniciales.

componentDidMount () {
this . setState ({... this . props });
}
De esta manera cada prop es asignada a cada una de las variables de estado.

- Después de actualizarse: componentDidUpdate

- Antes de destruirse: componentWillUnmount

En resumen, cuando se crea un componente de clase, sucede lo siguiente:

1- Se invoca al constructor de la clase base y luego se invoca al constructor de la clase

componente. Dentro del constructor se debe utilizar this . state para definir las variables de
estado
2- React monta al componente en el DOM y ejecuta componentDidMount . Utilizamos
setState para actualizar el estado
3- Cuando las propiedades del componente se actualizan, se ejecutará componentDidUpdate .
Dentro de esta función, se debe utilizar setState si se desea actualizar el estado
4- Antes de destruirse el componente se ejecutará componentWillUnmount . Dentro de esta
función no se usa ni setState ni tampoco this . setState ya que este componente nunca se
volverá a renderizar

HERENCIA, ESPECIALIZACIÓN Y COMPOSICIÓN

- Herencia: Basada en clases, es un mecanismo para crear nuevas clases a partir de clases
existentes. Se utiliza la palabra clave extends
- Especialización: Es adaptar una clase para hacerla más afín con nuestras necesidades
- Reutilización: Es poder hacer uso de lo que ya tenemos a disposición, en lugar de tener que
reescribirlo o copiarlo
- Composición: Es otra forma de reutilización. Puede tener distintas formas:
o Composición de funciones
o Composición de objetos
o Composición de clases
En todas la idea es la misma: escribir funcionalidad en forma separada para poder
combinarlas. Con esto se logran estructuras menos rígidas porque las relaciones que se
forman no son jerarquías del tipo “es un”, sino que se usa del tipo “usa un”

Estructura de una clase en React

La clase más básica que podemos escribir en React es esta:

import React ¿ react ;

class App extends React . Component {

render (){
return (null);
}
}

- La biblioteca React debe estar en scope. Esto lo logramos por empezando por importar
React
- El nombre de la clase debe empezar con mayúscula y extender la clase base
React . componente
- Se debe implementar la función de clase render retornando algo, aunque sea un null

Si nuestro componente recibirá propiedades, la manera de indicárselo a la clase es escribir un

constructor que tome esas propiedades como argumento. Al hacer esto es imprescindible que
invoquemos al constructor de la clase base React . Component y le pasemos las propiedades.

class App extends React . Component {

constructor ( props){
super ( props);
}

render (){
return null ;
}
}

Es importante recordar que antes de usar this dentro del constructor debemos haber llamado a
super, que es el constructor de la clase base.

Ciclo de vida
Se podría decir que un componente tiene tres estados en su ciclo de vida:

- Montaje: Nace cuando se lo instancia en el DOM

- Actualización: Hay una serie de métodos para estas situaciones. De todos los métodos, el
único obligatorio es render(). Siendo los demás opcionales y a utilizar según la situación
- Desmontaje: Morirá cuando sea desmontado del DOM

Los componentes pueden soportar contenido estático, sino que también son capaces de lidiar con
datos propios o externos. Los cambios en estos datos, potencialmente actualizaran lo que
representan o declaran estos componentes en el DOM.

MÉTODOS MÁS USADOS

Constructor

Es llamado antes de montarse el componente. Si bien no es obligatorio, es usado para iniciar el

estado y enlazar manejadores de eventos a una instancia. Al usar el constructor en una clase que
extiende React . Component deberá llamarse a super(props), de este modo, this . props quedara
definido en el constructor.

class CounterWrapper extends Component {

constructor ( props){
super ( props);
this . state={
count :0 ,
start :false ,
};
this . handleDecrement =this . handleDecrement . bind(this);
this . handleStartingReset=this .handleStartingReset . bind (this );
}
.. .
}
No se debe copiar las props dentro del state

Render

Es el único método obligatorio en un componente de clase. Render es una función pura, no

interviene sobre el estado ni interactúa con el navegador, solo representara lo que reciba. Al ser
llamado examinara this . props y this . state e inmediatamente retornara alguna de las siguientes
opciones:

- Elementos de React creados con JSX

- Arrays
- Fragments
- Portals
- String, numbers, booleans o null

render (){
return ¿
¿ main>¿
{this . state . start =¿=true ? ¿
¿ Counter
decrement ={this . handleDecrement }
reset={this . handleStartingReset }
count={this . state . count }
¿> ¿
¿ :¿
¿ Start starting={this . handleStartingReset }/¿
¿}
¿ /main>¿
¿;
}

componentDidMount ()
Se invoca solo una vez cuando el componente se monta en el DOM. Este método no vuelve a
ejecutarse, salvo que el componente se destruya/desmonte y vuelva a ser insertado/montado en el
DOM.

Es utilizado para realizar suscripciones. También es posible llamar a setState antes de que la pantalla
se actualice.

componentDidMount (){
console . log (El componente CounterWrapper se ha montado en el DOM );
}

componentDidUpdate ()
Es invocado ante cada actualización de state o props que suceda luego del renderizado inicial.
Permite comparar valores previos con actuales y tomar decisiones en base a condiciones.

componentDidUpdate ( prevProps , prevState){

console . log (El componente CounterWrapper se ha actualizado);
if (prevState . start !=¿ this . state . start ){
if (this . state=¿=false){
console . log (El contador se a actualizado);
console . log (El componente Start se monto en el DOM);
console . log (El componente Counter desmonto del DOM);
}else {
console . log (El contador se a reinciado);
console . log (El componente Start se monto en el DOM);
console . log (El componente Counter desmonto del DOM);
}
}
if (prevState . count !=¿this . state . count∧¿ this . state . count=¿=0){
swal(You are magic!). then¿
this . handleStartingReset ();
}¿;
}
}

componentWillUnmount ( )
Es el único método que se llama cuando un componente esta por desmontarse. Si bien React
desmonta el componente por si solo, puede desconocer especificidades del componente por lo cual
no sabrá exactamente como limpiar el componente removido. Esa es la utilidad de
componentWillUnmount ( )
La limpieza es útil cuando el componente ha realizado llamadas asincrónicas. El problema básico a
abordar es si el componente realizo una llamada a una API asincrónicamente y antes de recibir la
respuesta es desmontado.

Si bien no pasara nada grave, se registrara una advertencia y no se establecerá el estado. Es útil
registrar esta advertencia para poder rastrear errores. Las acciones asincrónicas deben ser
cancelables.

Eventos y formularios
Componentes controlados vs no controlados

Cuando nos referimos a controlar, lo que queremos hacer es llevar un registro de que pasa en cada
momento en un input, tantos sus valores, como sus actualizaciones con React. Estamos controlando
los datos, asegurándonos de la integridad de los mismos, antes de guardarlos en una base de datos.

Para los componentes no controlados, el input siempre será registrado e igualmente controlado
como todo elemento insertado en el DOM. React propone controlar los inputs para hacer un manejo
eficiente de lo que esta cambiando en la aplicación, de este modo, puede trabajar con datos en su
estado. ¿Como? Por medio de state y props.

En definitiva, los componentes controlados, son controlados por React, y los no controlados, son
controlados por el DOM.

APIs y enrutamiento dinámico

Integración con APIs
EFECTOS SECUNDARIOS

Al implementar funciones puras en componentes, estos se vuelven predecibles, optimizables y

reutilizables, sin embargo, esto no consigue cubrir el alto espectro de componentes de React. Ya que
puede, en muchos casos, tener efectos secundarios.

Un efecto secundario es una consecuencia sobre algo que iniciamos, pero que no controlamos en su
desarrollo. En React, un efecto secundario, es una operación invocada dentro de un scope
especifico, pero que transcurre fuera del mismo. Por lo tanto, su resultado podría ser difícil de
manejar, afectando nuestra aplicación.

Los efectos secundarios dieron el principio de responsabilidad única (SRP). Este establece que una
clase o un módulo, debe tener solo una razón para cambiar. Esto es porque el retorno asincrónico de
datos, por parte de una API, puede provocar cambios de estados al activar acciones adicionales y
asincrónicas.
Ente esto, React, debe poder hacer predecibles y controlables los efectos secundarios. Esto lo hace
en su ciclo de vida. Luego del render inicial, los efectos secundarios pasaran por distintas fases.

ASINCRONÍA

Las llamadas asincrónicas AJAX permiten el acceso a datos mediante el objeto XMLHttpRequest .
Esta es una interfaz empleada para realizar peticiones HTTP y HTTPS.

AJAX facilitaba las peticiones mediante un código funcional, rápido y eficiente, con el beneficio de
evadir la recarga de una pagina para actualizar su información.

- Request: Cada vez que el cliente le solicita un recurso al servidor

- Response: Cada vez que el servidor le devuelve una respuesta al cliente

Fetch

Fetch es una API de JavaScript nativa para navegadores que permite realizar peticiones HTTP
asincrónicas por medio de promises. Fetch simplifica enfoques previos basados en objetos
XMLHttpRequest con un código más legible y practico. La sintaxis es la siguiente:
fetch(/noBombardeenLasToninas.api). then¿
.. .
}¿;

De este modo, retorna una promesa que solo es rechazada si ocurre un fallo de red.

fetch(url). then((res)=¿ res . json()). then((res)=¿ console . log (res))

El primer método then() recibe un string por lo que se le aplica el método nativo json() para
convertirlo en un objeto legible por JS. En el segundo then() usaremos la lógica que deseemos con
los datos obtenidos.

La función Fetch tiene un segundo parámetro: un objeto opcional que permite configurar la petición.
En este código podemos ver cómo hacer la petición con Fetch:

const options={
method :POST ,
credentials :include ,
headers :{Content-Type :application/json },
body :datos ? JSON . stringify (datos):null ,
};

fetch(url , options);

- Method: Es el método HTTP

- Credentials: Permite cambiar el modo en el que se realiza el request. Por ejemplo, habilitar
el envío de cookies al servidor
- Headers: Son las cabeceras HTTP que permiten enviar información extra
- Body: Cuerpo de la petición HTTP. Datos que enviamos al servidor

Axios
Axios es una biblioteca third party (hay que instalarla). Es un cliente HTTP que admite la API Promise
y que facilita la configuración y ejecución, a través de un cliente HTTP basado en promesas para
Node.js. En el servidor utiliza el modulo HTTP de Node.js y en el navegador usa XMLHttpRequest .

Ventajas de Axios:

- Interceptar request y responses

- Cancelar solicitudes
- Protección contra XSRF
- Transformar datos de request y responses
- Transformar automáticamente datos JSON

Diferencias entre Fetch y Axios

Fetch Axios
Es una API nativa. No se instala Es un paquete de terceros. Se instala
Sencillo de usar Es aún más sencillo de usar
No funciona en IE 11 Funciona en IE 11
Hay que convertir los datos recibidos a JSON Conversión automática
No usa XMLHttpRequest Usa XMLHttpRequest
Funciona en Node.js si se instala la Función en Node.js
dependencia node−fetch

AXIOS

import React ¿ react ;

import axios form axios ;

export default class App extends React . Component {

state={ornitorrincos :[ ]}

componentDidMount (){
axios . get( https :/¿ get .ornitorrincos . com/api/ornitorrincos )
. then¿
const ornitorrincos=response . data ;
this . setState ({ornitorrincos });
}¿
}

render (){
return ¿
¿ ul >¿
{this . state . ornitorrincos .map ¿
ornitorrinco=¿< li>{ornitorrinco . speakVeryWell }< ¿li >¿
¿}
¿ /ul >¿
¿
}
}

Método POST

axios . post ¿
firstName :Jose ,
lastName : de San Martin
}¿
. then¿
console . log (response);
}¿
. catch ¿
console . log (error );
}¿

Instancia base en Axios

¿ /api. js
import axios ¿' axios ' ;

export default axios .create ¿

baseURL:' https :/¿ autosdelsiglo 22. com' ,
headers :{X-Custom-Header :foobar }
}¿

¿ /Componente
import React ¿' react ' ;
import axios ¿' axios ' ;
import APIFUTURISTA ¿ ' ../api' ;

export default class Futuro extends React .Component {

handleSubmit =(event)=¿ {
event . preventDefault ();
APIFUTURISTA . get (voladores )
. then¿
console . log (res);
console . log (res . data);
}¿
}
}

React Router
Enrutamiento estático
¿QUÉ ES EL ENRUTAMIENTO ?
El enrutamiento es un mecanismo que abarca varias funciones, pero lo mas importante que se logra
con el es leer las URLs, interpretarlas y pasar esta información a la parte correspondiente de la
aplicaciones que se encarga de renderizar la vista correspondiente.

Es un mecanismo que interpreta y manipula las URLs, y como resultado, el navegador carga una vista
con los recursos pedidos.

URL:

- Una URL es una indicación de como acceder a ciertos contenidos en un sitio web
- Una vista es lo que el usuario ve
- Las URLs pueden venir desde la barra de direcciones del navegadores o desde eventos
disparados desde la aplicación
- Un URL no es en realidad una ruta, es más bien una indicación de como se deben armar y
conseguir los recursos. Esta indicación es interpretada por el enrutador de la aplicación

Recurso:

- Un recurso es cualquier cosa a la que se pueda acceder a través de la web

- Con un enrutador se logra el desacople de los recursos utilizados para generar una página
web y la URL que se presenta al mundo.

ENRUTAMIENTO EN EL FRONT EN Y SPA (SINGLE PAGE APPLICATION )

Con una SPA podemos conectar el back con el navegador sin necesidad de recargar la página.

Al hacer esto, damos por sentado que dentro de un sitio web cada página tiene su propia URL.
Además, si algún link nos lleva fuera del sitio web o a otra pagina del mismo sitio, esperamos ver una
indicación de que la pagina está cargando los contenidos.

También esperamos que, en documentos muy largos, al hacer clic en un link, el navegador nos lleve
exactamente al contenido dentro de la misma página. Esto lo hacen los navegadores con el hash.
Como ultima cosa, se debe poder retroceder o adelantar usando las flechas de navegación del
historial.

Problemas con las SPA

Todo el contenido se muestra en una sola página, por lo que veremos una única URL para todas las
páginas. Con esto perdemos la capacidad de marcar nuestras paginas favoritas, y de que las flechas
del historial nos faciliten la navegación.

Si la SPA simula la navegación entre paginas manipulando el identificador de fragmentos de la URL,

esto puede entrar en conflicto con la funciona natural del navegador de poder usar el identificador
de fragmentos para llevarnos a partes de la página identificadas con hashes.

Concordancia

Necesitamos mantener la concordancia entre una SPA y las funciones tradicionales del navegador.

- El usuario aun debe poder navegar con URLs usando la barra de direcciones
- Hay que mantener un historial de cambios de las URLs
- Hay que manejar los hashes que llevan a partes especificas dentro de una misma pagina
- Hay que manejar las transiciones entre estados, lo que antes era la recarga de la pagina
 - Hay que entretener e informar al usuario mientras se actualiza el estado

Dos aspectos importantes desde el punto de vista del negocio. Es importante que las URLs sean:

- SEO friendly
- Semánticas

Esto significa que queremos que las URLs sean fáciles de leer para el usuario y fáciles de ser
indexadas correctamente por los web crawlers o spiders. Para solventar esto, los frameworks
modernos reintrodujeron el concepto de enrutador, pero ahora en el lado del front end.

Un web crawler es un tipo de bot que normalmente es operado por los motores de búsqueda. Su
propósito es indexar el contenido de los sitios web en Internet para que esos sitios web puedan
aparecer en los resultados de los motores de búsqueda.

ENRUTAMIENTO ESTÁTICO EN REACT

En el enrutamiento estático se deben definir de antemano todas las rutas en una ubicación
centralizado. Luego, estas rutas están disponibles en el nivel mas externo de la aplicación, antes de
que suceda cualquier renderizado.

Para instalar React Router v3 debemos importar React-router-3

Desde npm:

npm install react−router−3

O desde Yarn :

yarn add react −router −3

Enrutamiento dinámico
Cuando hablamos de enrutamiento dinámico, nos referimos a aquel que tiene lugar mientras la
aplicación se está renderizando. La idea es que las rutas no queden agrupadas por motivos de
implementación técnica, sino por aspectos de negocio.

Instalar React router DOM:

Npm :
npm install react−router−dom

Yarn:
yarn add react −router −dom

Lo primero que tenemos que hacer es envolver nuestro componente en un componente:

class App extends React . Component {

render (){
return ¿
¿ BrowserRouter> ¿

¿ /BrowserRouter >¿
¿
}
}

export default App ;

Al envolver nuestra aplicación con browser router creamos una instancia de la API History, para
nuestro componente. La API History permite administrar fácilmente el historial de sesiones. Un
objeto de tipo historial abstrae las diferencias en varios entornos y proporciona una API mínima que
permite administrar la pila del historial, navegar, y conservar el estado entre sesiones.

Por último, tenemos que agregar el componente Switch y Route:

class App extends React . Component {

render (){
return ¿
¿ BrowserRouter> ¿
¿ Switch> ¿
¿ Route exact path=/ component={ Home }/¿
¿ Route path=/about component ={ About }/¿
¿ Route path=/contact component ={Contact }/¿
¿ Route path=/login component ={ Login }/¿
¿ /Switch>¿
¿ /BrowserRouter >¿
¿;
}
}

export default App ;

Existe otro componente que se utiliza mucho: Link, se utiliza para navegar entre paginas

¿ ul >¿
¿ li>¿
¿ Link ¿=/> Home< ¿ Link >¿
¿ /li> ¿
¿ li>¿
¿ Link ¿=/about> About <¿ Link >¿
¿ /li> ¿
¿ li>¿
¿ Link ¿=/contact>Contact <¿ Link >¿
¿ /li> ¿
¿ li>¿
¿ Link ¿=/login> Login <¿ Link > ¿
¿ /li> ¿
¿ /ul >¿
La idea mas importante que debemos entender es que con el enrutamiento dinámico ya no
necesitamos un archivo con rutas predeterminadas.

Podemos usar componentes Route y Link según lo necesitemos en cualquier componente, siempre y
cuando el componente este dentro del árbol de BrouserRouter y ya sea parte de una ruta, pero ya
no es necesario que este todo en un solo componente o archivo centralizado.

DIFERENCIAS ENTRE ENRUTAMIENTO ESTÁTICO Y DINÁMICO

En el enrutamiento estático el router decide cual vista se debe renderizar en forma centralizada
antes de que App instancie el componente. En el enrutamiento dinámico el router decide cual
pagina se debe renderizar después de que App se haya renderizado.

Diferencias clave:

Enrutamiento estático Enrutamiento dinámico

Versión Hasta la versión 3 Desde la versión 4 en adelante
Componentes de React Router Router, Route , IndexRoute BrowserRouter , HashRouter
, Switch, Route , Link
Rutas responsivas No Si. Lo que se renderiza puede
decidirse según las
dimensiones de la pantalla
Rutas semánticas y SEO- Si Si
Friendly
Permite la separación clara de No, las rutas se ponen todas Si, las rutas quedan agrupadas
aspectos juntas en un archivo por aspectos del negocio no
simplemente porque son rutas por motivos de
implementación técnica.

Hooks
Introducción a Hooks
¿QUÉ SON LOS HOOKS?

Un Hook es una función especial que permite conectarse a características de React. Los Hooks son
básicamente funciones. Permiten a componentes funcionales incorporar características de React,
previamente reservadas solo a componentes de clase.

Entre otras funcionalidades, dotan a los componentes funcionales de estado interno y ciclo de vida.
Además, resuelven problemas que React ha enfrentado por años.

Problemas con los componentes de clase de React:

- La lógica de estado no es fácil de reutilizar: React no dispone de una forma directa de

compartir lógica de estado entre sus componentes. Las soluciones mas utilizadas para
afrontar esto ( RenderProps y HOC) requieren de un nivel de reestructuración y abstracción
de los componentes, que dificultan su implementación y su seguimiento
- Los componentes complejos son difíciles de comprender
- La implementación de clases puede ser confusa y molesta

HOOKS
Los Hooks son un modo simplificado de insertar características de React como:

- Estado
- Ciclo de vida
- Contexto
- Referencias

En componentes funcionales sin alterar el funcionamiento y las bases de React, como son la
importancia de los componentes, el flujo de datos y las props.

Además, permiten:

- Una mejor y más simple reutilización, composición y testeo de código

- Extraer lógica de un componente para ser reutilizada y compartida

Beneficios:

- Menor cantidad de código

- Código más organizado
- Utilización de funciones reutilizables
- Mayor facilidad para testear
- No llama a super() en un constructor de clases
- No trabaja con el this y bind de JS
- El estado local está dentro del alcance de los handlers y las funciones de efectos secundarios
- Componentes mas reducidos que facilitan el trabajo de React

Reglas de Hooks

1- No llamar Hooks dentro de condicionales, ciclos o funciones anidadas

2- Llamar a los Hooks solo dentro de los componentes funcionales de React
3- Llamar a los Hooks en el principio de la función del componente

Hooks nativos en React

- useState : Declara variables de estado y las actualiza

- useEffect : Permite incluir y manejar efectos secundarios
- useContext : Permite crear un proveedor de datos globales para que puedan ser consumidos
por los componentes envueltos por el proveedor
- useReducer : Es una variación de useState , resulta conveniente utilizarlo cuando nos
encontramos ante un gran número de piezas de estado
- useImperativeHandle : Personaliza el valor de instancia que se expone a los componentes
padres cuando se usa ref.
- useMemo: Personaliza el valor de instancia que se expone a los componentes padres
cuando se usa ref.
- useRef : Permite utilizar programación imperativa. Devuelve un objeto mutable cuyos
cambios de valor no volverán a renderizar el componente. Por el contrario, se mantendrá
persistente durante la vida completa del componente
- useCallback : Devuelve un callback que es memorizado para evitar renderizados
innecesarios
- useLayoutEffect : Es similar a useEffect , pero se dispara de forma síncrona después de
todas las mutaciones de DOM
 - useDebugValue : Permite aplicar una etiqueta a los hooks personalizados visibles mediante
React DevTools

useState
En React, la interfaz de usuario representa el estado en el momento de renderización inicial. Si
alguna pieza de ese estado actualiza su valor, React volverá a renderizar los componentes
involucrados con dicha pieza de estado tras hacer una comparación entre el virtual DOM y el DOM
guardado en memoria. El objetivo de esto es que la actualización sea eficiente y basada en la
diferencia entre ambos DOM.

Los componentes funcionales pueden declarar y actualizar su estado interno mediante el hook
useState . Esta es una función que crea una variable que permite almacenar una pieza de estado
interno y, a la vez, actualizar dicho valor en un componente funcional.

const [ job , setJob ]=useState (Seeking)

Cada componente tiene asociado una lista interna de “celdas de memoria”. Estas celdas de memoria
se traducen en objetos literales de JS en donde incluimos nuestros datos. cuando invocamos
useState , la función va leyendo las celdas una a una. De este modo, múltiples llamados a useState
obtienen múltiples estados locales independientes. Esto nos permitiría declarar infinitas constantes
de useState .

Podemos incluir useState las veces que necesitemos, la única condición es que sea llamada desde un
nivel superior de código, no en un bloque.

Un array desestructurado es una manera de extraer elementos de arrays o propiedades de objetos

en distintas variables. Una tupla es un array en el cual sus elementos respetan un orden especifico.

Es importante remarcar que cuando llamamos a la función set de un useState , se sobrescribe el

contenido de la variable.

DIFERENCIAS EN LA IMPLEMENTACIÓN RESPECTO A CLASES

En los componentes de clase, el estado es un objeto literal, es decir, todo el estado va en ese objeto.
Con useState , si bien puede usarse el mismo patrón, tenemos la posibilidad de implementar
diversas llamadas a useState para dividir nuestro estado en piezas

CICLO useState

1- React atraviesa el árbol de componentes montándolos para dibujar la UI

2- En cada caso, React pasara las props correspondientes
3- Cada componente invoca useState por primera vez solicitando el valor inicial a useState
que a su vez se lo requiere a React
4- React retorna tanto el valor actual como la función de actualización
5- El componente configura los controladores de eventos de usuario
6- El componente utiliza el valor de estado obtenido para declarar la UI
7- React actualiza el DOM con las modificaciones requeridas
8- Cuando el controlador de eventos invoca a la función de actualización, se activa un
evento y se ejecuta el controlador. A través del handler se invoca a la función de
actualización para modificar el valor del estado.
9- React modifica el valor del estado con el valor pasado por la función de actualización
10- React llama al componente
 11- El componente vuelve a llamar a useState pero sin tener en cuenta el argumento
pasado inicialmente
12- React vuelve a retornar el valor de estado actual y la función de actualización
13- El componente crea una nueva versión del manejador de eventos y utiliza el nuevo valor
de estado
14- El componente devuelve su UI con el nuevo valor de estado
15- React actualiza el DOM con las modificaciones requeridas

useEffect
useEffect es el Hook que se encarga de configurar y gestionar los efectos secundarios en el ciclo de
vida de un componente funcional. Los hace:

- Predecible
- Controlables

Características:

- Tiene acceso a las variables dentro del componente puesto que comparten el mismo ámbito
- Se ejecuta después del primer render y también después de cada render posterior, a no ser
que se lo configure en sentido contrario
- Nos permite pensar de otro modo al ciclo de vida, en términos de sincronización de piezas
lógicas

Casos de uso:

- Establecer el título de una página de forma imperativa

- Trabajar con temporizadores:
o setInterval
o setTimeout
- Leer ancho, alto o posición de elementos del DOM
- Registrar mensajes
- Establecer u obtener valores de almacenamiento local
- Realizar peticiones a servicios

useEffect incluye un mecanismo de limpieza, el cual es una función que se ejecutara cuando se
desmonte el componente. Siempre que el componente se vuelva a renderizar, React llamara a la
función de limpieza antes de ejecutar useEffect si el efecto se ejecuta de nuevo.

Si hay varios efectos que necesitan ejecutarse de nuevo, React llamara a todas las funciones de
limpieza para esos efectos. Una vez finalizada la limpieza, React volverá a ejecutar las funciones de
limpieza según sea necesario.

OPCIONES DE USO

useEffect ejecutará su función callback por defecto cuando el componente sea montado, las
posibilidades de posteriores ejecuciones, serán controladas por el argumento deps. Contamos con
tres opciones:

1- Ejecución por render: No se define el segundo argumento

2- Ejecución tras el primer render: Se define un segundo argumento como un array vacío ([ ])
3- Correr en el primer render y si la variable incluida como dependencia cambia: Se define
alguna dependencia dentro del array