Como Crear un Formulario en React Native y Validarlo del Lado Front-end – Parte 1

React Native | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

React Native nos permite crear diferentes elementos necesarios para una aplicación móvil híbrida como los formularios que permiten realizar una interacción al usuario como registrarse, iniciar sesión, almacenar pedidos y otros tipos de datos, los formularios son parte importante de una aplicación y no solo en móviles, sino también en otros entornos, en este Post vamos a crear un formulario y validarlo del lado del cliente o en la interfaz del usuario, vamos con ello.

  • Parte 1
  • Parte 2 (Final – Código Fuente GitHub) 

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Como Crear un Formulario en React Native y Validarlo del Lado Front-end – Parte 1. 

Los Pasos que realizaré a continuación y el código de React Native, pueden cambiar en futuras versiones de React Native, pero hasta la fecha de este Post estos pasos son los que se deben seguir para este tutorial en React Native 0.63.4

Yo voy a enfocarme en crear un nuevo proyecto y no en la instalación y configuración de React Native, si quieres aprender a instalar y configurar React Native te recomiendo leer el siguiente artículo llamado Como Crear una Aplicación Básica “Hola Mundo” con React Native 0.63.2:

Bien ahora pasemos a crear el proyecto para este tutorial.

Creación de Nuevo Proyecto

Voy a mi consola de comandos y ejecuto el siguiente comando para crear un nuevo proyecto en React Native, a mi proyecto le pondré de nombre appformulario.

Luego de ejecutar el comando anterior para crear un nuevo proyecto, se me ha creado un conjunto de directorios y archivos indispensables para que mi proyecto funcione correctamente.

Bien ahora voy a verificar si mi aplicación se ha creado y esta funcionando correctamente. Para esto voy abrir 2 consolas de comandos en el directorio principal de mi proyecto.

El primero comando será para iniciar el servidor de React Native, entonces ejecuto el siguiente comando.

Sin cerrar la consola anterior, ahora ejecutaré el siguiente comando en una nueva consola de comandos, con este comando iniciaré el emulador Android y compilaré la aplicación. 

Se me debe de abrir el emulador Android (Recuerda tener instalado Android Studio en tu computadora) y puedo ver la aplicación que React Native creo por defecto.

Ahora borraremos el contenido de la aplicación, para agregar un formulario y posteriormente validar los campos de lado Front-End.

Creación del Formulario

Abro el archivo llamado App.js que se encuentra en el directorio principal del proyecto.

Borro todo el contenido que hay en el archivo App.js y comienzo importando los siguientes elementos.

Paso seguido creo el siguiente formulario.

Por último le agrego los siguientes estilos para mejorar el aspecto del formulario.

Si ejecuto la aplicación en el emulador puedo ver mi formulario sin problemas.

A continuación el código completo del archivo App.js

Con esto entonces tenemos creado nuestro formulario y ahora solo faltaría validar los campos.

Bueno hasta aquí terminamos esta Parte 1, en donde creamos un nuevo proyecto en React Native y diseñamos el formulario.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente Parte de este tutorial vamos a validar los campos de nuestro formulario.
  • El código expuesto en este capitulo del tutorial pueden cambiar, esto no depende de mi, si no de la empresa que dan soporte a React Native que suelen cambiar sus tecnologías en futuras versiones.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments