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 recibiendo las props name y bio, renderizando la misma estructura que en el paso 1 (div card, id="profile-name", id="profile-bio") con los valores de las props.
En App, renderiza un ProfileCard con name Grace Hopper y bio 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