Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon

Recapitulación: Formularios e entradas

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

challenge icon

Desafío

Intermedio

Resumen del capítulo. Construye un selector de apodo con el ciclo completo de input controlado: escribir, ver retroalimentación en vivo, limpiar.

  1. Haz que el input (id="nick") esté controlado con el estado nick, comenzando vacío.
  2. El párrafo (id="meter") muestra N of 12 donde N es la longitud actual del apodo (por ejemplo, al escribir Coddy → 5 of 12), derivado, no almacenado.
  3. El botón id="clear" vacía el apodo, y la casilla junto con él.

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 React

4Props

¿Qué son las Props?Pasando PropsDos PropsMismo componente, nuevos datosLa Prop ChildrenResumen: Props

7Condicionales y Listas

Renderizado ternarioMostrar con &&Renderizar una listaLa importancia de las keysFiltrar y luego mapearRecapitulaciones: Condicionales y Listas

2Expresiones JSX

LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX

5Estado y Eventos

¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos

8Proyecto: Tarjeta de perfil

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

3Componentes

Bloques de construcciónTu segundo componenteReutilizar componentesComponer una páginaResumen: Componentes

6Formularios e entradas

Entradas controladasReflejar la entradaContador de caracteresBotón de borrarRecapitulación: Formularios e entradas