Menu

Tech

EMPEZAR A APRENDER

Español

Paso 4: Alternador de Seguir

Parte de la sección Fundamentos del Journey de React de Coddy — lección 42 de 42.

Desafío

Intermedio

Completa la tarjeta de perfil.

Añade el estado booleano following (comenzando en false) a ProfileCard.
Añade un botón con id="follow" que lo alterne al hacer clic.
La etiqueta del botón es Following cuando sea true, y Follow cuando sea false.

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 tarjeta Paso 2: Tarjeta con Props Paso 3: Botón de Me gustaPaso 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