En este video se está utilizando el componente de Tailwind UI:
https://tailwindui.com/components/application-ui/forms/sign-in-forms
Pueden corregir el error reemplazando los tags
<Form></Form> por <form></form> y <Field/> por <input/>
Saludos!
Introducción
Construye un dashboard de productos con Next.js
Configuración del proyecto
Inicializando nuestro proyecto con Next.js
Configuración de ESLint y Prettier
Integrando PostCSS y TailwindCSS a nuestro proyecto
Configuración del archivo jsconfig.js
Cómo integrar componentes predefinidos con TailwindUI
Commons Components
Creación del layout principal e integración de los Page Components
Autenticación
Creando la lógica del componente login
Presentación de la API
Creación del custom hook useAuth
Autenticándonos en la API usando Axios
Obteniendo el token de la API
Guardado del token en una cookie para mantener la sesión
Usando nuestro useAuth para cargar la información del usuario
Integración de la API
Obteniendo la lista de productos desde la API
Creando el componente Chart
Implementación de nuestro componente Chart en el dashboard
Conexión del modal para crear productos
Construcción del modal para crear productos
Inserción de los datos del producto en la API
Creación del componente Alert
Implementación de nuestro componente Alert
Eliminado de productos en la API
Creación y cargado de datos para actualizar un producto
Actualizado del producto en la API
Implementación del logout
Deploy a producción
Haciendo el deploy de nuestra aplicación en Vercel
Conexión de un subdominio a nuestra aplicación
Cierre
Continúa alimentando tu proyecto
Conclusiones y cierre del curso
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 5
Preguntas 1
En este video se está utilizando el componente de Tailwind UI:
https://tailwindui.com/components/application-ui/forms/sign-in-forms
Pueden corregir el error reemplazando los tags
<Form></Form> por <form></form> y <Field/> por <input/>
Saludos!
Si usan typescript:
const emailRef = useRef<HTMLInputElement>(null);
const passwordRef = useRef<HTMLInputElement>(null);
const submitHandle = (event: React.FormEvent) => {
event.preventDefault();
const email = emailRef.current?.value;
const password = passwordRef.current?.value;
console.log({ email, password });
};
Una solución hasta que se encuentre de donde provienen los componentes Form y Field (En el repositorio de gitHub del enlace no aparece el import de dichos componentes)
es cambiarlos por un “<form>” y por un “<input>” respectivamente, de puro html.
<form className='mt-8 space-y-6' action='#' method='POST'>
<input
id='email-address'
name='email'
type='email'
autoComplete='email'
required
className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
placeholder='Email address'
/>
y el resultado es similar para poder continuar el curso
En caso de que estén utilizando Mui con TextField en lugar de utilizar “ref” pueden usar “inputRef”
Me empieza a cansar que cada 5 minutos dice: “valores que van a ser clave”… Jaja
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.