Enviar datos de un formulario en React y guardarlos en PHP

Vamos a crear un ejemplo donde tenemos un formulario en React y le vamosa enviar los datos a un script en PHP que va a guardar los datos enviados.

En React Js vamos a crear una aplicacion y un simple formulario, lo vamos a hacer lo mas facil y simple, por que aveces siempre hace falta el ejemplo mas sencillo para entender las cosas.

El envio de formularios en React es puro javascript, en general, de por si React es javascript jeje, entonces estan facil como usar el metodo Fetch, se puede usar XMLHttpRequest, pero mejor nos vamos con fetch.

Servidor

React no tiene idea del backend que usamos en la aplicacion, asi podemos usar python, node.js o como en mi casi voy a usar PHP, por que soy PHP Lover <3 …

En el servidor o backend voy a tener preparada la URL http://localhost/myphpapi/recibe.php

Recuerden que cuando estemos trabajando ya con API siempre tenemos que usar una URL absoluta.

El archivo backend solo va a recibir los datos: nombre y apellido y los va a guardar en un archivo.

<?php
// Estas son cabeceras para permitir solicitudes desde cualquier origen (CORS)
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");

// Recibimos los datos enviados desde el cliente (React) y los decodificamos de JSON a un array asociativo de PHP
$datos = json_decode(file_get_contents('php://input'), true);

// Guardamos los datos en un archivo de texto (datos.txt) para verificar que se recibieron correctamente
$archivo = fopen("datos.txt", "a") or die("No se pudo abrir el archivo");
fwrite($archivo, "Nombre: " . $datos["name"] . "\n");
fwrite($archivo, "Apellido: " . $datos["lastname"] . "\n");
fwrite($archivo, "-------------------------\n");
fclose($archivo);
// Enviamos una respuesta al cliente indicando que los datos se recibieron correctamente
echo json_encode(["mensaje" => "Datos recibidos correctamente"]);
?>

Es algo muy sencillo, pero solo queremos comprobar que realmente se estan recibiendo los datos.

En este archivo podemos hacer cualquier cosa, conectarnos a una base de datos, ennviar correos, etc.

Si todo funciona los datos se guardaran en el archivo datos.txt del lado del servidor.

Aplicacion en React

Ahora nuestra aplicacion en react la creamos.

npm create vite@latest formulario3

Una vez que se crea la aplicacion nos vamos al archivo App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

// Función para manejar el envío del formulario
async function manejarSubmit(event) {
  event.preventDefault() // Evita que el formulario se envíe y recargue la página
  const formData = new FormData(event.target) // Crea un objeto FormData con los datos del formulario
  const datos = Object.fromEntries(formData.entries()) // Convierte el FormData en un objeto JavaScript
  console.log('Datos del formulario:', datos) // Muestra los datos en la consola
  try{
    const respuesta = await fetch('http://localhost/myphpapi/recibe.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(datos) // Envía los datos del formulario como JSON
  })
  // Procesamos la respuesta del servidor
  if (respuesta.ok) {
    const resultado = await respuesta.json() // Obtiene la respuesta del servidor
    console.log('Respuesta del servidor:', resultado)
  } else {
    console.error('Error en la solicitud:', respuesta.statusText)
  }
  } catch (error) {
    console.error('Error al enviar el formulario:', error)
    }
  }

function App() {

  return (
    <>
     <h1>Prueba de formulario con React</h1>
     <form onSubmit={manejarSubmit}>
      <label htmlFor="name">Nombre:</label>
      <input type="text" id="name" name="name" />
      <label htmlFor="lastname">Apellido:</label>
      <input type="text" id="lastname" name="lastname" />
      <button type="submit">Enviar Datos</button>
     </form>
    </>
  )
}

export default App

En el script les deje comentarios para que entiendan lo que estamos haciendo.

Basicamente al darle submit al formulario los datos se procesan en la funcion manejarSubmit, lo que hace manejarSubmit es convertir los datos en JSON y enviarlos al servidor.

Si todo funciona bien los datos enviados se van a guardar enviados desde el formulario, es decir nombre y apellido en el archivo datos.txt del backend y lo podemos ver en http://localhost/myphpapi/datos.txt

Conclusion

Como pueden ver este sencillo ejemplo abre las puertas a muchas aplicaciones mas, podemos agregar mas campos al formulario, hacer que los datos se guarden en una base de datos.

Pero todo esto y mas lo veremos en un siguiente post donde desarrollemos un CRUD en React.