No cabe duda de que React ha crecido significativamente en popularidad en los últimos años. Según la Encuesta para desarrolladores de Stack Overflow de 2019, React.js fue el segundo marco web más popular entre los encuestados.

React se ha vuelto tan popular porque brinda a los desarrolladores la capacidad de crear aplicaciones escalables rápidamente, un valor que muchas empresas de todo el mundo han reconocido. Como resultado, cada día se buscan más profesionales especializados en esta herramienta.

En esta guía, abordaremos las preguntas de entrevista de React.js más comunes en las entrevistas de trabajo y le brindamos consejos sobre cómo responderlas como un experto.

• ¿Qué es React JS?

Durante una entrevista, esto puede parecer una pregunta sencilla; incluso puedes pensar que se trata de un truco. Sin embargo, es una pregunta muy común en las entrevistas de trabajo técnico precisamente por su simplicidad.

React es una biblioteca de JavaScript de front-end para crear aplicaciones web. Es declarativo, lo que significa que puede diseñar vistas simples para cada estado en una aplicación web. React utiliza componentes que le permiten crear funciones reutilizables en una página web.

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

Los props y el state son dos conceptos esenciales con los que debe estar familiarizado para pasar datos a través de componentes.

El state se refiere al valor de datos predeterminado en un componente de React. El state de un componente puede cambiar con el tiempo y un desarrollador puede cambiarlo manualmente. Props, por otro lado, describe cómo se configura un componente de React. Los accesorios no cambian.

• ¿Qué son los componentes de React?

Los componentes son una característica esencial de React: son los componentes básicos de todas las aplicaciones basadas en React. Debe saber esto y poder describir qué es un componente.

Estos permiten a los desarrolladores dividir una interfaz de usuario en partes más pequeñas que se pueden reutilizar. React procesa cada componente en una página web solo cuando es necesario, lo que permite que las aplicaciones se procesen más rápido.

• ¿Cuándo se usan las keys en React?

Las keys se utilizan en React para identificar elementos únicos en el DOM virtual. Al usar claves, React puede optimizar el renderizado ya que el marco puede reciclar elementos existentes cargados en el DOM.

Suponga que tiene dos instancias de un componente en una página web. Sin keys, React representaría ambos elementos en el DOM y no reordenaría los elementos DOM. Pero, cuando usa keys, React reordenará los elementos DOM, lo que proporciona una serie de beneficios de rendimiento a una aplicación.

• ¿Cuáles son los enfoques más comunes para diseñar un componente de React?

Hay un par de formas en las que puedes diseñar un componente de React, y debería poder describir cómo funciona cada una. Estas son las principales formas en que se diseñan los componentes de React:

Clases CSS: React permite usar nombres de clases CSS tradicionales para definir estilos para un componente.
CSS en línea: CSS en línea le permite aplicar estilos a un elemento en particular en una página web.
Módulos JavaScript: los módulos JavaScript como styled-jsx y los componentes con estilo también se utilizan para diseñar componentes.
Preprocesadores: los preprocesadores como Sass y Less son otra opción para diseñar un componente.

• ¿Cuándo deberías utilizar un componente de clase en lugar de un componente funcional?

Hay dos tipos de componentes en React: de clase y funcionales.

Los componentes funcionales están definidos por un prop con propiedades invariables. Los componentes de clase, por otro lado, son componentes más complejos que le permiten administrar el estado de un componente.

Debes usar componentes de clase sobre un componente funcional cuando necesitas administrar el estado de un componente o usar métodos de ciclo de vida del componente.

• ¿Qué sucede durante el ciclo de vida de un componente de React?

El ciclo de vida de un componente de React son los eventos que ocurren desde la creación de un componente hasta su destrucción.

Tres partes principales conforman el ciclo de vida de un componente de React: inicialización, estado actualizado y destrucción.

Por ejemplo, cuando está creas un componente, puedes usar métodos como componentDidMount () para agregar detectores de eventos al componente. Esto ocurre después de que se haya inicializado un componente. Luego, puede usar componentWillUnmount () para controlar un detector de eventos de forma remota cuando el componente se eliminará de la página web.

• ¿Qué es un DOM virtual? ¿Como funciona?

Cuando un documento HTML es renderizado por un navegador web, se crea un árbol de representación llamado Modelo de objetos de documento (DOM, por sus siglas en inglés). Esto le da al navegador toda la información que necesita para representar una página web con éxito.

De forma predeterminada, una página web utilizará HTML para actualizar su DOM y realizar cambios en la página (como actualizaciones del contenido que aparece en un sitio web). React, por otro lado, crea un DOM virtual, que es una copia del DOM «real» de la página web.

Este DOM virtual se puede utilizar para cambiar la apariencia de una página web en función de una acción realizada por un usuario. Luego, una vez que se realiza un cambio en el DOM virtual, el DOM virtual se comparará con el DOM «real» y el DOM «real» se actualizará con los cambios relevantes.

El DOM virtual ofrece una serie de beneficios de rendimiento para una aplicación React, porque no es necesario volver a cargar el DOM «real» completo cada vez que se realiza un cambio en un sitio.

• ¿Qué es JSX?

JSX es una herramienta que le permite incrustar plantillas HTML sin procesar dentro del código JavaScript.

El navegador no puede leer JSX, por lo que debe utilizar herramientas como webpack y Babel para traducirlo a JavaScript legible por navegador.

JSX se utiliza porque facilita el trabajo con HTML y JavaScript en un sitio web. Los desarrolladores no necesitan usar JSX, pero es una excelente manera de reducir la complejidad de una aplicación.

• ¿Qué son los componentes sin estado?

Los componentes sin estado son un tipo de componente reutilizable que se procesa basándose únicamente en las propiedades pasadas al componente.

Mientras que los componentes regulares usan tanto props como state, los componentes sin estado solo usan props. Esto significa que un componente se renderizará en función de las propiedades que se le proporcionaron inicialmente y no cambiará con el tiempo.

Una forma eficaz de prepararse para una entrevista de trabajo técnica es practicar tus respuestas a las preguntas más comunes.

Ten en cuenta que en una entrevista de trabajo para un puesto de desarrollador web, probablemente se te preguntará sobre algo más que React. Podrían cuestionarte acerca de JavaScript u otro marco que la empresa utilice y enumere en la descripción del trabajo.

imagen: Jonathan Borba