1
¿Cuál es la diferencia entre Library y Framework?
Library => Da libertad al programador de crear su propio flujo de datos.
Framework => Provee herramientas estrictas para el flujo de datos.
¿Qué es el STATE?
Es un almacén de colección de datos.
¿En qué se especializa React?
Se especializa en UI dinámicos.
Menciona dos ventajas de usar React.
1. Actualizaciones visibles en el DOM sin recargar el browser.
2. Menos requests al BE.
Adicional a eso, en el script de link al .js se debe especificar que type="text/babel" en lugar de type="text/javascript"
¿Qué métodos se utilizan para crear elementos, y renderizarlos?
React.createElement()
ReactDOM.render()
Únicamente cuando el mismo elemento/componente se renderiza más de una vez desde el mismo elemento padre.
¿Cómo interpreta React la propiedad key, cuando no se provee?
React la interpreta como null.
¿Qué aparece en la consola del browser cuando un elemento se renderiza multiples veces y no se provee un key?
Aparece un Warning.
¿Cómo afecta al rendimiento de la App cuando no se provee un key al ser necesario?
Se des-optimiza el uso del V-DOM ya que no le es posible distinguir los elementos.
¿Qué son las props?
Es un objeto con el que se establece el paso de datos de un componente a otro.
¿Cómo se llama este método de Js?
const { name, lastname, bio } = props;
Se llama Deconstructing.
Se utiliza para extraer propiedades en un objeto.
También puede usarse con Arrays.
¿Qué problema contiene el siguiente bloque de código?
const DivCard = () => {
return (
<Card name="kike" bio="Instructor" />
)
}
const Card = ({ name, bio}) => {
return (
<div>
<p>Nombre: {name}</p>
<p>Bio: {bio}</p>
</div>
) };
Cuando un componente se reutiliza, y espera props, debemos asegurarnos de que estén definidas con el mismo nombre.
¿Cuál es la diferencia fundamental entre un elemento creado con React.createElement(), y uno creado como una función que retorna un etiqueta similar a HTML?
Que React.createElement() crea elementos HTML, mientras que la función con retorno crea etiquetas JSX.
Un fragmento es un contenedor genérico. Lo usamos cuando queremos simular un <div></div> que no se interprete ni renderice en el DOM real.
Explica el funcionamiento del Virtual DOM.
El Virtual DOM es un algoritmo de React que regenera la estructura de datos de tu app, a la vez que genera copias del mismo con los que compara cambios que luego renderizará en el DOM Real.
¿Qué es la modularización?
Es un concepto que simplifica la creación de elementos y luego su integración en un componente.
¿Por qué es necesario utilizar a Babel para utilizar JSX?
Porque el Browser no comprende JSX.
¿Cuál de estas dos formas de utilizar un componente es la adecuada?
<Card />
<Card></Card>
Las dos son correctas. La segunda, se utiliza bajo un concepto de Layout.
NOTA: Esto lo veremos en futuras clases. ;)
const ProductosDeTienda = ["Tomate", "Limon", "Aguacate", "Pera", "Manzanas", "Guayabas"]
Ahora, queremos renderizar cada elemento en este array... ¿Cuál sería la forma más optima de lograr esto?
La mejor forma sería creando un Componente que reciba cada elemento como props, y renderizar este Componente con un método .map() contenido en un componente padre.
Transpilar => Traducir código de una versión a otra versión del mismo lenguaje.
Compilar => Compactar y traducir el código de un lenguaje, a otro lenguaje.
¿Por qué se debería aprender React, si se quiere ser un desarrollador FE?
Porque es una librería que se encuentra en crecimiento y cuenta con mucho apoyo técnico entre desarrolladores.
¿Qué Error aparece en consola, al usar React como lo hemos estado usando esta semana?
Un error con el método Render, el cual ha sido actualizado en la nueva versión
¿Por qué no funcionaría este componente?
const newComponent = ()=> {
<h1>Título de Componente</h1>
}
Por dos razónes:
1. No está retornando.
2. La nomenclatura.
¿Por qué no funcionaría este método?
React.DOM.render(div_el, document.getElementById("root")
El método es ReactDOM.