React

Question 1

¿Qué son los props en React JS?

Answer 1

Son las Propiedades que puedes pasar a un componente. Son el equivalente a pasar parámetros a una función.

Question 2

¿Por qué necesitamos usar keys en las listas?

Answer 2

Porque el Virtual DOM necesita tener una maenra de identificar y diferenciar los diferentes elementos del árbol de componentes. Cuando React renderiza un listado de elementos, usa los Key para diferenciar cada elemento individual.

Question 3

¿Qué es Babel en React JS?

Answer 3

Babel es un programa que toma como input código de JavaScript moderno y lo transforma a código JavaScript que los navegadores puedan ejecutar. Por ejemplo, el código JSX es tomado por babel y lo transforma en código JS.

Question 4

¿Qué es webpack?

Answer 4

Webpack es un programa bunddle que toma como input diferentes tipos de archivos y los transforma de manera empaquetada y lista para usar en el navegador. Junto a Babel, puede tomar un proyecto de React JS y transformarlo en un conjunto de archivos que están listos para hacer deploy.

Question 5

¿Qué son componentes en React?

Answer 5

Son la unidad primaria en React JS que usamos para definir elementos de la UI. Por ejemplo, desde un botón hasta un layout pueden ser un componente.

La idea es hacer componentes reutilizables que compongan una UI.
En React, los Componentes son bloques de construcción reutilizables que encapsulan la lógica y la interfaz de usuario relacionadas en una sola unidad.

¿Cómo podría explicarlo?

Podríamos tener un componente de encabezado que muestre el título de la página y un componente de lista que muestre una lista de elementos. Estos componentes se pueden reutilizar en diferentes partes de la aplicación para mantener un código limpio y modular.

Question 6

¿Cuál es la diferencia entre state y props?

Answer 6

state es un objeto local del componente que puede cambiar con el tiempo, mientras que las props son datos pasados a un componente desde su padre, y son inmutables.

State es el estado interno de un componente. El uso de estado es una de las características de los componentes en React JS.

Props son aquellas propiedades que un componente puede recibir de un elemento padre y pueden ser de cualquier tipo de dato.

Question 7

¿Qué son los estados y las propiedades en React? Proporciona un ejemplo de cómo los utilizarías en un componente.

Answer 7

Los estados y las propiedades son dos formas principales de manejar los datos en React. Los estados son datos internos de un componente que pueden cambiar a lo largo del tiempo, mientras que las propiedades son datos que se pasan de un componente padre a un componente hijo.

¿Cómo podría explicarlo?

En un formulario de registro, podríamos tener un componente de entrada que tenga un estado para el valor del campo y una propiedad para el nombre del campo.

Question 8

¿Cuál es la diferencia entre componentes funcionales y componentes de clase en React?

Answer 8

Los componentes de clase se basan en clases de ES6 y pueden manejar estado y ciclo de vida, mientras que los componentes funcionales son funciones y se enfocan en ser más simples. Desde React 16.8, con los Hooks, los componentes funcionales también pueden manejar estado y ciclo de vida.

Los componentes funcionales son funciones de JavaScript que devuelven elementos React, mientras que los componentes de clase son clases de JavaScript que extienden la clase Component de React. La principal diferencia es que los componentes funcionales son más simples y concisos, mientras que los componentes de clase ofrecen características adicionales como el estado y los ciclos de vida del componente.

¿Cómo podría explicarlo?

Tener un componente de clase para manejar la lógica de autenticación de un usuario y un componente funcional para renderizar un botón.

Question 9

¿Qué son los functional components?

Answer 9

Son componentes que son definidos por medio de funciones. Por ejemplo:

function App() {
// code…
}

const Button = () => {
// code…
}

Question 10

¿Cuántos tipos de componentes hay en React?

Answer 10

Existen tipos de componentes que son oficiales por React JS y otros tipos de componentes que fueron adoptados por la comunidad.

Los componentes oficiales son:

Class Component.
Funcional Component.

Algunos ejemplos de los tipos de componentes adoptados por la comunidad:

Containers components y UI components.
Smart components y dumb components.
Estos tipos de componentes son categorizados en base a la responsabilidad que le damos a cada tipo y no tanto en si son funcionales o de tipo clase.

Question 11

¿Para qué utilizas los Hooks en React?

Answer 11

Los Hooks permiten usar el estado y otras características de React en componentes funcionales sin necesidad de convertirlos en componentes de clase. Ejemplos de Hooks son useState y useEffect.

Question 12

¿Para qué sirve Redux?

Answer 12

Redux es una biblioteca para el manejo del estado global en aplicaciones JavaScript, especialmente en aplicaciones grandes. Proporciona un contenedor centralizado para el estado, lo que facilita su gestión y previsibilidad.

Question 13

¿Es React MVC?

Answer 13

No. React sería la parte de “View” de un MVC.

Question 14

¿Qué es el Virtual DOM y cómo funciona en React?

Answer 14

El Virtual DOM es una representación virtual de la estructura de un documento HTML en memoria. React utiliza el Virtual DOM para realizar actualizaciones eficientes en la interfaz de usuario, minimizando la cantidad de manipulación del DOM real. Cuando se produce un cambio en los datos, React compara el Virtual DOM anterior con el nuevo y actualiza solo los elementos que han cambiado, lo que mejora el rendimiento de la aplicación.

¿Cómo podría explicarlo?

Al agregar un nuevo elemento a una lista en una aplicación React, React compara el Virtual DOM anterior con el nuevo para determinar el cambio y actualiza solo esa parte de la interfaz de usuario.

Question 15

¿Qué es JSX?

Answer 15

JSX básicamente es JavaScript en XML (no HTML) y son una manera más amigable de definir componentes en React JS.

Question 16

¿Por qué los props son inmutables?

Answer 16

Por diseño, los props son únicamente de lectura para el componente que los recibe. El componente padre que los provee es quien puede modificarlos.

Por ejemplo, un componente padre puede pasar por prop una variable de estado. Cada vez que cambie la variable de estado, hará un re render y su cambio será reflejado también en el componente hijo que lo recibe como prop.

Question 17

¿Qué significa async await en React?

Answer 17

Async Await son una “sugar sintax” de JavaScript que sirve para resolver promesas de manera más amigable.

En React es común ver async await porque al final de cuentas, React es JavaScript.

Question 18

¿Qué son los ciclos de vida de un componente en React y por qué son importantes?

Answer 18

Los ciclos de vida de un componente en React son una serie de métodos predefinidos que se ejecutan en diferentes etapas del ciclo de vida del componente, como montaje, actualización y desmontaje. Estos métodos permiten realizar tareas específicas en cada etapa, como inicializar el estado del componente, realizar llamadas a la API y limpiar recursos.

¿Cómo podría explicarlo?

El método component DisMount se ejecuta después de que el componente se haya montado en el DOM, lo que lo hace adecuado para realizar solicitudes de datos iniciales.

El “levantamiento de estado” es un patrón en React que consiste en mover el estado compartido entre componentes hacia arriba en la jerarquía de componentes para mantener el estado en un solo lugar. Esto mejora la coherencia y la mantenibilidad del código al evitar la duplicación y el desacoplamiento excesivo entre componentes.

¿Cómo podría explicarlo?

En una aplicación de carrito de compras, podríamos mover el estado del carrito (como la lista de productos y el total) hacia arriba en la jerarquía de componentes para que esté disponible para todos los componentes relacionados con el carrito.

Question 19

¿React usa HTML?

Answer 19

No. React usa JSX, cuya sintaxis es parecida a HTML pero no debe de confundirse.

Question 20

¿Qué son las clases en React?

Answer 20

Las clases de ES6 son una manera de definir componentes.

Sin embargo, desde el punto de vista de JavaScript, una Clase no es más que una “sintax sugar” o sintaxis amigable para Simular la creación de “Clases”. Recordemos que JavaScript no es un lenguaje orientado a objetos.

Una clase en JS no es más que una función que tiene propiedades y sub funciones internas que interactúan con la variable “this”.

Question 21

¿Qué es el DOM?

Answer 21

DOM significa Document Object Model y es la manera en que JS puede interactuar programáticamente con la representación del documento/elementos creados a partir de la estructura HTML y del navegador.

Question 22

¿Qué es la propagación de eventos en React y cómo se maneja?

Answer 22

La propagación de eventos en React se refiere al proceso mediante el cual un evento se propaga desde el elemento que lo originó hasta sus ancestros en la jerarquía de componentes. En React, los eventos se manejan utilizando sintaxis similar a la de JavaScript estándar, pero con algunas diferencias clave, como el uso del método preventDefault para evitar el comportamiento predeterminado del navegador.

¿Cómo podría explicarlo?

Podríamos tener un componente de botón en una lista que maneje un evento onClick para marcar un elemento como seleccionado y luego propague ese evento hacia arriba para que otros componentes puedan responder en consecuencia.

Question 23

¿Qué son los Hooks en React y cuál es su propósito? Proporcione un ejemplo de cómo usar un Hook en un componente funcional.

Answer 23

Los Hooks son una característica introducida en React 16.8 que permite a los componentes funcionales tener estado y otras características previamente reservadas para los componentes de clase. Los Hooks proporcionan una forma más simple y concisa de manejar el estado y los efectos secundarios en los componentes funcionales.

¿Cómo podría explicarlo?

Podríamos usar el Hook useState para agregar estado a un componente funcional y el Hook useEffect para realizar efectos secundarios, como suscripciones a datos externos o limpieza de recursos.

Question 24

¿React es una biblioteca o un framework?

Answer 24

React es una biblioteca que únicamente resuelve el problema de cómo crear componentes en la UI.

Es por ello que existen otras soluciones independientes como React Router o React Redux.

Personalmente, pienso que esto es probablemente algo elemental que hace a React tan popular y versátil.

Question 25

¿Qué son las rutas en React y cómo las implementarías en una aplicación de una sola página (SPA)?

Answer 25

Las rutas en React son utilizadas para gestionar la navegación dentro de una aplicación de una sola página (SPA). Se pueden implementar utilizando bibliotecas como React Router.

¿Cómo podría explicarlo?

Se puede tener rutas para diferentes secciones de una tienda en línea, como /productos para mostrar todos los productos y /carrito para mostrar el carrito de compras del usuario.

Question 26

¿Qué son los React fragments?

Answer 26

Son una función de React que permite agrupar elementos sin agregar nodos extra al DOM. Esto es útil porque React solo permite devolver un elemento raíz en un componente.

Question 27

¿Qué son los React hooks?

Answer 27

Son funciones especiales de JS que empiezan por “use” y permiten acceder a características de React en componentes funcionales.

Question 28

¿Por qué React Hooks?

Answer 28

Ayudan a simplificar el código de componentes de tipo clase.
Permite reusar lógica de estado más fácil.
Componentes menos complejos (ciclos de vida).
Sin confusiones por la variable “this”.

Question 29

¿Cuáles son algunos de los React Hooks?

Answer 29

useState
useEffect
useContext
useRef
useCallback
useMemo
useReducer

Question 30

¿Qué es useState?

Answer 30

Es un hook de React que nos permite declarar variables de estado dentro de un componente funcional.
useState es asincrono.
const MyComponent = () => {
const [number, setNumber] = useState(1)

const updateNumber = (newNumber) => {
setNumber(newNumber)
console.log(number) // qué imprime?
}

return <button onClick={() => updateNumber(3)}>Click me</button>
}
//la respuesta es que imprime 1

Question 31

Cómo actualizar un estado de array de objetos?

Answer 31

Para actualizar una estrcutura como array o un objeto, necesitas crear uno nuevo con el dato que quieres tener modificado. Por ejemplo:

const newUserData = {
name: ‘Juanito’,
age: ‘20’,
favoriteLanguage: ‘JavaScript’,
}

const MyComponent = () => {
const [usersList, setUsersList] = useState([])

const addUser = (newUserData) => {
setUsersList(/code…/) // Cómo ????
}

return <button onClick={() => addUser(newUserData)}>Add User</button>
}

La manera de actualizarlo sería:

setUsersList([…usersList, newUserData])
La sintaxis …usersList se llama spread operator y lo que hace es retornar elemento por elemento del array en este caso.

Está entre corchetes porque estamos creando un nuevo array.

Question 32

Para qué se usa el callback de useState?

Answer 32

Considerando el siguiente ejemplo:

const MyComponent = () => {
const [number, setNumber] = useState(1)

const updateNumber = (newNumber) => {
setNumber((prevState) => {
// code…
})
}

return <button onClick={() => updateNumber(3)}>Click me</button>
}
El callback de useState se utiliza para acceder de manera inmediata al valor del estado actual y podemos usarlo para tener garantía de cuál es su valor en curso antes de modificarlo.

Question 33

¿Podemos hacer useEffect asíncrono?

Answer 33

Considera lo siguiente:

import { useEffect } from ‘react’

const MyComponent = () => {
useEffect(async () => {
// esto está bien? por qué?
const value = await Promise.resolve()
// hacer algo con value
})

// rest of the code…
}
La respuesta es que si bien puedes hacerlo, una regla de useEffect es siempre usar funciones normales como callback para poder garantizar el correcto funcionamiento y actualización dentro del mismo.

En otras palabras, puedes hacerlo pero NO deberías. Para poder usar async await en un useEffect, puedes hacer una función interna que sea asíncrona e invocarla.

Por ejemplo:

const MyComponent = () => {
useEffect(() => {
const myFn = async () => {
const value = await Promise.resolve()
}

myFn()   })

// rest of the code…
}

Question 34

¿Cómo ejecutas useEffect una sola vez al montarse el componente?

Answer 34

Necesitas pasar como segundo parámetro un array vacío, lo que indica a React que se re ejecute el useEffect cuando un elemento de ese array cambie, pero como está vacío, no hay nada que vaya a cambiar, por lo que sólo se ejecuta al montarse.

import { useEffect } from ‘react’

const MyComponent = () => {
useEffect(() => {}, [])
}

Question 35

¿Para qué sirve useMemo?

Answer 35

Para poder memorizar el resultado de operaciones complejas y así evitar sus re definiciones en re renders de manera innecesaria.

Question 36

¿Para qué sirve useCallback?

Answer 36

Para poder “memoizar” o guardar en memoria la referencia a una función. De este modo, podemos garantizar que esa función será idéntica a sí misma a través de los re renders y que sólo va a cambiar si un elemento del array de dependencias de useCallback cambia.

Question 37

¿Por qué no usar useCallback siempre?

Answer 37

Porque si bien ayuda a resolver el problema de la igualdad referencial respecto a funciones, si no vas a necesitar hacer esas comparaciones, no vale la pena usarlo pues el costo es tener código innecesariamente complejo y verboso.

import { useEffect, useCallback } from ‘react’

const MyComponent = () => {
// Vale la pena???
const myFn = useCallback(() => {
console.log(‘myFn’)
}, [])

useEffect(() => {
myFn()
}, [myFn])
}
En el ejemplo anterior, NO vale la pena.

Question 38

¿Cómo sería un ejemplo de useMemo?

Answer 38

Considera el siguiente código:

import React from ‘react’

const createArray = (length) => {
let i = length
const arr = []
while (i–) {
arr[i] = 0
}

return arr
}

const expensiveCalc = (myArray) => {
console.log(‘expensiveCalc executed’)
let c = 0
for (let i = 0; i < myArray.length; i++) {
for (let j = 0; j < myArray.length; j++) {
c = c + 1
}
}

return c
}

export const Loop = ({ arrayLength }) => {
const result = expensiveCalc(createArray(arrayLength))

return <p>Iterations: {result.toLocaleString()}</p>
}
En la función expensiveCalc estamos haciendo un ciclo for dentro de otro for, algo que se prefiere evitar dentro de lo posible porque es una operación de complejidad N al cuadrado.

Pero dado este ejemplo, una manera de evitar que el componente Loop re ejecute el mismo cálculo en cada re render, es con useMemo.

export const Loop = ({ arrayLength }) => {
const result = useMemo(() => expensiveCalc(createArray(arrayLength)), [])

return <p>Iterations: {result.toLocaleString()}</p>
}

Question 39

¿Para qué sirve useRef?

Answer 39

Para poder crear referencias a valores dentro de un componente que pueden ser elementos del DOM o variables primitivas o estructurales de JS, que al modificarlos, no ejecutarán un re render como lo haría una variable de estado.

Question 40

¿Qué usos puedes darle a useRef?

Answer 40

El Hook useRef sirve para dos propósitos principales: almacenar valores mutables que no provocan una nueva renderización cuando se actualizan y almacenar referencias a elementos del DOM.

Considera el siguiente ejemplo:

import { useRef } from ‘React’

const Form = () => {
const inputEl = useRef(null)

return (
<p>
Name:
<input type=”text” ref={inputEl} />
</p>
)
}
Puedes hacer un autofocus o acceder de manera impetariva al value de ese input como lo harías con JS vanilla.

Question 41

¿Qué es React y cuáles son sus principales características?

Answer 41

React es una biblioteca de JavaScript para construir interfaces de usuario declarativas y eficientes. Sus principales características son:
JSX: Una extensión de JavaScript que permite escribir HTML dentro de JavaScript.
Componentes: Bloques reutilizables de UI que encapsulan lógica y presentación.
Virtual DOM: Una representación interna del DOM que permite actualizaciones eficientes.
Estado: Mecanismo para gestionar cambios de datos en los componentes.
Props: Mecanismo para pasar datos entre componentes.

Question 42

¿Cómo funciona el proceso de renderizado en React?

Answer 42

React crea una representación virtual del DOM, compara las diferencias con el DOM real y actualiza solo los elementos necesarios. Esto mejora el rendimiento.

Question 43

¿Qué son los hooks en React y cómo se utilizan?

Answer 43

Los hooks son funciones especiales que permiten usar estados y otras características de React sin escribir clases. Ejemplos de hooks son useState, useEffect, useContext, etc.

Question 44

¿Cuál es la diferencia entre estado y props en React?

Answer 44

El estado es utilizado para gestionar datos internos de un componente y puede ser modificado desde dentro del componente. Las props son utilizadas para pasar datos de un componente padre a un componente hijo y no pueden ser modificadas directamente por el componente hijo.