Preguntas y respuestas de entrevistas de React.js para 2023

Es una biblioteca JavaScript de código abierto muy popular para aplicaciones web de una sola página. Es útil cuando se crean interfaces de usuario interactivas y complejas para sitios web o aplicaciones móviles. React.js se lanzó en 2015 y desde entonces se ha convertido en una de las tecnologías más fiables y utilizadas de los últimos tiempos. Ha creado una de las mayores comunidades de desarrolladores a su alrededor.

Algunas de las características de React.js son:
En lugar de un DOM real, existe un DOM virtual.
Renderiza completamente los archivos HTML del servidor en páginas HTML del cliente, en otras palabras, renderizado del lado del servidor.
En React.js, los datos se pueden pasar a las otras partes de una aplicación sólo en una dirección. En otras palabras, hay un flujo unidireccional de datos.
It is an object which stores the component’s property values. Also, it decides how the component renders and behaves.

Las principales ventajas de React.js son:

Mejora el rendimiento de la aplicación
Se puede utilizar tanto del lado del cliente como del lado del servidor.
La legibilidad del código es mayor en React.js debido a JSX
Ofrece una fácil integración con frameworks como Angular, Meteor, etc.
Es fácil escribir casos de prueba de interfaz de usuario con React.js
Si puedes, incluye alguna experiencia práctica que demuestre las ventajas de React.js en esta pregunta de entrevista sobre React.js

JSX es la extensión de sintaxis para Javascript en React.js. Con la ayuda de JSX, es fácil definir cómo debe ser la interfaz de usuario. Además, con JSX, el archivo que contiene el código Javascript también se puede utilizar para escribir las estructuras HTML.

Cuando un usuario pulsa una tecla, hace clic con el mouse o realiza cualquier acción en la máquina o cuando la propia máquina desencadena una acción, estas acciones se registran como eventos en React.js.

• En React.js, usamos camelCase para nombrar los eventos, en lugar de las minúsculas de HTML
• En React.js, debido a JSX, se pasa una función como manejador de eventos, en lugar de la cadena en HTML

Las listas en React.js se crean de forma similar a como se crean en Javascript normal. Con las listas, los datos se pueden mostrar de forma ordenada y es útil para mostrar menús en sitios web. Para recorrer listas, se utiliza la función map(). Por ejemplo,

Un conjunto de números es tomado por la función map() y su valor es multiplicado por 5
var números = [2,4,6,8,10]
const multiplicarNumeros = numeros.map((numero => { return (numero*5); });
console.log (multiplicarNumeros);
Salida: La salida en Javascript se registrará en la consola. La salida en el caso anterior es [10, 20, 30, 40, 50].

Las claves ayudan a identificar qué objetos han sido alterados, movidos o borrados de las listas.
Con la ayuda de claves, es más fácil determinar qué objetos deben ser re-renderizados en lugar de que todos los componentes sean re-renderizados todo el tiempo.
Es común que durante la entrevista te consulten sobre el uso de cierta función o componente en la programación React.js.

No, React utiliza una sintaxis HTML-en JavaScript llamada JSX (JavaScript y XML) que convierte las etiquetas HTML en elementos React.

Marzo de 2013

Es difícil de integrar con un framework MVC como Rails. Además, los usuarios necesitan tener conocimientos sobre la integración de la interfaz de usuario en un framework MVC.

Como JSX es una combinación de HTML y Javascript, los navegadores no pueden leerlo. De ahí que sea necesario un transpilador para convertir JSX a Javascript de modo que los navegadores puedan entenderlo.

La mejor manera de nombrarlo es mediante el uso de referencia y no utilizando displayName porque proporciona un nombre claro y conciso para el componente.

El estado es mutable mientras que los Pros son inmutables. Esto significa que el estado es interno y gestionado por el componente, mientras que los props son externos y gestionados por cualquier cosa que renderice el componente.

Un componente React se considera puro si produce la misma salida cuando se le da el mismo conjunto de estado y props.

Proporciona un entorno de desarrollo para crear aplicaciones React utilizando las características de JavaScript, ya que crea una configuración básica para la aplicación sin necesidad de configurarlo todo. Es muy útil para crear una aplicación de una sola página en React.

Las claves se utilizan para proporcionar identidad a los elementos de la lista.

Las propiedades children se utilizan para pasar datos del componente padre al componente hijo.

Estos límites ayudan a detectar errores en componentes secundarios, registrar el error y mostrar una interfaz de usuario alternativa.

Para declarar fragmentos

El modo estricto estaca cualquier problema potencial en la aplicación. Lo consigue encapsulando una sección de tu aplicación como un componente. Aunque no muestra ningún elemento visible en el modo de desarrollo (tampoco afecta al rendimiento en el modo de producción), sí que emite advertencias.

Porque permite la comprobación en tiempo de ejecución de props y otros objetos similares.

A través de React hooks, no hace falta escribir una clase para usar State y algunas otras características de React

Se encargan de controlar los elementos de entrada, lo que significa que los datos del formulario son gestionados por el estado del componente. Toma su valor a través de props y hace alteraciones a través de callbacks.

Son un atributo de los elementos DOM. Es una función proporcionada por React para acceder a estos elementos. Es posible que quieras usarlos cuando quieras cambiar el valor de un componente hijo sin usar props.

React Router está disponible como un paquete npm, y puede ser añadido a tu aplicación con una sola línea de código. Una vez instalado, puedes definir tus rutas en tu aplicación y utilizar el componente para enlazar entre ellas.

Sí, puede añadir elementos JSX a otros componentes JSX.

Al crear una función dentro del método render, se anula el rendimiento del componente puro.

Es una técnica que proporciona sólo un pequeño número de filas en un momento dado. De este modo se reduce el tiempo necesario para volver a renderizar no sólo los elementos, sino también los nodos DOM.

Podemos utilizar useEffect que obtiene los datos a través de axios de la API.

Es una librería de terceros que ayuda en la programación y validación de formularios.