How can I write php scripts in react.js file?

Question

I've looked all over SO but the answers I'm seeing aren't clear for me. I've designed a nice UI/UX using react.js for my project but now I want to start hooking up some backend stuff to it using php.

I'm aware you can make ajax calls to fetch data but that still wouldn't allow me to do something like: <p><?php echo "testing; ?></p> in a react.js file.

Maybe my understanding isn't clear but I'd love some clarification because what I'm seeing online doesn't suffice for me.

Is it possible to write php scripts in a react.js file?

Also, I saw this link: https://github.com/reactjs/react-php-v8js but again, it isn't clear.

My apologies in advance if this doesn't satisfy the question standards on SO, I'm just really stuck and have nobody to turn to IRL other than SO. Thanks :-)

There's too much to unpack, you need to provide more information about your setup. You don't echo PHP in your react project, you use data binding and setState with the values you received from backend server (using ajax as you mentioned). I don't think I can explain it better than here: reactjs.org/docs/faq-ajax.html — Aleksandras Gavinčiuk
– Aleksandras Gavinčiuk, Commented Dec 23, 2018 at 15:06
@AleksandrasGavinčiuk I saw that link already but I'll give it a shot again, thank you. This means I can fetch GET requests from my php file and put those values in a state in my reactjs file, right? — greyskies
– greyskies, Commented Dec 23, 2018 at 15:13

Miguel Angel Mendoza · Accepted Answer · 2018-12-23 15:09:36Z

1

With reactjs you have to use different approach to the one used for php programing. Reactjs is the frontend, and php side is the backend or api. (I mean you do not have to render js on php, only your response on application / json)

To do that you can use * either axios or fetch* on reactjs app to request to the backend. With the response returned by the backend you will set a new state on your react component.

I will add a basic example:

React App:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  ...
}

export default App;

Server side:

<?php
$response = [
   'items' => [
        [
            'product': 'MY PRODUCT 1',
            'code': '10001',
            'price': 39
        ],
        [
            'product': 'MY PRODUCT 2',
            'code': '10002',
            'price': 99
        ]
   ]
];

header('Content-Type: application/json');
echo json_encode($response);

I hope this can help you. :-)

answered Dec 23, 2018 at 15:09

Miguel Angel Mendoza

1,3229 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

greyskies Over a year ago

Thanks Miguel :D. This means I can fetch GET requests from my php file and put those values in a state and render in my reactjs file, right?

Miguel Angel Mendoza Over a year ago

Right, this.setState({ data }) re renders your component automatically.

Collectives™ on Stack Overflow

How can I write php scripts in react.js file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related