在PHP中使用create-react-app

Question

I'm new to react and want to use it with index.php. I made my react project using create-react-app. I researched about it and found that you can use react with php after building it. But I want to work with development mode. Please help me with this.

Answer 1

use another server for PHP;

first debug React, "npm start" http://localhost:3000/

let buttonPHPSet = () => document.getElementById("buttonPHP").addEventListener("click", (e) => {
    const that = e.target;
    const data = {
        "p": "7",
        "h": "2",
        "P": "3"
    };
    postAjax("http://my-app.local/controller/HomeController.php", data, (result) => {
        let json = JSON.parse(result);
        that.textContent = JSON.stringify(json);
        console.log(json);
    });
}, false);

function postAjax(url, object, success) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true); //URL-aдpec интерпретируется относительно страницы, с которой вызывается код, хотя можно указать и абсолютный путь //только готовит его к отправке
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            success(xhr.responseText);
        } 
    };
    xhr.setRequestHeader('Content-Type', 'text/plain; charset=UTF-8');
    xhr.send(JSON.stringify(object));

    // let xhrFormData = new FormData();
    // for (const key in object) {
    //     if (object.hasOwnProperty(key)) {
    //         xhrFormData.append(key, object[key]);
    //     }
    // }
    // xhr.send(xhrFormData);

    // const allHeaders = xhr.getAllResponseHeaders();
    // xhr.abort();
    return xhr;
} 

sec debug php whis IIS http://my-app.local/

<?php 
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");
header('Content-Type: text/plain; charset=utf-8');

// header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT");
// header('Access-Control-Allow-Credentials: true');
// header('Content-Type: application/json;charset=UTF-8');
// header('Content-type: application/xml');
// header('Content-type: multipart/form-data);
// header('Content-type: text/html;charset=utf-8);
// header('Content-type: application/x-www-form-urlencoded; charset=UTF-8);

$postdata = file_get_contents("php://input");
$postDataDecode = json_decode($postdata);

if($_POST){

    $array = [];

    foreach ($_POST as $key => $value) {
        $array[$key] = $value;
    }

    echo json_encode($array);

} elseif ($postDataDecode) {
    echo json_encode($postDataDecode);
}

?>

vs code edge