Reactとサーバーサイドの実装（Reactのコンポーネントの値をphpにPOSTしたい）

Question

前提

Reactの勉強中です。
create react appで作成したフォルダを　npm run build し、できたbuildフォルダをドキュメントルートとしてXAMPP上で動かしています。
とりあえず簡単な画面は作成できました。

ドキュメントルート：C:\Users\アカウント名\react_app\build

実現したいこと

私が実現したいのは、そのXAMPP環境にあるreactに書かれているinputタグなどに値を入力し、その値をphpにPOSTし、その値を元にXAMPPのmySQLにアクセスしてDBでなんやかんやしたいという、サーバーサイド側の実装です。Ractとphpをひとつのフォルダなりにまとめるのは難しいのでしょうか？
初心者ですので見当違いな質問でしたらすみません。

jsx(React側について）
POSTする処理は　postData　に記載しています。
その中ではURLSearchParamsのインスタンスであるparamsを作成し、そのparamsにappendする形でPOSTしたいデータを追加しています。
URLSearchParamsを使用したのはcontent typeをapplication/x-www-form-urlencodedの形式でphpに送信したいと考えたからです。
また、axiosを使ってそのparamsを指定のURLに送るという処理を書いているつもりです。

phpについて
POSTされたデータを受け取って、$_POST[ ]をechoする処理を記載しています。

☆わからない点
通常のHTMLで書かれたformの内容をphpで受け取る時は、HTMLのフォーム内のinputタグのname属性をphpの$_POST[ 'name']のように
指定すると受け取れると思います。URLSearchParamsのappendを利用するとき、phpでどのように受け取ればよいでしょうか？

発生している問題・エラーメッセージ

しかしXAMPP環境でReactの開発をしている方が大変少ないようで、ググってもReact側からどうやってDBにアクセスするのかわかりませんでした。

エラーメッセージ

該当のソースコード

import { useForm } from 'react-hook-form';
import axios from "axios";
import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

function LoginForm() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [checkbox, setCheckbox] = useState(false);

  const postData = () => {
      console.log(firstName);
      // console.log(lastName);
      // console.log(checkbox);
      var params = new URLSearchParams();　
      params.append('param1', firstName);
      // params.append('param2', {lastName});
      // params.append('param3', {checkbox});
       axios.post('localhost/MyWeb0711/index.php', params)
      .then((res) => {
        console.log(res.data.text);
      })
        .catch((error) => {
        console.log(error);
      });
  }

  return(
  <div>
  <Form className="create-form">
      <Form.Field>
          <label>First Name</label>
          <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
      </Form.Field>
      <Form.Field>
          <label>Last Name</label>
          <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
      </Form.Field>
      <Form.Field>
          <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
      </Form.Field>
      <Button onClick={postData} type='submit'>Submit</Button>
  </Form>
</div>
  );
}

export default LoginForm;

<?php 
    if(!empty($_POST)){
        if(isset($_POST['param1'])){
            echo $_POST['param1']; 
        }else{
            echo 'name失敗';
        }  
    }else{
        echo 'post失敗';
    }  
?>

試したこと

Fetchで試してみる→phpにリクエストが送れていなさそう
axiosで試してみる→上に同じ

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kazto]

- サーバ、クライアントの構成が適切に構築されているか
- コードが適切に記述されているか
が示されていないため、回答が困難です。
上記を追記おねがいします。

[caren]

サーバ、クライアントの構成が適切に構築されているか、というのがよくわかっていません。
具体的にどのような情報を載せたらよいか教えていただけないでしょうか。

[kazto]

同一のlocalhostで動かしていたとしても、php側（サーバ側）とReact側（フロントエンド）は分けて考えた方がよいです。
phpのコードは単体で動作することは確認できていますか？

また、追記いただいたエラー文から、フロントエンドはwww.my-react-app.com という外部ホストから動作しているように見受けられます。このホストに関する情報を記載おねがいします。

[caren]

XAMPPのバーチャルホストという設定を変更していて、configファイルは下記のように変更しております。
変更したファイル　"C:\xampp\apache\conf\extra\httpd-vhosts.conf"
<VirtualHost 127.0.0.1:80>
ServerName my-react-app.com
ServerAlias www.my-react-app.com
ServerAdmin [e-mail]
DocumentRoot "C:\Users\アカウント名\react_app\build"
<Directory C:\Users\アカウント名\react_app\build>
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Allow from all
Require all granted
</Directory>
</VirtualHost>

初歩的な質問で申し訳ないのですが、php側でも受け取る処理を書かないとエラーになってしまうのでしょうか？とりあえずまずクライアント側からサーバ側へPOSTできたらいいかな、位に考えていたので。php側が単体で動作する、というのはエラーがなければOKなのでしょうか？例えばクライアント側からPOSTが受け取れたらechoで出力する程度のもので大丈夫でしょうか？（何もわからずまだphpのHTMLしか書けていないため。）

[kazto]

> php側でも受け取る処理を書かないとエラーになってしまうのでしょうか？
おっしゃるとおりです。受け取ることができないところにデータを送信しても、エラーとなります。

> 例えばクライアント側からPOSTが受け取れたらechoで出力する程度のもので大丈夫でしょうか？
そうですね、まずはそれくらいで問題ないと思います。

[caren]

ご回答ありがとうございます。とりあえずjsxとphp側を修正しました。
php側は問題なく動くことは確認済みです。

jsxの方のコードに関してお聞きしたいです。
まず、jsxからpostする方法についてです。コードの中でURLSearchParamsのインスタンスを作り、それをaxiosでpostする、ということをやっています。しかしFormDataの方がよいという記事もみかけました。どちらが良いのか知識をお持ちでしたら教えていただきたいです。

また、最終的な目標はinputで入力された値をpostすることなのですが、Reactでなければformタグで囲ってaction属性で送信先を指定して、みたいな形で実現できると思うのですが、それをReactで実現する方法をご存じであれば教えていただきたいです。React Hook Formを使うか、使わないで実装するかも迷いました。React Hook Formを使うと制御コンポーネント（Reactのstateが管理する）、使わなければ非制御コンポーネント（DOMが管理する）位の知識しかありませんが、ご回答くだされば幸いです。

Answer 1

jsxからpostする方法についてです。コードの中でURLSearchParamsのインスタンスを作り、それをaxiosでpostする、ということをやっています。しかしFormDataの方がよいという記事もみかけました。どちらが良いのか知識をお持ちでしたら教えていただきたいです。

axiosを使う方法というのと、FormDataを使う、というのは相反する方法ではありません。
axiosでFormDataを投げる方法だってあります。どちらが優れている、というものではありません。

React Hook Formを使うか、使わないで実装するかも迷いました。

こちらも同様に、React Hook Formを使う方法と使わない方法両方が存在しますが、どちらが優れているというものではありません。carenさんが、こっちでやる、と決めて実装するものです。この際ですので、両方試してみて長所短所を実感してみてはいかがでしょうか。

Comments

[caren]

回答ありがとうございます。
現在のソースをchrome上でデバッグしたところ、axios.postのthenにもcatchの処理にも入らず、そのまま処理を抜けてしまいます。また、前まで出ていたエラーも出ず、コンソールにログが吐かれることもありません。

私が書いたコードで間違っている点があれば教えていただきたいです。

HTTPリクエストについてはもう少し自分で調べてみます。また、とりあえず今はReact Hook Formを使わずに実装してみようと思います。

[kazto]

https://qiita.com/s_taro/items/30114cfa370aac6c085f

axios.post に渡すURLに `http://` がありません。