¿Cómo conectar ReactJS como front-end con PHP como back-end?

ReactJS: es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

PHP : El término PHP es un acrónimo de Hypertext Preprocessor. Es un lenguaje de secuencias de comandos del lado del servidor que se utiliza para el desarrollo web. Se puede incrustar fácilmente con archivos HTML. Los códigos HTML también se pueden escribir en un archivo PHP.

En este artículo, aprenderemos cómo conectar React como front-end y PHP como back-end. 

Requisito previo:

• Conocimientos básicos de PHP.
• Comprensión de ReactJS.
• NodeJS instalado .
• PHP instalado .

Configuración del proyecto:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app folderName

Paso 2: después de crear la carpeta de su proyecto (es decir, el nombre de la carpeta), acceda a ella con el siguiente comando:

cd folderName

Paso 3: cree una carpeta llamada PHP en la raíz para almacenar los archivos del servidor allí y cree un archivo server.php.

Estructura del proyecto: Se verá así.

Implementación: Anote el código en los archivos respectivos.

import { useState } from "react";
import $ from "jquery";
import "./App.css";
  
function App() {
    const [name, setName] = useState("");
    const [result, setResult] = useState("");
  
    const handleChange = (e) => {
        setName(e.target.value);
    };
  
    const handleSumbit = (e) => {
        e.preventDefault();
        const form = $(e.target);
        $.ajax({
            type: "POST",
            url: form.attr("action"),
            data: form.serialize(),
            success(data) {
                setResult(data);
            },
        });
    };
  
    return (
        <div className="App">
            <form
                action="http://localhost:8000/server.php"
                method="post"
                onSubmit={(event) => handleSumbit(event)}
            >
                <label htmlFor="name">Name: </label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    value={name}
                    onChange={(event) => handleChange(event)}
                />
                <br />
                <button type="submit">Submit</button>
            </form>
            <h1>{result}</h1>
        </div>
    );
}
  
export default App;

Explicación del código anterior: creado para los estados (nombre, resultado), luego la función denominada handleChange() maneja el cambio en la entrada y, por último, la función handleSubmit() envía los datos del formulario al servidor y recibe el resultado entrante.

Inicie su servidor PHP dentro de la carpeta PHP yendo a la consola y cambie el directorio a la carpeta PHP y luego ejecute este comando:

php -S localhost:8000

Ahora su servidor PHP está activo en el puerto 8000, ahora editaremos el archivo server.php:

<?php
    header('Access-Control-Allow-Origin: http://localhost:3000');
    $user = $_POST['name'];
    echo ("Hello from server: $user");
?>

Explicación del código anterior:   el encabezado() permitirá que nuestra aplicación se ejecute en localhost: 3000 para acceder a los datos que contiene.

Ahora revise su sitio web ejecutando el comando en el directorio del proyecto: 

npm start

Luego verifique su sitio web en localhost: 3000 en su navegador, luego escriba su nombre en el campo de entrada y obtendrá su respuesta del servidor.

Salida: ahora vaya a la ventana del navegador y escriba la URL http://localhost:3000/

Salida al enviar el formulario

Ingrese un nombre y envíe, recibirá un mensaje del servidor con el nombre de entrada