<p>El día de hoy traemos un componente reutilizable y personalizable de un formulario en React.js. Este ya incluye validaciones básicas y manejo de eventos.</p>
<p>En cuanto a su funcionamiento e implementación, sigue las buenas prácticas que se recomiendan dentro de la misma documentación de React.js, así que puede usarse sin ningún problema en producción en cualquier proyecto.</p>
<p>En este caso el formulario fue creado únicamente con JavaScript nativo y los hooks que ofrece la librería de React.js, por lo que no será necesario descargar dependencias externas.</p>
<h2>Instalación</h2>
<p>Para poder utilizar este formulario en tus proyectos solo es necesario copiar y pegar el código en el fichero de tu preferencia.</p>
<p>Para que los estilos puedan visualizarse es necesario que tengas instalado y configurado en el proyecto Tailwind.</p>


Formulario de registro creado con React y Tailwind.

<p>En esta ocasión traemos un componente hecho con Tailwind de una landing page de <strong>estilo moderno</strong> y <strong>minimalista</strong>, perfecta para proyectos de todo tipo.</p>
<p>El diseño está inspirado en las webs minimalistas ganadoras de premios que se han vuelto populares últimamente.</p>
<p>En cuento a la paleta de colores, se puede fácilmente desde la lista de estilos de Tailwind.</p>
<h2>Instalación</h2>
<p>Para poder usar este componente solo tienes que copiarlo y pegarlo en tu proyecto. No es necesario el descargar alguna dependencia.</p>
<p>En el caso de que no se muestren los estilos, verifica si está correctamente configurado Tailwind en tu proyecto.</p>
<h3>Instalarlo en algún framework de React.js</h3>
<p>En el caso de que quieras usar este componente en cualquier framework basado en React.js (Vite, Next.js, Remix, Gatsby, etc.), debes cambiar el nombre de las clases <code>class</code> por <code>className</code>. Y listo, debería funcionar sin ningún problema</p>


Landing page minimalista y moderna en Tailwind

<p>Uno de los hooks más utilizados y útiles es sin duda el de «<strong>useFetch</strong>», ya que te permite acceder a una API de forma fácil, simple y sin la necesidad de instalar dependencias.</p>
<p>Asimismo, con este hook ya no necesitarás crear estados para manejar promesas e implementar el useEffect dentro del componente, algo que dejará tu código mucho mucho más limpio y mantenible.</p>
<p>En cuanto a los estados que regresa esta función están: «data», «loading» y «error». Respecto a los parámetros de entrada también se incluye la opción de agregar cabeceras personalizadas y el body.</p>
<h3>Actualización (marzo 2024)</h3>
<p>Se realizaron cambios para permitir verificar el estado de la respuesta y agregar tokens y elementos de seguridad en la función.</p>
<h2><span style="font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); letter-spacing: var(--heading--letter-spacing-h3); background-color: var(--global--color-background); color: var(--global--color-primary);">Instrucciones</span></h2>
<h2><span style="font-family: var(--heading--font-family); font-size: var(--heading--font-size-h3); font-weight: var(--heading--font-weight); letter-spacing: var(--heading--letter-spacing-h3); background-color: var(--global--color-background); color: var(--global--color-primary);">Uso con React.js sin frameworks</span></h2>
<p>Se tiene que copiar y pegar el código en cualquier archivo y listo, solo hay que llamar la función dentro del componente. No es necesario instalar alguna dependencia o librería externa.</p>
<p>Para dejar más límpio el código, lo recomendable es guardarlo en en un archivo separado dentro de una carpeta de utilidades o hooks, ya que suele ser un hook que se utiliza mucho.</p>
<p>En el caso de que desees este componente con TypeScript, te recomendamos el siguiente hook que ya está adaptado.</p>
<h3>Uso con Next.js</h3>
<p>Es importante tener en cuenta que en las versiones mayores a la 13 de Next.js, este hook <strong>solo se podrá implementarse en componentes de tipo</strong> <code>"use client"</code>. Si lo que buscas es usarlo en un componente de tipo servidor, prueba la opción nativa de fetch y suspense.</p>


React: código del custom hook «useFetch»

<p>El siguiente componente de llamada a la acción (Call-to-Action) cuenta con un estilo moderno y colorido que se puede adaptar fácilmente a cualquier tipo de landing page.</p>
<p>La paleta de colores y los estilos se pueden cambiar directamente con las clases utilitarias de Tailwind o también se puede sobreescribir directamente con tus variable y estilos en línea.</p>
<p>Para quien no lo sepa, las llamadas a la acción o «Call-to-action» son parte fundamental de toda web, en especial si se buscar conversiones y/o acciones por parte del usuario. Así que lo ideal es que el diseño sea atractivo, limpio y fácil de entender.</p>
<h2>¿Cómo instalarlo?</h2>
<p>Solo se necesita copiar y pegar el código. Todos los estilos son compatibles con la versión default de Tailwind.</p>
<p>En el caso de que se quiera implementar en React, solo se necesita cambiar la palabra clave <code>class</code> por <code>className</code>.</p>


Llamada a la acción (Call-to-Action) con Tailwind

Sección Hero de web minimalista con Tailwind

Componente Hero minimalista hecho con Tailwind

<p>Para poder usar el siguiente componente de Tailwind en tu proyecto, solo se tiene que copiar y pegar el código.</p>
<p>No es necesario instalar dependencias o librerías externas para su funcionamiento.</p>
<p><code></code></p>


Recursos de programación a tu alcance