Menu

Tech

EMPEZAR A APRENDER

Español

Paso 2: Tarjeta con Props

Parte de la sección Fundamentos del Journey de React de Coddy. Lección 40 de 42.

Desafío

Fácil

Haz que la tarjeta sea reutilizable.

Define ProfileCard para que reciba las props name y bio, y renderice la misma estructura que en el paso 1 (div de la tarjeta, id="profile-name", id="profile-bio") con los valores de las props.
En App, renderiza un ProfileCard con el nombre Grace Hopper y la biografía Invented the compiler.

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 componente Regla del padre único JSX no es HTML Recapitulación: Conoce React

4Props

¿Qué son las Props?Pasando Props Dos Props Mismo componente, nuevos datos La Prop Children Resumen: Props

7Condicionales y Listas

Renderizado ternario Mostrar con &&Renderizar una lista La importancia de las keys Filtrar y luego mapear Recapitulaciones: Condicionales y Listas

2Expresiones JSX

Llaves Matemáticas dentro de las llaves Llaves en atributos Llamada a funciones en JSX Recapitulación: Expresiones JSX

5Estado y Eventos

¿Qué es el estado?Contador de clics Contar en pasos Alternar con estado Estado independiente Recapitulación: Estado y eventos

8Proyecto: Tarjeta de perfil

Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gusta Paso 4: Alternador de Seguir

3Componentes

Bloques de construcción Tu segundo componente Reutilizar componentes Componer una página Resumen: Componentes

6Formularios e entradas

Entradas controladas Reflejar la entrada Contador de caracteres Botón de borrar Recapitulación: Formularios e entradas