Recapitulación: Expresiones JSX
Parte de la sección Fundamentos del Journey de React de Coddy — lección 10 de 42.
Desafío
FácilResumen del capítulo: un miniresumen de pedido, renderizado completamente desde JavaScript. App.jsx ya define item, price, quantity y un helper shout.
- Haz que el
<h1>conid="header"renderice el resultado de llamar ashout(item): debería mostrarCOFFEE!. - Haz que el párrafo con
id="count"renderice3 cups, utilizando la variablequantity, no el dígito. - Haz que el párrafo con
id="total"rendericeTotal: 12. Calcula el número a partir depriceyquantitycon*, no escribas 12.
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 React2Expresiones 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