Q1. Si deseas importar solo el Component de la biblioteca React, ¿qué sintaxis utilizas?

• import React.Component from 'react'
• import [ Component ] from 'react'
• import Component from 'react'
• import { Component } from 'react'

Q2. Si un componente de función siempre debe renderizarse de la misma manera dado los mismos props, ¿qué optimización de rendimiento simple está disponible para ello?

• Envuélvelo en el componente de orden superior React.memo.
• Implementa el Hook useReducer.
• Implementa el Hook useMemo.
• Implementa el método de ciclo de vida shouldComponentUpdate.

Q3. ¿Cómo solucionas el error de sintaxis que resulta de ejecutar este código?

const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

• Envuelve el objeto entre paréntesis.
• Llama a la función desde otro archivo.
• Agrega una declaración de retorno antes de la primera llave.
• Reemplaza el objeto con un array.

Q4. Si ves la siguiente importación en un archivo, ¿qué se está utilizando para la gestión del estado en el componente?

import React, {useState} from 'react';

• React Hooks
• componentes con estado
• matemáticas
• componentes de clase

Q5. Usando la mejora de literales de objetos, puedes volver a colocar valores en un objeto. ¿Cuál es la salida cuando registras person en la consola?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

• {{name: "Rachel", age: 31}}
• {name: "Rachel", age: 31}
• {person: "Rachel", person: 31}}
• {person: {name: "Rachel", age: 31}}

Q6. ¿Cuál es la biblioteca de pruebas más asociada con React?

• Mocha
• Chai
• Sinon
• Jest

Referencia

Q7. Para obtener el primer elemento del array ("cooking") utilizando la destructuración de arrays, ¿cómo ajustarías esta línea?

const topics = ['cooking', 'art', 'history'];

• const first = ["cooking", "art", "history"]
• const [] = ["cooking", "art", "history"]
• const [, first]["cooking", "art", "history"]
• const [first] = ["cooking", "art", "history"]

Q8. ¿Cómo manejas el paso a través del árbol de componentes sin tener que pasar props manualmente en cada nivel?

• React Send
• React Pinpoint
• React Router
• React Context

Referencia

Q9. ¿Qué debería leer la consola cuando se ejecute el siguiente código?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);

• Horse
• Cat
• Mouse
• indefinido

Q10. ¿Cuál es el nombre de la herramienta utilizada para tomar JSX y convertirla en llamadas createElement?

• JSX Editor
• ReactDOM
• Browser Buddy
• Babel

Q11. ¿Por qué podrías usar useReducer en lugar de useState en un componente React?

• cuando quieres reemplazar Redux
• cuando necesitas gestionar un estado más complejo en una aplicación
• cuando quieres mejorar el rendimiento
• cuando quieres romper tu aplicación de producción

Q12. ¿Qué props del objeto de props están disponibles para el componente con la siguiente sintaxis?

<Message {...props} />

• cualquier prop que no haya cambiado
• todas ellas
• props secundarios
• cualquier prop que haya cambiado

Q13. Considera el siguiente código de React Router. ¿Cómo llamas a :id en la propiedad path?

<Route path="/:id" />

• Esto es un modal de ruta
• Esto es un parámetro de ruta
• Esto es un divisor de ruta
• Esto es un enlace de ruta

Q14. Si creaste un componente llamado Dish y lo renderizaste en el DOM, ¿qué tipo de elemento se renderizaría?

function Dish() {
  return <h1>Macarrones con queso</h1>;
}

ReactDOM.render(<Dish />, document.getElementById('root'));

• div
• sección
• componente
• h1

Q15. ¿Cómo se ve este elemento de React dado el siguiente código? (Alternativamente: Dado el siguiente código, ¿cómo se ve este elemento de React?)

React.createElement('h1', null, "¿Qué está pasando?");

• <h1 props={null}>¿Qué está pasando?</h1>
• <h1>¿Qué está pasando?</h1>
• <h1 id="component">¿Qué está pasando?</h1>
• <h1 id="element">¿Qué está pasando?</h1>

Referencia

Q16. ¿Qué propiedad necesitas agregar al componente Suspense para mostrar un spinner o estado de carga?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

• lazy
• loading
• fallback
• spinner

Referencia

Q17. ¿Cómo describirías la variable message envuelta entre llaves a continuación?

const message = 'Hola';
const element = <p>{message}</p>;

• una función JS
• un elemento JS
• una expresión JS
• un contenedor JSX

Q18. ¿Qué puedes usar para manejar la división de código?

• React.memo
• React.split

[x] React.lazy

• React.fallback

Q19. ¿Cuándo usas useLayoutEffect?

• para optimizar para todos los dispositivos
• para completar la actualización
• para cambiar el diseño de la pantalla
• cuando necesitas que el navegador pinte antes de que se ejecute el efecto

Source "useLayoutEffect es una versión de useEffect que se dispara antes de que el navegador repinte la pantalla."

[Explicación] La respuesta correcta a la pregunta "¿Cuándo usas useLayoutEffect?" es:

Cuando necesitas cambiar el diseño de la pantalla.

useLayoutEffect se utiliza cuando necesitas realizar mutaciones en el DOM que dependen del diseño actualizado de los elementos. Te permite hacer cambios en el DOM de forma síncrona antes de que el navegador realice su paso de pintura. Esto puede ser útil cuando necesitas medir o manipular el diseño, como acceder a dimensiones o posiciones de elementos, calcular desplazamientos de desplazamiento u realizar otras operaciones que requieran información de diseño actualizada.

La otra opción proporcionada como respuesta no es precisa:

"Cuando necesitas que el navegador pinte antes de que se ejecute el efecto" no es correcto. El propósito de useLayoutEffect es ejecutar el efecto de forma síncrona después de que se actualiza el DOM pero antes de que el navegador pinte, lo que te permite realizar cambios relacionados con el diseño antes de que ocurra el renderizado visual.

Q20. ¿Cuál es la diferencia entre los comportamientos de clic de estos dos botones (asumiendo que this.handleClick está vinculado correctamente)?

A. <button onClick={this.handleClick}>Haz clic</button>
B. <button onClick={event => this.handleClick(event)}>Haz clic</button>

• El botón A no tendrá acceso al objeto de evento al hacer clic en el botón.
• El botón B no activará correctamente el controlador this.handleClick.
• El botón A no activará correctamente el controlador this.handleClick.
• No hay diferencia.