React JS

Clase 02 | JSX y Componentes

 ¡Les damos la bienvenida! 🚀
🎥 Vamos a comenzar a grabar la clase.

Índice

1 2 3
Primeros Pasos JSX y Componentes Layout en React

Repaso HTML, CSS y Repaso de JSX y componentes Creación de la estructura

JavaScript. funcionales. básica de la aplicación.

Instalación con Vite y [Link]. Creación de componentes más Desarrollo de los primeros

Estructura básica del proyecto complejos. componentes reutilizables

React. Bienvenida a TechLab (Header, Footer, Nav, Main,

Gallery).
Introducción a JSX y creación Situación Inicial en TechLab
de componentes funcionales. Visualización de los
componentes en el navegador.

TalentoLab

Objetivos de la Clase
1 Comprender la importancia y las 2 Construir componentes más complejos
ventajas del uso de JSX. que utilicen estructuras dinámicas.

3 Aprender a utilizar props para pasar 4 Practicar la reutilización y

datos entre componentes. personalización de componentes.

JSX
Componentes funcionales
JSX
En la clase anterior vimos cómo JSX nos permite escribir código
que combina HTML y JavaScript para describir la interfaz de
usuario. JSX es un atajo elegante y más intuitivo que el uso directo
de [Link].

Por ejemplo:

const Bienvenida = () => <h1>¡Hola, Mundo!</h1>;

Componentes Funcionales
Además, vimos que un componente funcional es una función de JavaScript que devuelve un bloque de JSX. Los
componentes son las piezas fundamentales de cualquier aplicación React. Hoy daremos un paso más allá y
exploraremos cómo construir componentes más complejos.

Simplicidad Reutilización
Permiten crear interfaces de usuario de manera Facilitan la creación de código modular y reutilizable
declarativa y eficiente. en toda la aplicación.

Ejemplo:

Este componente simple

export default function Bienvenida() {
demuestra cómo JSX permite
return <h1>¡Hola, Mundo!</h1>;
integrar HTML directamente en
}
nuestro código JavaScript.
Patrón contenedor
En React, muchas veces diferenciamos dos tipos de componentes:

Componentes presentacionales (o Componentes contenedores (o

“dumb”): “smart”):
Se enfocan en cómo se ve la interfaz. Se encargan de la lógica y de manejar el estado.

Renderizan la UI basándose en props. Obtienen datos (desde una API, un hook, un

No contienen lógica de negocio, solo muestran store, etc.) y definen cómo pasarlos a los

datos. presentacionales.

Ejemplo: un UserCard que recibe un usuario Deciden qué mostrar o qué acciones ejecutar.

como prop y lo muestra con nombre, foto y Ejemplo: UserListContainer que hace la
descripción. petición a la API, gestiona loading y error, y le
pasa los usuarios a un componente UserList.

👉 Este patrón ayuda a separar responsabilidades:

Los contenedores manejan la lógica y el “qué hacer”.

Los presentacionales muestran los datos y el “cómo se ve”.

Ejemplo de esqueleto de un contenedor
En este ejemplo podemos observar cómo funciona el
export const ComponenteContainer = () => {
patrón contenedor en React:
// 1. Acá declararíamos un "estado" para
guardar datos El componente container es el que concentra la
lógica y las peticiones de datos (por ejemplo,
// 2. Acá iría la lógica para obtener los llamadas a una API, validaciones o transformaciones
datos cuando el componente se monta // de la información).
(por ejemplo, una llamada a una API). Todo ese procesamiento ocurre antes del return,
donde se define qué se va a renderizar.
// 3. Una vez obtenidos los datos, se los
Una vez que los datos están listos, el contenedor
pasaríamos al componente presentacional //
cumple el rol de “pasamanos”: simplemente le
En este punto, asumiremos que ya tenemos
transfiere la información a otro componente
los datos cargados
encargado de mostrarla.

Ese otro componente es un presentacional, que no

return ( ); };
se preocupa por cómo se obtuvieron los datos, sino
que se limita a recibirlos mediante props y
renderizarlos en la interfaz
Gracias a él podemos dividir responsabilidades entre
componentes:
El contenedor se ocupa de la lógica y de traer los datos.

Otro componente puede encargarse del mapeo y mostrar un “cargando” mientras espera.

Y finalmente, un componente Tarjeta se dedica solo a mostrar los datos ya listos.

Así cada componente cumple su función y el código se vuelve más ordenado y fácil de mantener.
Creación de
componentes
Un componente puede incluir lógica y múltiples elementos para
formar interfaces más sofisticadas. Por ejemplo, un componente
que lista usuarios:

function ListaUsuarios() {
const usuarios = ['Ana', 'Luis', 'Pedro',
'María'];
return (
<ul>
{[Link](usuario => (
<li key={usuario}>{usuario}</li>
))}
</ul>
);
}
Análisis del Componente ListaUsuarios

1 Array de Datos 2 Método Map 3 Renderizado

Definimos un array de Utilizamos map para iterar
Dinámico
usuarios dentro del sobre el array de usuarios. Generamos elementos
componente. dinámicamente para cada
usuario.
Props
Introducción a Props

Los props son propiedades que se pasan a los componentes como

argumentos.

Función Flexibilidad
Permiten la comunicación y Hacen que los
personalización de componentes sean más
componentes. reutilizables y adaptables.
Ejemplo de Componente

export function Boton({ texto, color = "green" }) {

//No se recomienda usar los estilos de esta forma. Es solo un
ejemplo
const estilo = {
backgroundColor: color,
color:"white",
padding:"10px",
};
return <button style={estilo}>{texto}</button>;
}
Uso del Componente

import { Boton } from "./components/Boton";

import "./[Link]";

function App() {
return (
<div>
<Boton texto="Aceptar" color="green" />
<Boton texto="Cancelar" color="red" />
</div>
);
}
export default App;
Ventajas de Usar Props

Reutilización Modularidad Mantenibilidad

Permite crear componentes Facilita la creación de interfaces Mejora la organización del código y
genéricos adaptables a diferentes complejas a partir de piezas simples. simplifica las actualizaciones.
contextos.
Reflexión Final
En esta clase, exploramos el potencial de JSX y los componentes
funcionales, comprendiendo cómo React combina lo mejor de
HTML y JavaScript para construir interfaces dinámicas y
reutilizables. Aprendimos que JSX simplifica el desarrollo al permitir
una integración fluida entre estructura y lógica, haciendo que el
código sea más claro y mantenible.

También introdujimos las props, una herramienta fundamental para

personalizar y reutilizar componentes en diferentes contextos. Esto
nos permitió crear interfaces más flexibles y adaptables, sentando
las bases para el desarrollo de aplicaciones escalables y eficientes.
Preguntas para
reflexionar
¿Qué ventajas observas al usar props en componentes React?

¿Cómo podrías reutilizar un componente en diferentes partes de

una aplicación?

¿Cuál es la diferencia entre un componente estático y uno

dinámico que utiliza props?
Recursos Adicionales

​Documentación React​
Consulta la documentación oficial de React para profundizar en los conceptos.

​Guía de Props​
Explora la guía sobre props en React para dominar su uso.
⚙️ Ejercicios Prácticos
¡Talento Lab te está esperando!

Imaginá que recibís una invitación para participar en el proceso de selección de Talento Lab una startup
ubicada en Buenos Aires.

¿Cuál sería el reto?

Completar una pasantía de aprendizaje que pondrá a prueba todas tus habilidades y aprendizaje. A partir de
este momento un equipo de expertos te guiarán en este emocionante viaje.

Acerca de TalentoLab.
En TechLab, convertimos ideas en herramientas
digitales innovadoras y confiables, ofreciendo servicios
de desarrollo con un enfoque en la calidad y eficiencia.
 Nuestro compromiso es desarrollar soluciones que
optimicen procesos y potencien negocios, combinando
creatividad, tecnología de punta y un compromiso
absoluto con la satisfacción de nuestros clientes. Tu
éxito es nuestra prioridad, y nuestras soluciones están
diseñadas para marcar la diferencia.

Equipo Tech Lab:

Silvia Luis Matias Sabrina

 Product Owner Diseñador UX/UI Desarrollador Desarrolladora

⚙️ Situación inicial en TechLab.

¡Únete al equipo TechLab! ✨

La familia de TechLab está buscando un nuevo integrante para colaborar en el desarrollo de un emocionante producto
innovador. Buscamos personas con un perfil proactivo, autodidacta e innovador, apasionadas por el aprendizaje
continuo y con ganas de afrontar grandes desafíos.

Hemos preparado una serie de ejercicios prácticos diseñados para evaluar tus habilidades
técnicas. Estos retos nos permitirán conocerte mejor y comprobar cómo aplicas tus
conocimientos en situaciones reales.
⚙️ Ejercicio Práctico Obligatorio

1) Crea un componente que reciba un array de 2) Crea un componente Tarjeta que reciba
productos como prop y los muestre en una props para mostrar un título, una
lista ordenada. descripción y un botón personalizado.
Ejemplo de uso:
Ejemplo de array:

<Tarjeta titulo="Oferta especial"

const productos = ['Manzanas', 'Peras',
descripcion="20% de descuento en todos
'Naranjas'];
los productos"
botonTexto="Ver más" />

3) Usa el componente Boton que creamos

para estilizar diferentes acciones en una
página.
📄 ¡Nuevo cuestionario en
Campus!
No olvides que los cuestionarios son de carácter obligatorio para poder
avanzar con la cursada.