React
1. ¿Cuál es la diferencia entre componentes controlados y componentes no controlados en React? ¿Cuándo usarías uno u otro?
Los componentes controlados son aquellos cuyos elementos y eventos son controlados y actualizados enteramente por React, tales como los inputs,checkboxs, states, etc. Mientras que los componentes no controlados son aquellos cuyo control se hace directamente mediante el dom, sin la intervencion de React.
2. Explica el concepto de renderizado condicional en React y proporciona ejemplos de cómo se puede implementar.
El renderizado condicional consiste en mostrar elementos en pantalla en base a si se cumplen o no ciertas condiciones, ejemplo de implementacion:
{num === 1 ? <p>El numero es 1</p> : <p>El numero no es 1</p>}
3. ¿Qué es el contexto en React y cuál es su propósito? ¿Cómo se puede utilizar para compartir datos entre componentes?
El contexto en react es una caracteristica la cual permite compartir datos entre componentes, sin tener que utilizar props para pasarlos a traves de la jerarquía de componentes.
Para utilizarse primero se crea un context mediante la api de react ‘createContext’, luego se define el provider junto con el value que se pasara a todos los componentes, y se consume mediante el hook ‘useContext(Context.js);
4. Describe cómo se manejan los eventos en React y cómo se diferencia del manejo de eventos en HTML puro.
5.Explica qué son los hooks en React y menciona al menos tres hooks incorporados en React y su propósito.
Los hooks son componentes especiales de react que pueden ser usados en los componentes funcionales, a su vez de poder crearlos nosotros mismos, alguno de ellos son:
useEffect: sirve para especificar que es lo que se va a ejecutar la primera vez que se monte el componente, o que se va a ejecutar en respuesta a cambios en las propiedades que se le especifique, a estas propiedades se le denominan dependency list.
UseRef: sirve para mantener una referencia mutable que se mantendra constante durante toda la vida util del componente, ademas de que pueden utilizarse para acceder directamente a elementos del DOM, por ejemplo una referencia utilizando useRef no vuelve a renderizar el componente si su valor cambia. Un uso recurrente es para mantener valores constantes durante todo el componente.
import React, { useRef } from 'react';
function ExampleComponent() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>Focalizar Input</button>
</div>
);
}
useState: sirve para agregar y manejar los estados de un componente, permitiendo declarar una variable de estado dentro del componente y proporcionando un metodo para actualizar ese estado.
7. ¿Qué es el enrutamiento en React? Explica cómo se puede implementar el enrutamiento en una aplicación de React.
El enrutamiento en React es una forma para utilizar diferentes path en la url del navegador, y que como respuesta al acceder a una de ellas se renderice un componente react en específico. Se puede implementar mediante la librería react-router-dom u otras.
8. Describe las diferencias entre el estado y las props en React. ¿Cuándo usarías uno u otro para manejar los datos en un componente?
Los estados son variables internas dentro del componente que pueden cambiar su estado, y tambien modificar la representacion visual del componente.
Las props son propiedades externas que se pasan de un componente padre al componente hijo.
9. ¿Qué es el virtual DOM en React y cómo contribuye a mejorar el rendimiento de la aplicación?
El virtual DOM es una representacion virtual del DOM en memoria que contribuye a mejorar el rendimiento y optimizar las actualizaciones en la interfaz de usuario.
Al realizar un cambio en la interfaz de usuario React crea un nuevo virtual DOM y lo compara con su antecesor para determinar que elementos del DOM deben ser actualizados, de esta forma react solamente actualiza los elementos necesarios en el DOM.
11. ¿Qué son las "claves" (keys) en React y cuál es su importancia al renderizar listas de elementos? ¿Por qué se recomienda que las claves sean únicas dentro de un conjunto de elementos?
Las prop keys en react sirven para darle un identificador unico a cada elemento, esto para evitar durante la renderizacion de estos. Es importante que las claves sean unicas para que React pueda hacer una actualizacion eficiente y optima, y no utilizar index, porque al eliminar o modificar la clave React puede encontrar problemas al intentar renderizar ese elemento, dando como resultado a errores tales como datos duplicados, etc.
12. ¿Cuál es el propósito de la función React.Fragment en React y cuándo deberías utilizarla en lugar de un elemento contenedor común?
El proposito de React.Fragment es proporcionar un contenedor vacío en el cual se le pueden introducir nuevos elementos, se debe utilizar cuando deseas agrupar elementos y no quieres que su contenedor no afecte directamente a ellos, agregando cosas innecesarias al DOM.
el event.preventdefault() es para detener todo lo que haga el evento al ser lanzado, por ejemplo cuando tiene que redireccionar a algun lado con el anchor esto lo detiene