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