blog
react Javascript

¿Cómo crear un formulario con React JSON Schema Form?

¿Cómo crear un formulario con React JSON Schema Form?

Mientras el final de los formularios web no llega, desarrolladores como tu, y yo, se ven obligados a implementar continuamente esta funcionalidad, muchas veces compleja y tediosa. Felizmente rfsf-team ha pensado en ti y ha decidido crear una solución interesante para tu próximo proyecto en React: React JSON Schema Form.

¿Qué es React JSON Schema Form?

React JSON Schema Form es un  componente avanzado de React que permite desarrollar formularios web a partir de un esquema de JSON. Sí, esto significa que a través de un esquema de JSON puedes tener de forma fácil un formulario HTML.

Veamos un ejemplo.

Ejemplo

Cómo siempre, lo primero que debes hacer es instalar el componente en tu proyecto.

¿Cómo crear un formulario con React JSON Schema Form?
Instalamos read-jsonschema-form con yarn

En tu componente personalizado, debes definir el esquema de la siguiente forma:

¿Cómo crear un formulario con React JSON Schema Form?
Declaramos el Form y definimos nuestro esquema

Y creas el formulario de la siguiente forma:

¿Cómo crear un formulario con React JSON Schema Form?
Creamos nuestro formulario, declarando en la App

Si todo ha ido bien, deberías ver un resultado parecido a:

¿Cómo crear un formulario con React JSON Schema Form?
Formulario básico implementado con react-jsonschema-form

Y eso es todo. Como has podido ver, crear un formulario básico con React JSON Schema Form es muy fácil. Ahora solo tendrías que añadirle algunos estilos con CSS y la interacción con tu API de backend.

Otras características de “react-jsonschema-form”

React JSON Schema Form es una biblioteca con algunas características interesantes que no tendrías que desarrollar desde cero. Por ejemplo, ¡puedes tener formularios con la opción de añadir y eliminar!

Pero hay más, y  las siguientes son otras de las características que me parecen más interesantes:

  • Validación “en vivo”. Puedes configurar que el formulario se valide y se muestren los errores mientras el usuario introduce los datos.
  • Propiedades anidadas.
  • Campos numéricos con la posibilidad de utilizarse sliders.
  • Input de tipo fichero para uno o varios ficheros.
  • Widgets de fecha y hora.
  • Dependencia de propiedades. Unidireccional y bidireccional
  • Dependencia de esquemas

Playground

Otro de los regalos del equipo de RJSF es su playground, desarrollado también con Bootstrap, ¡donde puedes experimentar y jugar con todas las características que se han desarrollado hasta la fecha! Creo que vale la pena acceder, pues te ayudará a valorar de forma rápida si el componente es realmente adecuado para tu proyecto.

Alternativas a “react-jsonschema-form”

Obviamente que react-jsonschema-form no es la única biblioteca de su estilo en el mercado. Por eso te dejo algunas de las alternativas más utilizadas actualmente:

  1. Formik
  2. Redux-form
  3. Formsy-react
  4. React-redux-form
  5. Tcomb-form

Conclusión

Para concluir, es muy probable que tu formulario sea muy complejo con demasiada lógica, interacciones e innovaciones. En este caso React JSON Schema Form puede no ser una solución. Pero si lo que quieres es desarrollar formularios sencillos, pero sólidos y de forma rápida, ¡entonces vale la pena echar un vistazo a este super componente!

¿Normalmente, cómo implementas formularios en tu aplicaciones desarrolladas con React?

Fotografía: rawpixel en Pixabay

Fuente:

JavaScript. ¿Cuál es la mejor biblioteca de cliente HTTP?

Artículo anterior

Flutter. ¿Cómo desarrollar una APP?

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

¿WebAssembly puede sustituir a JavaScript?

¿WebAssembly puede sustituir a JavaScript?

¿WebAssembly puede sustituir a JavaScript?

¿WebAssembly puede sustituir a JavaScript?