Parcial 1: Programación III – REACT

1- Nested Components o Componentes anillados: Es un componente secundario que se

anida en el componente principal, el mismo se coloca y representa en relación al
componente principal. Los mismos heredan props de contenedor padre a contenedor
hijo y no en viceversa.

2- Mark Up with JSX: JSX es una extensión de JS que permite escribir código para crear y
manipular elementos de React. La misma sintaxis se compila directamente en
componentes y funciones de JS, y permite combinar HTML y JS para crear un marcado
dinámico.

3- Adding Style: Dar estilo en CSS se puede realizar de dos maneras:

a. Estilo en línea: se necesita llaves para inyectar el estilo
<div style ={color=blue}>
b. Hoja de estilo: Se necesita importar la hoja de CSS con la ruta de carpeta de la
misma remarcando con una clase al elemento

4- DISPLAY DATA: JSX te permite poner marcado dentro de JavaScript. Las llaves te
permiten <<escapar de nuevo >> hacia JavaScript de forma tal que puedas incrustar
una variable de tu código y mostrársela al usuario.

5- Conditional Rendering: En React asi como en JS se usan condicionales para tomar

decisiones. Este concepto hace referencia que cuando hagamos uso del renderizado o
retorno, el mismo se verá afectado por una condición. Para evaluar una condición se
puede usar varias formas, en éste caso se usuario un operador ternario que permite de
forma mas compacta evaluar un condicional, su sintaxis es la siguiente:

className= {esBotonDeClick ? “botón-click” : “botón-reiniciar”};

{data && <Formulario data = {data}/>}

6- Rendering List: A menudo querrá mostrar multiples componentes similares de una

colección de datos (arrays). Puede utilizar los métodos de arreglo de JavaScript para
manipular un array de datos. Hciendo uso de métodos como filter() y map() con React
para transformar su arreglo de datos en un arreglo de componentes.

const products = [

{title: ‘Cabbage’, id:1},

{title: ‘Garlic’, id:2},

{title: ‘Apple’, id:3},

];

const listItems = products.map(product =>

 <li key = {product.id}>

{product.title}

</li>

);

Return (

<ul>{listItems}</ul>

);

7- Responding Events: Se puede responder a los eventos declarando funciones de

controlador de eventos dentro de sus componentes.

export default function Button() {

function handleClick() {

alert(‘¡Hiciste Click!’);

return (

<button onClick={handleClick}> Clickeame </button>);

8- Patrones de Diseño: Es un patrón de desarrollo basado en el modelo de componentes

original de React en el que construimos componentes a partir de otros componentes.
Hooks (ganchos). Función especial que permite que los componentes funcionales
tengan acceso al estado y otras características de React. Estas funciones nos permiten
resolver problemas específicos.
useState: nos permite rastrear el estado den un componente de función, generalmente
se refiere a datos o propiedades que deben rastrearse en una aplicación.
useEffect: permite realizar efectos secundarios en sus componentes, como obtención
de datos, temportizadores. (maneja el ciclo de vida del componente).
useLocation: enlace devuelve el objeto de ubicación de la URL actual teniendo en
cuenta que el useLocation se actualizará cada vez que cambie la URL. (devuelve la ruta
donde estoy parado).
useNavigate: devuelve un objeto navigate, que permite navegar dentro del sistema
“Navigate to ……..”
9- Functional – Container Component: Los componentes pueden ser de dos tipos, a
saber, componentes con estado y sin estado. La diferencia entre ambos es
simplemente la presencia de estado o la falta del mismo.
¿Qué es el estado? Son simplemente los datos que se importan a un componente.
Los componentes sin estados también se denominan componentes funcionales o
componentes de presentación.
En React, dichos componentes siempre renderizan lo mismo o solo lo que se les pasa a
través props.

10- Compount Components: Los componentes compuestos son un patron de React que
proporciona una forma expresiva y flexible para que un componente principal se
comunique con sus elementos secundarios, mientras separa expresivamente la lógica y
la interfaz de usuario.
En los componentes compuestos, en lugar de pasar el estado a través de accesorios,
pasamos elementos como elementos secundarios a un elemento principal.

11- Render Props: El termino “Render Props” se refiere a una técnica para compartir
código entre componentes de React utilizando un accesorio cuyo valor es una función.
Un componente con un props de renderizado toma una función que devuelve un
elemento React y lo llama en lugar de implementar su propia lógica de renderizado.

<DataProvider render = {data => (

<h1>Hello {data.target}</h1>
)}/>

12- Control Component: Los componentes controlados en React le permiten administrar

fácilmente el estado y el comportamiento de sus componentes al hacer que el
componente principal tome el control.

13- High Order Component: Patrón de diseño de React de un componente que recibe un
componente y devuelve otro con una funcionalidad extra o algún cambio.