Como Crear tu primer Formulario en React JS

2 minuto(s)

En esta página:

El trabajo con formularios en React JS es muy dinámico y rápido, antes de continuar te invitamos a leer nuestro artículo Que es React JS, Historia y otros detalles si es que aún no sabes que es React JS. En ocasiones necesitas crear un formulario el cual te puede servir para procesar los datos que hay en el, en este artículo te vamos a enseñar a crear un formulario con React JS.

Nota

Los ejemplos para este artículo están hechos con un editor de código en línea llamado Codepen el cual usa Babel JS, te recomendamos leer nuestro artículo Que es Babel JS y como Instalarlo ? y el otro articulo llamado 5 Servicios en la Nube para Compartir código Fuente en donde esta Codepen y más detalles, vayamos al artículo.

Los elementos de un formulario en HTML mantienen de manera natural un determinado estado interno, el siguiente formulario tiene 3 inputs de tipo texto, email y numero.


<form>
  <label for="nya">Nombres y Apellidos:</label>
  <input type="text" name="nya" id="nya" />

  <label for="email">Email:</label>
  <input type="text" name="email" id="email" />

  <label for="edad">Edad:</label>
  <input type="text" name="edad" id="edad" />

  <input type="submit" value="Enviar" />
</form

<form>

<label for="nya">Nombres y Apellidos:</label>

<label for="email">Email:</label>

</form

En React JS para crear un formulario creamos un Componente con la clase Formulario y lo renderizamos en nuestra vista en el elemento div id=”root” le puedes cambiar el nombre de id ‘root’ al que desees tanto en tu vista como en la salida para renderizar el componente document.getElementById(‘root‘)

En el siguiente ejemplo renderizamos un formulario en React JS

See the Pen Controlled Text Example by Nube Colectiva (@collectivecperu) on CodePen.

Genial con ello hemos renderizado nuestro primer Formulario con React JS.

Atributos Nativos HTML

Como puedes ver en el ejemplo anterior hay etiquetas HTML de formulario nativas, por otro lado tambien puedes usar todas las que desees y atributos, por ejemplo le daremos los atributos readonly, required y el dato placeholder, nativos de HTML

See the Pen Controlled Text Example by Nube Colectiva (@collectivecperu) on CodePen.

Puedes usar muchos atributos y propiedades nativas de HTML y HTML5.

Este artículo parece sencillo, pero es un primer paso para los siguientes artículos en donde trabajaremos con Eventos, Procesamiento de Datos, etc. Así mismo crearemos aplicaciones en donde haremos bastante uso de formularios en React JS.