linkedin-skill-assessments-quizzes

React.js

Q1. Si quisieras importar solamente un componente de la librería de React, ¿qué sintaxis usarías?

Q2. Si una función componente quisiera rendearse de la misma manera dados los mismos parámetros, ¿cuál es una optimización simple disponible para el mismo?

Q3. ¿Cómo resuelves el error de sintáxis que resulta al ejecutar el siguiente código?

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

Q4. Si ves el siguiente import en un archivo, ¿qué dirías se está usando como administrador de estado en el componente?

import React, {useState} from 'react';

Q5. Utilizando enriquecimiento literal de objetos, tu puedes ponerle valores de vuelta en los mismos. En este ejemplo, cuando leas el resultado del log en la consola, ¿qué leerás?

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

Q6. ¿Cuál es la librería de testeo más usualmente asociada con React?

Q7. Utilizando deconstrucción de arrays, ¿Cómo obtendrías el primer item del array (“cooking”)?

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

Q8. ¿Qué utilizas para pasar propiedades hacia abajo en un árbol de componentes sin tener que manualmente definir en cada uno de ellos parámetros para recibirlos?

Q9. ¿Qué se imprimirá en la consola el ejecutar el siguiente código?

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

Q10. ¿Qué herramienta es la que se usa para convertir JSX en llamadas a createElement

Q11. ¿Porqué utilizarías useReducer en lugar de useState en un React component?

Q12. Utilizando la siguiente sintáxis, ¿Qué propiedades están disponibles para el componente?

<Message {...props} />

Q13. Considerando el siguiente código de un React Router, ¿Cómo se le llama al “:id” en la ruta del parámetro path?

<Route path="/:id" />

Q14. Al renderizar el componente Dish, ¿Qué elemento html resultaría agregado al DOM?

function Dish() {
  return <h1>Mac and Cheese</h1>;
}

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

Q15. Dada la siguiente llamada, ¿Qué elemento resultará creado en el DOM?

React.createElement('h1', null, "What's happening?");

Q16. ¿Qué propiedad necesitas definirle al componente Suspense para que muestre un indicador de progreso?

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

Q17. ¿Cómo se le llama al mensaje entre llaves?

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

Q18. ¿Qué se utiliza para realizar/ejecutar fraccionamiento de código?

Q19. ¿Cuándo se utiliza useLayoutEffect?

Q20. ¿Cuál es la diferencia en el comporamiento de los receptores del evento onClick de estos dos botones? (asumiendo que this.handleClick está correctamente bindeado)

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

Q21. ¿Cómo deconstruyes las propiedades que son enviadas al componente Dish?

function Dish(props) {
  return (
    <h1>
      {props.name} {props.cookingTime}
    </h1>
  );
}

Q22. ¿Cuándo usarías un React.PureComponent?

Q23. ¿Porqué es importante evitar copiar valores de las propiedades de un componente a su estado interno siempre que sea posible?

Q24. ¿Qué és la propiedad children?

Explicación

Q25. ¿Qué atributo se utiliza para reemplazar la propiedad innerHTML en el DOM del navegador?

Q26. ¿Cuál de estos términos comunmente describe una aplicación de React?

Q27. Cuando utilizas webpack, ¿Cuándo necesitarías utilizar un “cargador” (loader)?

Q28. Una representación de una interfaz de usuario que es mantenida en la memoria en sincronía con el DOM “real” ¿cómo se llama?

Q29. Haz escrito el siguiente código, pero nada se renderiza. ¿Cómo solucionas este problema?

const Heading = () => {
  <h1>Hello!</h1>;
};

Q30. To create a constant in JavaScript, which keyword do you use?

Q30. Para definir una constánte en javascript, ¿Qué keyword se utiliza?

Q31. ¿Cómo se llama a un React component que capture errores de Javascript en cualquier lugar del arbol de componentes?

Q32. ¿En qué método de ciclo de vida de un componente de clase se deben hacer peticiones de datos?

Q33. Los componentes en React se componen para crear interfaces de usuario. ¿Cómo se componen los componentes en sí mismos?

Q34. Todos los componentes en React deben actuar como _ con respecto a sus propiedades.

Q35. ¿Cómo se le llama a este fragmento [e.target.id] utilizado en el código de abajo?

handleChange(e) {
  this.setState({ [e.target.id]: e.target.value })
}

Q36. ¿Cuál es el nombre de este componente?

class Clock extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}

Q37. ¿Qué se le envía a una función Array.map() ?

Q38. ¿Porqué sería una buena idea pasarle una función a setState en lugar de un objeto?

Explicación/Hint

Q39. ¿Qué paquete contiene la función render() que renderiza los elementos React en el DOM?

Q40. ¿Cómo se define un valor por defecto en un campo de formulario no controlado?

Q41. ¿Qué tienes que cambiar en el siguiente código para que el mismo pueda ejecutarse sin errores?

class clock extends React.Component {
  render() {
    return <h1>Look at the time: {this.props.time}</h1>;
  }
}

Explicación: En JSX, nombres en minúsculas son considerados elementos de HTML. Lee este artículo

Q42. ¿Qué Hook puede ser usado para cambiar el título de la página?

Q43. ¿Qué se usa para cargar componentes de forma perezosa (lazy load)?

Q44. ¿Cómo puedes invocar el callback setDone solamente cuando el componente sea montado?

function MyComponent(props) {
  const [done, setDone] = useState(false);

  return <h1>Done: {done}</h1>;
}

Q45. Actualmente, handleClick está siendo invocado en vez de estar siendo pasado como referencia. ¿Cómo arreglamos esto?

<button onClick={this.handleClick()}>Click this</button>

Q46. ¿Qué respuesta mejor describe a una función componente?

Q47. ¿Qué librería define el método global fetch()?

Q48. ¿Qué ocurrirá cuando este hook useEffect se ejecute, asumiendo que name no sea igual a “john”?

useEffect(() => {
  setName('John');
}, [name]);

Q49. ¿Qué opción no causara que un componente React se vuelva a renderizar?

Q50. Creaste un nuevo método en un componente de clase llamado handleClick, pero no está funcionando. ¿Qué está faltando?

class Button extends React.Component{

  constructor(props) {
    super(props);
    // ¿Qué falta pones aquí?
  }

  handleClick() {...}
}

Q51. React no renderiza dos componentes anexos a menos que estén envueltos en un fragmento. Debajo se muestra una forma de renderizar un fragmento. ¿Cuál es el otro método más corta para hacer lo mismo?

<React.Fragment>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</React.Fragment>

<...>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</...>

<//>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
<///>

<>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</>

<Frag>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</Frag>

Q52. Si quisieras monstrar el valor de la variable del estado count, ¿Qué necesitas agregar dentro de las llaves en el elemento h1?

class Ticker extends React.component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <h1>{}</h1>;
  }
}

Q53. Según el código siguiente, ¿Cuándo será asignado el componente Hello a la variable greeting?

const greeting = isLoggedIn ? <Hello /> : null;

Q54. En el siguiente código, ¿Cuál será el tipo del valor que la propiedad orderNumber recibirá?

ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));

Q55. Agregaste una propiedad de estilo en el elemento h1 pero hay un error inesperado indicando un error de token al ejecutarlo. ¿Cómo lo solucionas?

const element = <h1 style={ backgroundColor: "blue" }>Hi</h1>;

Q56. ¿Qué función es usada para actualizar variables de estado en un componente de clase React?

Q57. Considerando el siguiente componente. ¿Cuál es el color por defecto para el icono de Star?

const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;

Q58. Cuál es la diferencia entre los comportamientos ante el evento onClick para estos dos botones? (asumiendo que this.handleClick no fue bindeado correctamente)

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

Q59. Cómo agregarías en este código, de React Router, un componente llamado About cuando esta ruta se active?

<Route path="/:id" />

<Route path="/:id">
  {' '}
  <About />
</Route>

<Route path="/tid" about={Component} />

<Route path="/:id" route={About} />

<Route>
  <About path="/:id" />
</Route>

Q60. Qué componente de clase es equivalente a este componente de función?

const Greeting = ({ name }) => <h1>Hello {name}!</h1>;

class Greeting extends React.Component {
  constructor() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

class Greeting extends React.Component {
  <h1>Hello {this.props.name}!</h1>;
}

class Greeting extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

class Greeting extends React.Component {
  render({ name }) {
    return <h1>Hello {name}!</h1>;
  }
}

Q61. De acuerdo al siguiente código, ¿Qué proporciona el segundo parámetro que se le pasa a la función?

ReactDOM.render(
  <h1>Hi<h1>,
    document.getElementById('root')
)

Q63. ¿Qué és el primer parámetro x, que es enviado a la función createElement?

React.createElement(x, y, z);

Q64. ¿Qué método de ciclo de vida de un componente de clase sería llamado al mismo tiempo que este hook?

useEffect(() => {
  // do things
}, []);

Q65. ¿Cuál es el nombre del componente base de este componente?

class Comp extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}

Q66. Cuando utilizas un Portal, ¿Qué va en el primer parámetro?

ReactDOM.createPortal(x, y);

Explicación: Portals

Q67. ¿Qué es setCount?

const [count, setCount] = useState(0);

Referencia Hooks-State

Q68. ¿Cuál es el uso de la función map en el código de abajo?

const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);

Q69. Describe ¿qué está ocurriendo en este código?

const { name: firstName } = person;

Q70. ¿Qué esta mal con este código?

const MyComponent = ({ names }) => (
  <h1>Hello</h1>
  <p>Hello again</p>
);

Q71. Cuando se usa un portal, ¿Qupe es el segundo argumento?

ReactDOM.createPortal(x, y);

Q72. Dado el siguiente código, ¿Qué será renderizado dentro del tag <h1>?

const MyComponent = ({ children }) => (
  <h1>{children.length}</h1>
);
...
<MyComponent>
<p>Hello</p>
<p>Goodbye</p>
</MyComponent>

Q73. ¿Cómo se llama a este patrón de asignación?

const [count, setCount] = useState(0);

Q74. ¿Cuál es el primer archivo cargado por el navegador en un proyecto básico de React?

Q75. El código de abajo no esta renderizando nada, y hay un error que dice “ReactDOM is not defined.” ¿Cómo lo resolvemos?

import React from 'react';
import { render } from 'reactjs-dom';

const element = <h1>Hi</h1>;

ReactDOM.render(element, document.getElementById('root'));

Q76. En este componente, ¿cómo mostramos si el usuario esta logueado o no?

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is:
    </div>
  );
}

Q77. Estas renderizando una lista en React cuando la siguiente advertencia aparece en la consola: “Warning: Each child in a list should have a unique ‘key’ prop.” ¿Cómo resolvés este asunto?

Q78. ¿Cómo crearías código de boilerplate para un nuevo app que quieres hacer para coleccionar pantalones?

Create react app

Q79. Agregá código que dispare torpedos de fotones cuando el botón sea cliqueado.

class StarTrekkin extends React.Component {
  firePhotonTorpedoes(e) {
    console.log('pew pew');
  }
  render() {
    return; // El código hay que agregarlo aquí
  }
}

Handling Events

Q80. ¿Cómo se llama al proceso para decidir si una update es necesaria o no?

Q81. React es un proyecto open-source pero ¿qué compañía lo mantiene?

Q82. ¿Qué comando podés usar para crear un proyecto en React?

hint

Q83. ¿Cuál es la extensión de navegador que los desarrolladores de React usan para debugear sus aplicaciones?

Q84. ¿Qué herramienta no es parte de Create React App?

Q85. ¿Cuál es la extensión de sintáxis en Javascript que se usa comunmente para crear elementos React?

Q86. ¿Cómo podrías chequear el tipo de dato de las propiedades sin utilizar Flow o Typescript?

Q87. ¿Cómo le agregarías el id heading al siguiente elemento h1?

let dish = <h1>Mac and Cheese</h1>;

Q88. ¿Qué valor para el componente button nos permitiría pasarle el nombre de la persona para abrazar?

class Huggable extends React.Component {
  hug(id) {
    console.log("hugging " + id);
  }
  render() {
    let name = "kitten";
    let button = // Missing code
    return button;
  }
}

Explicación: Esta pregunta testea tu conocimiento de componente de clases en react. Tenés que usar this para llamar métodos definidos en componentes de clases.

Q89. ¿Qué sintaxis usas para crear componentes en React?

Componentes y propiedades

Q90. You want to disable a button so that it does not emit any events onClick. Which prop do you use to acomplish this?

Q90. Querés deshabilitar un botón para que no emita eventos de onClick. ¿Que propiedad utilizas para lograr esto?

Q91. Dado este componente función, ¿Qué describe mejor al Dish component?

function Dish() {
  return (
    <>
      <Ingredient />
      <Ingredient />
    </>
  );
}

Q92. When does the componentDidMount function fire?

Q92. ¿Cuándo se ejectua el método componentDidMount en un componente de clase?

Q93. ¿Para qué utilizarías webpack?

Q94. Cuando utilizas la extensión de chrome React Developer Tools, ¿Qué significa cuando el ícono está en rojo?

Reference

Q95. ¿Cómo modificarías el constructor para evitar el siguiente error? “ReferenceError: Must call super constructor in derived class before accessing ‘this’…”?

class TransIsBeautiful extends React.Component {
  constructor(props){
  // Línea faltante....
  console.log(this) ;
  }
  ...
}

Q96. ¿Qué lenguaje NO podés usar con React?

Q97. Este código es parte de un app que colecciona Pokemons. ¿Cómo podrías imprimir una lista de los que actualmente estén coleccionados?

constructor(props) {
    super(props);
    this.state = {
        pokeDex: []
    };
}

Reference

Q98. ¿Cuál sería el resultado de ejecutar este código?

function add(x = 1, y = 2) {
  return x + y;
}

add();

image

Q99. ¿Porqué podrías necesitar utilizar React.createRef?

Reference

Q100. ¿Qué patrón de asignación se está utilizando en este código?

const { tree, lake } = nature;

Reference

Q101. ¿Cómo corregirías este código para asegurarte que la propiedad sent tenga el valor booleano false?

ReactDom.render(
  <Message sent=false />,
  document.getElementById("root")
);

<Message sent={false} />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));

<Message sent="false" />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));
This site is open source. Improve this page.