Php WAMP服务器上的本地JS应用程序

我最近启动了一个reactjs网络应用程序。我在wamp服务器上本地写它。我在一个目录中创建了它，并将该目录复制到wamp服务器的“www”文件夹中。wamp服务器运行正常。当我运行npm start时，站点在localhost:3000上运行，它会导航到我的php文件，但是它会返回所有php代码，而不是执行它。当我直接导航到PHP文件时，代码执行得很好。我的问题是，如何在reactJS应用程序中本地运行PHP

我的AJAX调用（成功）：

我的PHP代码现在很简单，我一直在尝试测试我是否可以让任何东西正常工作，所以现在它是：

<?php
 echo "Hello World";
?>

这是我的Index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

var $ = require ('jquery');
var retrieveCardsPHP = require('./getStartUp/retreiveCards.php');
var userID = 1; //write function to get UserID

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

var Cards = React.createClass({
  loadCardsFromServer: function() {
    $.ajax({
      url: this.props.url,
      method: "POST",
      data: "userID="+this.props.user,
      dataType: 'html',
      success: function(data) {
        console.log(data);
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCardsFromServer();
    setInterval(this.loadCardsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

      </div>
    );
  }
});

ReactDOM.render(
  <Cards url={retrieveCardsPHP} user={userID} pollInterval={5000} />,
  document.getElementById('Page1')
);

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
导入“./index.css”；
var$=require（'jquery'）；
var retrievecardshp=require（'./getStartUp/retreiveCards.php'）；
var userID=1//编写函数以获取用户ID
ReactDOM.render(
,
document.getElementById（'root'））
);
var Cards=React.createClass({
loadCardsFromServer:函数（）{
$.ajax({
url:this.props.url，
方法：“张贴”，
数据：“userID=“+this.props.user，
数据类型：“html”，
成功：功能（数据）{
控制台日志（数据）；
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
handleCommentSubmit:函数（注释）{
var注释=this.state.data；
var newComments=comments.concat（[comment]）；
this.setState（{data:newcommons}）；
$.ajax({
url:this.props.url，
数据类型：“json”，
键入：“POST”，
数据：评论，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
此.loadCardsFromServer（）；
setInterval（this.loadCardsFromServer，this.props.pollInterval）；
},
render:function（）{
返回(
评论
);
}
});
ReactDOM.render(
,
document.getElementById（'Page1'）
);

这段代码大部分是从教程中提取的，我正在尝试修改它。 我想做的就是在本地运行应用程序，而不是每次都创建一个构建。

---

谢谢。

你的npm开始脚本是什么样子的？@shadymoss哪里可以找到npm开始脚本？我是reactJS新手，非常感谢NPM脚本将在您的package.json文件中的“scripts”键处。如果没有“开始”键，那么它只是运行主文件。您还可以找到package.json中的文件。它默认为index.js。@shadymoss它默认为index.js，我更新了我的主要问题以包含itI。我至少看到一个问题，您试图在节点中要求一个php文件：

var retrievecardshp=require（'./getStartUp/retrievecards.php'）这不会像你想的那样起作用。Node是一个js环境，它不会执行php。您不希望在节点中需要一个php文件。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

var $ = require ('jquery');
var retrieveCardsPHP = require('./getStartUp/retreiveCards.php');
var userID = 1; //write function to get UserID

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

var Cards = React.createClass({
  loadCardsFromServer: function() {
    $.ajax({
      url: this.props.url,
      method: "POST",
      data: "userID="+this.props.user,
      dataType: 'html',
      success: function(data) {
        console.log(data);
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCardsFromServer();
    setInterval(this.loadCardsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

      </div>
    );
  }
});

ReactDOM.render(
  <Cards url={retrieveCardsPHP} user={userID} pollInterval={5000} />,
  document.getElementById('Page1')
);