-
import React.Component from 'react' -
import [ Component ] from 'react' -
import Component from 'react' -
import { Component } from 'react'
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?
- Envolverlo en un componente
React.memo. - Implementar el hook
useReducer. - Implementar el hook
useMemoHook. - Implementar el método de ciclo de vida
shouldComponentUpdate.
const person =(firstName, lastName) =>
{
first: firstName,
last: lastName
}
console.log(person("Jill", "Wilson"))- Envolver el objeto devuelto entre paréntesis
- Llamar a la función desde otro archivo.
- Agregar un
returnántes del último paréntesis. - Reemplazar el objeto con un Array.
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';
- React Hooks
- componentes con estado
- matemática
- componentes de clase
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);-
{{name: "Rachel", age: 31}} -
{name: "Rachel", age: 31} -
{person: "Rachel", person: 31}} -
{person: {name: "Rachel", age: 31}}
- Mocha
- Chai
- Sinon
- Jest
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. ¿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?
- React Send
- React Pinpoint
- React Router
- React Context
const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);- Horse
- Cat
- Mouse
- undefined
- JSX Editor
- ReactDOM
- Browser Buddy
- Babel
- cuando quieres reemplazar a Redux
- cuando quieres manejar un estado más complejo en una app
- cuando quieres mejorar la performance
- cuando quieres destruir tu aplicación en producción
<Message {...props} />- cualquier propiedad que no haya cambiado
- todas las propiedades de
props - propiedades hijas
- todas las que hayan cambiado en valor
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" />- Un modal de ruta
- Un parámetro de ruta
- Un divisor de ruta
- Un link de ruta
function Dish() {
return <h1>Mac and Cheese</h1>;
}
ReactDOM.render(<Dish />, document.getElementById('root'));-
div - section
- component
-
h1
React.createElement('h1', null, "What's happening?");-
<h1 props={null}>What's happening?</h1> -
<h1>What's happening?</h1> -
<h1 id="component">What's happening?</h1> -
<h1 id="element">What's happening?</h1>
Q16. ¿Qué propiedad necesitas definirle al componente Suspense para que muestre un indicador de progreso?
function MyComponent() {
return (
<Suspense>
<div>
<Message />
</div>
</Suspense>
);
}- lazy
- loading
- fallback
- spinner
const message = 'Hi there';
const element = <p>{message}</p>;- una JS function
- un elemento JS
- una JS expression
- un envoltorio JSX
-
React.memo -
React.split -
React.lazy -
React.fallback
- cuando quieres optimizar para todos los dispositivos
- para completar el update
- para cambiar la pantalla actual
- cuando necesitas que el navegador renderice el DOM antes de que se ejecute el effecto
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>- El botón A no tendrá acceso al evento que inició el llamado
- El botón B no disparará el this.handleClick exitosamente
- El botón A no disparará el this.handleClick exitosamente
- No habrá diferencia, ambos harán lo mismo.
function Dish(props) {
return (
<h1>
{props.name} {props.cookingTime}
</h1>
);
}-
function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; } -
function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; } -
function Dish(props) { return <h1>{name} {cookingTime}</h1>; } -
function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }
- cuando no quieres que tu componente tenga propiedades
- cuando tienes componentes anidados que necesitan ser comparados
- cuando necesitas hacer uso de su implementación del método
shouldComponentUpdate() - cuando no quieres que tu componente tenga un estado
Q23. ¿Porqué es importante evitar copiar valores de las propiedades de un componente a su estado interno siempre que sea posible?
- porque nunca debes mutar su estado
- porque
getDerivedStateFromProps()es un metodo inseguro de usar - porque queremos permitirle al componente actualizarse al detectar cambios en sus propiedades
- porque queremos permitir el flujo de datos de vuelta al componente superior
- una propiedad que agrega un hijo al estado del componente
- una propiedad especial que JSX crea en componentes que contienen una etiqueta de apertura y una etiqueta de cierre, referenciando su contenido.
- una propiedad que permite definir un array como propiedad
- una propiedad que permite pasar datos a componentes hijos
- injectHTML
- dangerouslySetInnerHTML
- weirdSetInnerHTML
- strangeHTML
- declarativo
- integrado
- cerrado
- imperativo
- para armar carpetas en el sistema de archivos
- para preprocesar archivos
- para cargar datos externos
- para cargar el sitio web en los teléfonos de los usuarios
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?
- DOM virtual
- DOM
- elementos virtuales
- DOM sombrío/oscuro
const Heading = () => {
<h1>Hello!</h1>;
};- Agregar una función de rendeo.
- Reemplazar las llaves por paréntesis o agregar un return keyword antes del primer h1 tag
- Mover el h1 a otro componente
- Envolver el h1 en un div
- const
- let
- constant
- var
Q31. ¿Cómo se llama a un React component que capture errores de Javascript en cualquier lugar del arbol de componentes?
- error bosses
- error catchers
- error helpers
- error boundaries
- constructor
- componentDidMount
- componentWillReceiveProps
- componentWillMount
Q33. Los componentes en React se componen para crear interfaces de usuario. ¿Cómo se componen los componentes en sí mismos?
- poniéndolos en un mismo archivo
- anidando otros componentes
- con webpack
- con separación de código
- monads
- funciones puras
- functions recursivas
- funciones de alto orden
handleChange(e) {
this.setState({ [e.target.id]: e.target.value })
}- una propiedad de nombre computada
- un valor pre-seteado
- una llave dinámica
- un código de cadena JSX
class Clock extends React.Component {
render() {
return <h1>Look at the time: {time}</h1>;
}
}- Clock
- No tiene una propiedad de nombre.
- React.Component
- Component
- un callback a una función que es llamada una vez por cada elemento del array
- el nombre de otro array para iniciar una iteración
- el número de veces que se quiere llamar a la función
- un string describiendo qué debería hacer la función
- Porque permite una mejor encapsulación
- Se asegura de que el objeto no haya mutado
- Actualiza automaticamente un componente
-
setStatees asíncrono y podría resultar en valores no actualizados correctamente a tiempo.
-
React -
ReactDOM -
Render -
DOM
- usando la propiedad
value - usando la propiedad
defaultValue - usando la propiedad
default - Se asigna uno automaticamente
class clock extends React.Component {
render() {
return <h1>Look at the time: {this.props.time}</h1>;
}
}- Poner el valor de retorno entre comillas
- remover el
this - remover el método render
- Capitalizar
clock
Explicación: En JSX, nombres en minúsculas son considerados elementos de HTML. Lee este artículo
-
useEffect(function updateTitle() { document.title = name + ' ' + lastname; }); -
useEffect(() => { title = name + ' ' + lastname; }); -
useEffect(function updateTitle() { name + ' ' + lastname; }); -
useEffect(function updateTitle() { title = name + ' ' + lastname; });
-
React.fallback -
React.split -
React.lazy -
React.memo
function MyComponent(props) {
const [done, setDone] = useState(false);
return <h1>Done: {done}</h1>;
}-
useEffect(() => { setDone(true); }); -
useEffect(() => { setDone(true); }, []); -
useEffect(() => { setDone(true); }, [setDone]); -
useEffect(() => { setDone(true); }, [done, setDone]);
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>-
<button onClick={this.handleClick.bind(handleClick)}>Click this</button> -
<button onClick={handleClick()}>Click this</button> -
<button onClick={this.handleClick}>Click this</button> -
<button onclick={this.handleClick}>Click this</button>
- Una función componente es igual que una función de clase.
- Una función componente acepta un único parámetro con sus propiedades y devuelve un elemento React
- Una función componente es la única forma en la que se puede crear un componente
- Una función componente es requerido para poder crear un componente en React
- FetchJS
- ReactDOM
- Ninguna.
fetch()es provisto nativamente por la mayoría de los navegadores. - React
useEffect(() => {
setName('John');
}, [name]);- Causará un error inmediato
- Se ejecutará el código de la función, pero solo luego de esperar que ningún otro componente esté accediendo a esa variable (name)
- Va a actualizar el valor de la variable name una vez y no hará nada hasta que el valor de la misma vuelva a cambiar.
- Causará un bucle infinito
- si el componente invoca el método
this.setState(...) - el valor de alguno de sus propiedades cambia
- se invoca el método
this.forceUpdate() - alguno de sus componentes hijos se vuelve 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() {...}
}-
this.handleClick.bind(this); -
props.bind(handleClick); -
this.handleClick.bind(); -
this.handleClick = this.handleClick.bind(this);
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>- A
<...>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
</...>- B
<//>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
<///>- C
<>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
</>- D
<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>;
}
}- this.state.count
- count
- state
- state.count
const greeting = isLoggedIn ? <Hello /> : null;- nunca
- cuando
isLoggedInsea true - cuando el usuario se loguee
- cuando la función Hello sea llamada
ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));- string
- boolean
- object
- number
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>;-
const element = <h1 style="backgroundColor: "blue""}>Hi</h1>; -
const element = <h1 style={{backgroundColor: "blue"}}>Hi</h1>; -
const element = <h1 style={blue}>Hi</h1>; -
const element = <h1 style="blue">Hi</h1>;
-
replaceState -
refreshState -
updateState -
setState
const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;- black
- red
- grey
- white
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>- El botón A no tendrá acceso a la referencia del evento onClick
- El botón A no se ejecutará correctamente
- No hay diferencia, ambos se ejecutarán con éxito
- El botón B no se ejecutará correctamente
Q59. Cómo agregarías en este código, de React Router, un componente llamado About cuando esta ruta se active?
<Route path="/:id" />- A
<Route path="/:id">
{' '}
<About />
</Route>- B
<Route path="/tid" about={Component} />- C
<Route path="/:id" route={About} />- D
<Route>
<About path="/:id" />
</Route>const Greeting = ({ name }) => <h1>Hello {name}!</h1>;- A
class Greeting extends React.Component {
constructor() {
return <h1>Hello {this.props.name}!</h1>;
}
}- B
class Greeting extends React.Component {
<h1>Hello {this.props.name}!</h1>;
}- C
class Greeting extends React.Component {
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}- D
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')
)- El elemento destino donde react debería agregar sus elementos al DOM
- donde llamar a la función
- la ubicación del root element
- la ubicación donde crear nuevos javascript
- El elemento Link le permite al usuario usar el botón de
volveren el navegador - No hay diferencia, el elemento Link es sinónimo del tag
<a> - El tag
<a>causará errores cuando se use con React. - El tag
<a>causará un refrezco total de la página, mientras que el componenteLinkno lo hará.
React.createElement(x, y, z);- el elemento que debería ser creado
- El orden en que este elemento debe ser creado en la página
- las propiedades del elemento
- información que debería ser motrada en el elemento
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
}, []);- componentWillUnmount
- componentDidMount
- render
- componentDidUpdate
class Comp extends React.Component {
render() {
return <h1>Look at the time: {time}</h1>;
}
}- Comp
- h1
- React.Component
- Component
ReactDOM.createPortal(x, y);- el estado actual
- el elemento a renderizar
- una referencia al App componet
- la página
Explicación: Portals
const [count, setCount] = useState(0);- el valor inicial del estado
- una variable
- el objeto estado
- una función callback para cambiar el valor del estado
Referencia Hooks-State
const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);- devuelve un mapa de todas las entradas en la base de datos
- devuelve un h1 element por cada elemento en la variable database con su data como texto
- devuelve un elemento h1 conteniendo todos los elementos de la variable database
- chequea qué elemento de la base de datos es apta para ser mostrada en un elemento h1
const { name: firstName } = person;- está creando un nuevo objeto que contiene la misma propiedad
nameque el objeto firstName - Está asignando el valor de la propiedad firstName del objeto person a una constante llamada name
- esta obteniendo el valor de person.name.firstName
- está asignando el valor de la propiedad name del objeto person a una constante llamada firstName
const MyComponent = ({ names }) => (
<h1>Hello</h1>
<p>Hello again</p>
);- Los componentes en React no pueden ser definidos usando funciones
- React no permite que los componentes funcion devuelvan más de un elemento.
- El componente debe usar el keyword return para devolver elementos.
- Las cadenas de caracteres deben ser envueltas en comillas
ReactDOM.createPortal(x, y);- el App Compontent
- la página
- el estado actual
- el elemento DOM que existe fuera del elemento padre
const MyComponent = ({ children }) => (
<h1>{children.length}</h1>
);
...
<MyComponent>
<p>Hello</p>
<p>Goodbye</p>
</MyComponent>- Emitirá un error diciendo "cannot read property "length" of undefined."
- 1
- undefined
- 2
const [count, setCount] = useState(0);- deconstrucción de objeto
- deconstrucción de array
- operador de separación
- empuje de código
- src/App.js
- src/index.js
- public/manifest.json
- public/index.html
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'));-
render(element, document.getElementById("root")); -
ReactDOM(element, document.getElementById("root")); -
renderDOM(element, document.getElementById("root")); -
DOM(element, document.getElementById("root"));
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is:
</div>
);
}-
The user is loggedIn ? logged in : not logged in. - Hay que escribir una función para determinar si el usuario está logueado o no
-
The user is {isLoggedIn = "no"}. -
The user is {isLoggedIn ? "logged in." : "not logged in"}.
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?
- Pasa el nombre de cada item como valo en su propiedad key
- Agregar una propiedad key con el mismo valor en todos los items de la lista
- Borrar las advertencias de la consola
- Agregar una propiedad key a cada item de la lista con un valor único asosiado al mismo.
Q78. ¿Cómo crearías código de boilerplate para un nuevo app que quieres hacer para coleccionar pantalones?
- npm create-react-app collect-pantalones
- npx start-app collect-pantalones
- react new collect-pantalones
- npx create-react-app collect-pantalones
class StarTrekkin extends React.Component {
firePhotonTorpedoes(e) {
console.log('pew pew');
}
render() {
return; // El código hay que agregarlo aquí
}
}-
<button onClick={firePhotonTorpedoes()}>Pew Pew</button> -
<button onClick={firePhotonTorpedoes}>Pew Pew</button> -
<button onClick={this.firePhotonTorpedoes()}>Pew Pew</button> -
<button onClick={this.firePhotonTorpedoes}>Pew Pew</button>
- DOM Sombrío
- fibra
- reconciliación
- definición de estado
- Intuit
- Snapchat
- react-starter
- create-react-app
- react-gen
- react-start
Q83. ¿Cuál es la extensión de navegador que los desarrolladores de React usan para debugear sus aplicaciones?
- React Developer Tools
- React Tooling Add-on
- React Codewatch
- React Debug
- React
- jQuery
- webpack
- ReactDOM
Q85. ¿Cuál es la extensión de sintáxis en Javascript que se usa comunmente para crear elementos React?
- HTML
- JavaScriptX
- JSX
- React JavaScript
- Manualmente.
- Usando
prop-helper. - Usando
prop-types. - Usando
checker-types.
let dish = <h1>Mac and Cheese</h1>;-
let dish = <h1 id={heading}>Mac and Cheese</h1>; -
let dish = <h1 id="heading">Mac and Cheese</h1>; -
let dish = <h1 id:"heading">Mac and Cheese</h1>; -
let dish = <h1 class="heading">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;
}
}-
<button onClick={(name) => this.hug(name)}>Hug Button</button>; -
<button onClick={this.hug(e, name)}>Hug Button</button>; -
<button onClick={(e) => hug(name, e)}>Hug Button</button>; -
<button onClick={(e) => this.hug(name, e)}>Hug Button</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.
- un generador
- una función o una clase
- un service worker
- un tag
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?
- onBlur
- onPress
- defaultValue
- disabled
function Dish() {
return (
<>
<Ingredient />
<Ingredient />
</>
);
}- es un componente hijo
- es un componente padre
- es un componente anidado
- es un componente anexo
- luego de haber sido agregado al DOM
- antes de ser agregado al DOM
- inmediatamente luego de ser actualizado
- luego de una API call
- para buscar dependecias externas que utilice mi app
- para dividir mi aplicación en bloques de códigos más pequeños y así podér ser cargados más facilmente por el navegador
- para formatear mi código para que sea mas legible
- para proteger mi app de injecciones de código malicioso
Q94. Cuando utilizas la extensión de chrome React Developer Tools, ¿Qué significa cuando el ícono está en rojo?
- Que se está utilizando la versión development del app
- Que se está usando la versión de producción del app
- Que se está usando webpack
- Que se está usando Create React App
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) ;
}
...
}- render(props);
- super(props);
- super(this);
- this.super();
- Swift.
- JSX.
- Javascipt.
- TypeScript.
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: []
};
}- console.log(props.pokeDex);
- console.log(this.props.pokeDex);
- console.log(pokeDex);
- console.log(this.state.pokeDex);
function add(x = 1, y = 2) {
return x + y;
}
add();- null
- 3
- 0
- undefined
- para referirnos a otro archivo JS
- para bindear una función
- para llamar a una función
- para acceder directamente a un nodo DOM
const { tree, lake } = nature;- function defaults
- deconstrucción de arrays
- PRPL pattern
- deconstrucción de objeto
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")
);- A
<Message sent={false} />,- B
ReactDom.render(<Message sent="false" />, document.getElementById('root'));- C
<Message sent="false" />,- D
ReactDom.render(<Message sent="false" />, document.getElementById('root'));