Recapitulaciones: Condicionales y Listas
Parte de la sección Fundamentos del Journey de React de Coddy — lección 38 de 42.
Desafío
IntermedioResumen del capítulo: construye un tablero de tareas a partir de los datos, usando todo lo aprendido en este capítulo.
- El componente define un arreglo
tasks. Dentro del<ul id="done-list">, renderiza un<li>por cada tarea que esté lista (done): usafilterprimero, despuésmap. - Cada
<li>muestra eltextde la tarea y usa suidcomo elkey. - Arriba de la lista, usa
&¶ renderizar un<span>conid="badge"que diga2 done(¡construye el número a partir de la propiedadlengthdel arreglo filtrado!), pero solo cuando al menos una tarea esté lista.
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>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: Props7Condicionales y Listas
Renderizado ternarioMostrar con &&Renderizar una listaLa importancia de las keysFiltrar y luego mapearRecapitulaciones: Condicionales y Listas2Expresiones 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