How would I run my react.js project in htdocs properly to avoid the 404 error?

I can successfully insert information into the database (SQL, phpMyAdmin) via Home.js. Since I want to integrate PHP with react.js, I tried placing my demo_react (which contain my php files) folder inside myProject (react.js files) folder and then put that inside the htdocs folder in an attempt for them to easily interact with eachother and successfully insert information into the database.

The problem is I get a 404 error even though the action path is correct in <form> tag below.

Before the action path was <form className="form-control" action="http://localhost/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data"> without myProject being in htdocs folder and everything worked fine.

What am I doing wrong and how can I fix it?

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                <form className="form-control" action="http://localhost/myProject/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data">
                    <input type="text" name="username"/>
                    <input type="text" name="password"/>
                    <input type="submit" value="click" name={"submit"}/>
                </form>
            </div>
        );
    }
}

export default Home;