Mismo componente, nuevos datos
Parte de la sección Fundamentos del Journey de React de Coddy — lección 19 de 42.
Junta la reutilización y las props y obtendrás el patrón real: un componente, renderizado muchas veces con diferentes datos.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Tres badges, tres labels, una definición. Cada lista, menú, feed y galería que hayas visto en la web es este patrón (más adelante incluso generaremos las copias a partir de un arreglo).
Desafío
FácilEntrega los distintivos promocionales de la tienda.
- Haz que
Badgereciba una proplabely la renderice dentro de su<span>. - Dentro de
<div id="badges">renderiza dos distintivos: primero con la etiquetaNew, después con la etiquetaSale.
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Conoce React
¿Qué es React?Tu primer componenteRegla del padre únicoJSX no es HTMLRecapitulación: Conoce React4Props
¿Qué son las Props?Pasando PropsDos PropsMismo componente, nuevos datosLa Prop ChildrenResumen: Props2Expresiones JSX
LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX5Estado y Eventos
¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos8Proyecto: Tarjeta de perfil
Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gustaPaso 4: Alternador de Seguir