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