Las 30 preguntas más tramposas sobre React.js que todo desarrollador debería conocer
React.js se ha consolidado como uno de los frameworks más populares en el desarrollo de aplicaciones web modernas. La rapidez y flexibilidad que ofrece, junto con su enfoque en componentes, lo convierte en una herramienta fundamental para cualquier desarrollador. En este artículo, analizaremos las 30 preguntas más trampa sobre React.js que es crucial que los desarrolladores conozcan.
1. ¿Qué es React.js y cuál es su propósito?
React.js es una biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario. Su principal objetivo es facilitar la creación de aplicaciones de una sola página (SPA) al permitir que los desarrolladores construyan componentes reutilizables y gestionen el estado de manera eficiente.
1.1 Historia de React.js
Desde su lanzamiento en 2013, React ha evolucionado significativamente. La introducción de conceptos como el Virtual DOM, JSX y los hooks ha revolucionado la manera en que se desarrolla la interfaz de usuario.
2. ¿Cuál es la diferencias entre el Virtual DOM y el DOM real?
El DOM real es la representación en memoria de la estructura de una página web, mientras que el Virtual DOM es una copia ligera de este. React utiliza el Virtual DOM para optimizar el rendimiento; cuando se producen cambios en la interfaz, solo se actualizan las partes necesarias en lugar de renderizar todo el documento.
2.1 Ejemplo de Virtual DOM
Supongamos que tenemos un componente que muestra una lista de usuarios. Si decidimos agregar un nuevo usuario, React solo actualizará la lista en el Virtual DOM y luego sincronizará los cambios con el DOM real. Esto reduce drásticamente el tiempo de renderización.
3. ¿Qué son los props en React?
Los props (propiedades) son un mecanismo fundamental para pasar datos y configuraciones de un componente a otro. Permiten a los componentes ser dinámicos y reutilizables.
3.1 Ejemplo de props en acción
function Saludo(props) {
return <h1>Hola, {props.nombre}!</h1>;
}
// En otro componente
<Saludo nombre="Juan"/>;En este caso, el componente Saludo recibe un prop llamado nombre y lo utiliza para mostrar un saludo personalizado.
4. ¿Qué son los state y cómo se utiliza en un componente?
El state es una estructura que permite almacenar información sobre el componente y que puede cambiar con el tiempo. A diferencia de los props, los estados son gestionados internamente y no son accesibles por componentes externos.
4.1 Ejemplo de manejo de state
import React, { useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>{contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}Aquí, useState inicializa el estado del contador en 0 y permite actualizarlo cuando se hace clic en el botón.
5. ¿Qué son los hooks en React?
Los hooks son funciones introducidas en React 16.8 que permiten utilizar el estado y otros aspectos de React sin escribir una clase. El hook más común es useState, pero también existen otros como useEffect y useContext.
5.1 Ejemplo de useEffect
El hook useEffect es utilizado para manejar efectos secundarios, como la llamada a APIs:
import React, { useEffect, useState } from 'react';
function Usuarios() {
const [usuarios, setUsuarios] = useState([]);
useEffect(() => {
fetch('https://api.example.com/usuarios')
.then(response => response.json())
.then(data => setUsuarios(data));
}, []); // El array vacío significa que solo se ejecutará una vez al montar el componente.
return (
<ul>
{usuarios.map(usuario => <li key={usuario.id}>{usuario.nombre}</li>)}
</ul>
);
}6. ¿Qué papel juegan las clases en React?
Aunque hoy en día los hooks son más populares, las clases siguen siendo una forma válida de crear componentes en React. Las clases proporcionan un enfoque basado en la OOP (programación orientada a objetos).
6.1 Ejemplo de componente de clase
class Saludo extends React.Component {
render() {
return <h1>Hola, {this.props.nombre}!</h1>;
}
}Este componente de clase se comporta de manera similar al componente funcional que vimos anteriormente.
7. ¿Cómo se manejan los eventos en React?
Manejar eventos en React es bastante sencillo. Utilizamos la notación camelCase para los nombres de los eventos y asignamos funciones para gestionar las interacciones del usuario.
7.1 Ejemplo de manejo de eventos
function Boton() {
const manejarClick = () => {
alert('¡Botón clickeado!');
};
return <button onClick={manejarClick}>Clic aquí</button>;
}En este ejemplo, se llama a la función manejarClick cuando se hace clic en el botón.
8. ¿Qué es el contexto en React?
El contexto es una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Es útil para compartir información global como temas, usuarios autenticados o configuraciones.
8.1 Ejemplo de uso de contexto
const TemaContexto = React.createContext();
function App() {
const tema = 'oscuro';
return (
<TemaContexto.Provider value={tema}>
<ComponenteA />
</TemaContexto.Provider>
);
}
function ComponenteA() {
return <ComponenteB />;
}
function ComponenteB() {
const tema = React.useContext(TemaContexto);
return <div>El tema es {tema}</div>;
}Aquí, el contexto se usa para pasar el tema desde App hacia ComponenteB sin necesidad de hacerlo a través de ComponenteA.
9. ¿Cuáles son los diferencias entre componentes controlados y no controlados?
Los componentes controlados son aquellos cuyas decisiones de estado son controladas por React, mientras que los no controlados almacenan su propio estado.
9.1 Ejemplo de componente controlado
function FormularioControlado() {
const [valor, setValor] = useState('');
return (
<input
type="text"
value={valor}
onChange={e => setValor(e.target.value)}
/>
);
}9.2 Ejemplo de componente no controlado
function FormularioNoControlado() {
const inputRef = useRef();
const manejarSubmit = () => {
alert('Valor: ' + inputRef.current.value);
};
return (
<form onSubmit={manejarSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Enviar</button>
</form>
);
}10. ¿Qué es el lifecyle de un componente en React?
El ciclo de vida de un componente se refiere a las etapas por las que pasa un componente durante su existencia, desde su creación hasta su destrucción. Los métodos componentDidMount, componentDidUpdate y componentWillUnmount son ejemplos de métodos de ciclo de vida en componentes de clase.
10.1 Ejemplo de ciclo de vida
class MiComponente extends React.Component {
componentDidMount() {
console.log('El componente se ha montado');
}
componentWillUnmount() {
console.log('El componente se va a desmontar');
}
render() {
return <div>Hola, soy un componente</div>;
}
}Comparación con otros frameworks
React vs Angular
React se enfoca principalmente en la creación de interfaces de usuario, mientras que Angular es un framework completo que proporciona un conjunto completo de herramientas y contenido para desarrollos a gran escala. Aunque ambos permiten crear aplicaciones SPA, React es más flexible, mientras que Angular tiende a imponer una estructura más rígida.
Preguntas Frecuentes (FAQs)
1. ¿Es React.js adecuado para principiantes?
Sí, aunque puede requerir una comprensión básica de JavaScript. La comunidad de React es amplia y hay muchos recursos disponibles que facilitan la curva de aprendizaje.
2. ¿Se puede usar React para el desarrollo móvil?
Sí, React Native es un marco que permite crear aplicaciones móviles utilizando React, lo que facilita la reutilización del código.
3. ¿React es solo para aplicaciones de una sola página (SPA)?
Aunque React es ideal para aplicaciones SPA, también se puede utilizar en sitios web multipágina si se combina con herramientas como React Router para manejar la navegación.
Conclusión
Conocer estas 30 preguntas sobre React.js no solo nos preparará mejor para entrevistas, sino que también nos proporcionará una comprensión más profunda de este potente framework. Entender cómo funcionan las props, el estado, los hooks y el ciclo de vida de los componentes es fundamental para desarrollar aplicaciones eficientes y escalables. En el mundo del desarrollo web, React sigue siendo un protagonista crucial y dominarlo puede abrir numerosas puertas en nuestro camino profesional.
