Fundamentos
P1 En palabras simples, ¿qué es React?
Respuesta
Es una librería front-end desarrollada para la creación de componentes reutilizables.
P1 En React todo es un componente. Explícalo
Respuesta
Todo el código en React encapsula la lógica así como los elementos básicos que muestran en la UI. Para funcionar este se tiene que retornar. Por lo tanto, es un componente.
P1 ¿Qué es el Virtual DOM?
Respuesta
Es una representación de la API del DOM del navegador, implementada en JavaScript.
El virtual DOM permite agrupar componentes de la UI, estados, eventos y valores sin recargar la página.
P1 ¿Qué es JSX?
Respuesta
Es un formato de javascript que es usado por React para representar cómo se verá la interfaz de usuario. A simple vista, el código utilizado es similar al HTML.
P1 ¿Qué son los props?
Respuesta
Se le denominan «props» a las propiedades que son pasadas de un componente a otro.
En palabras simples, son los argumentos de los componentes.
P1 ¿Qué es y cuál es la importancia del prop key en React?
Respuesta
Es un atributo que se utiliza para definir explicita e intencionalmente el identificado único que tienen los componentes.
Se utiliza principalmente cuando en un componente se definen varios componentes hijos del mismo tipo, ya que puede causar problemas al re-renderizar.
P1 ¿Qué es un Higher-Order Components (HOCs) y por qué son importantes?
Respuesta
Los HOC son un tipo de patron que tiene como objetivo el reutilizar la lógica entre los componentes.
Se definen como una función que tiene como parámetro un componente y retorna un nuevo componente.
P1 ¿Qué es un componente puro?
Respuesta
Un componente es puro si para valores y estados particulares regresa siempre el mismo componente.
Es equivalente a las «funciones puras», y se utilizan para mejorar el rendimiento de las aplicación en algunos casos de uso.
P1 ¿Qué es un estado (state)?
Respuesta
Es un valor que al cambiar es capaz de actualizar el componente en el que está.
P1 ¿Cuál es la diferencia entre los states y props?
Respuesta
Los state son propios del componente, mientras que los props se pasan por un componente padre.
P1 ¿Qué son los eventos?
Respuesta
Es una acción que es ejecutada por el usuario o el sistema. Por ejemplo, hacer click en un elemento o presionar un botón.
function clickEnvent(e) {
e.preventDefault();
}
//El evento es "onClick"
return ( <button onClick={clickEvent}> )
P1 ¿Qué son los eventos sintéticos?
Respuesta
Es la agrupación de distintos eventos nativos de los navegadores en una sola API, esto con el objetivo de mantener la consistencia sin importar el navegador que se use.
Un ejemplo es el preventDefault() que se pasa como evento.
P1 ¿Por qué se dice que React es un enlace de datos unidireccional (one-way data binding)?
Respuesta
Se le denomina así ya que el flujo de la información y de la actualización de los estados va en una dirección única.
P1 ¿Cuál es la diferencia entre un componente funcional y uno de clase?
Respuesta
Clases
- Los estados ya están definidos.
- Tienen métodos que permiten usarse en momentos particulares de la ejecución (ciclo de vida)
- Están diseñados para implementar de forma completa la lógica y los estados.
- Requieren de un método “render()” para ejecutar código jsx.
Componentes funcionales
- Requieren el uso de hooks
- No necesitan de constructores.
- De manera nativa se ejecutan siempre de forma secuencial.
P1 ¿Qué es el método createRoot?
Respuesta
Permite crear el nodo raíz en el que estarán los componentes de la aplicación.
Su estructura es la siguiente:
const root = createRoot(domNode, options?)
P1 ¿Para qué sirve el paquete react-dom?
Respuesta
Este paquete incluye los métodos del DOM que pueden implementarse en la parte superior de la aplicación.
Entre los métodos se encuentran:
createPortal()flushSync()
P1 ¿Cuál es el “strict mode” en react?
Respuesta
Es un componente de ayuda (helper), que permite visualizar problemas o puntos de mejora dentro de la aplicación.
Hooks
P1 ¿Qué son los hooks en React?
Respuesta
Son un tipo de función que te permite acceder a distintas características como states y componentes del ciclo de vida de ejecución sin la necesidad de utilizar clases.
Estos se utilizan únicamente en funciones, no en clases.
P1 ¿Cuáles son los hooks nativos?
Respuesta
Hay distintos tipos de hooks, los más conocidos son:
useStateuseEffectuseContext
P1 ¿Qué es un custom hook?
Respuesta
Son un tipo de función que permite usar hooks fuera de un componente. Su objetivo es extraer la lógica de la parte visual y reutilizar estos elementos.
Para usarse debe usarse la palabra “use” al inicio:
// Custom hook que permite extrae datos
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);
return [data];
};
P1 ¿Qué es “useRef”?
Respuesta
A grandes rasgos es un hook que te permite almacenar una referencia en el DOM sin la necesidad de usar eventos nativos como “getElementByID()”.
Otro caso de uso es para crear variables persistentes entre los renderizados, es decir,
P1 ¿Qué es “useContext”?
Respuesta
Es un hook que permite acceder a un contexto dentro de tu componente.
Características:
- Es usado para mantener estados globales, llamados “Context”.
- Es utilizado para mejorar la comunicación entre componentes
P1 ¿Qué es “useReduder”?
Respuesta
Es un hook que te permite actualizar estados
Características:
- Utiliza dos argumentos: reducer y valor inicial.
- Aunque tiene un uso e implementación similar a “useState”, la diferencia está en que permite agregar lógica extra.
- En cada actualización, regresa un nuevo estado.
//Hook
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
//Inicialiar el hook
const [state, dispatch] = useReducer(reducer, valorInicial)