Is it possible to use React and PHP in conjunction with each other to have some pages rendered by php and some by React? Or is it that if you are going to set the Apache server up to use React you can only communicate with the php scripts via Ajax through React?
The reason I am asking is I am currently using strictly php but would like to migrate to React for client side rendering but would like to do so over time. Is that possible?
I don’t use React, so I can’t answer directly. The person who made this slide show seems to think they will work together: https://www.slideshare.net/andrewrota/integrating-reactjs-into-a-php-application
Thanks, I had read that before while researching this. Only issue there is these are the slides for some sort of presentation that he gave and the audio/video from the presentation is not there and I’m not smart enough to understand what he is saying without asking questions.
I have node.js installed on the server but from what I can figure so far with the React App I am using is that it requires the .htaccess file to point everything coming into the server to the base directory for the React App because React is doing all the routing. I want to be able to use my existing .htaccess file and based on the directory call, point it to React or to php.
And I understand that I may be way off base here. I am new to this world but I like React from what I have seen of it so far.
I haven’t done this either (yet) but it’s my understanding that you can mix them quite easily really.
One of the biggest benefits of using React is that it’s a pretty standalone script. You can literally just include it in your site like any other JS scripts and make use of it how you see fit.
Only the stuff that must be “reactive” will communicate over ajax to your own PHP scripts on the server. Or basically, your API.
What you need to do is begin separating your project (PHP side) between directly outputting “pages” versus outputting “data”. React just needs the data, it doesn’t need PHP pages. So you need to build endpoints on your server which only serve JSON data and handle those API requests.
This means if you have a PHP page being output, let’s say for a contact page, you would output the entire page including the React script. This would show up for the user, waiting for their input. And then the user fills in the form and submits it. Well this functionality is perhaps controlled by React. So React sends the form data to the server and waits for the response. On the server side, you have the API handle this request and send back a JSON payload. React then parses the JSON and updates the form with a “thank you” message or whatever. No page reload needed.
The difference is that instead of a PHP page that accepts a POST request and then outputs a result page, you have a PHP script that accepts the POST and outputs just the JSON result data (not a page).
And perhaps you need both? If JS is off and React is broken, the form should submit as normal to a normal PHP script that outputs the normal form result page.
So you’ve mixed outputting a normal every day PHP page that includes a component controlled with React. The React stuff communicates over ajax back to the server but talks to the PHP API and gets JSON data back, not “pages”. React doesn’t have to do your routing or render the pages if you don’t want it to. And you don’t need a Node server to create PHP API endpoints.
This is, again, one of the best features of React that made it so popular. You can stick it just here or there as needed to control just the small “reactive” parts of a page you might need it to. It doesn’t have to control the entire page, routing, or rendering. You don’t need state management, Node, a Mongo server, or whatever else. It just waits for user events and potentially communicates to the server for some new data. For simple stuff you may not even need JSX.
Ok, you lost me on the last part. How are you delivering React to the client? I am assuming they are using your domain name which will come to the Apache server, right? So how am I delivering partial pages or just some pages from React and the rest form php?
I get the part about once it is out there I can get data from the server via ajax JSON calls. I do that now with JQuery. Where I’m having the problem is seeing how they run together and how they are both being delivered.
I want to try something tomorrow with .htaccess seeing if I can get the server to recognize both a React call and a php call. That is the sticking point for me at least.
Thanks for the input also. I do appreciate it.
You shouldn’t need to do anything with htaccess. Nor is there a difference between a php call and a React call.
When React makes an ajax call, all it’s doing is making a normal GET or POST request to some endpoint you have, like say example.com/api/getstuff.php.
When React calls this page, it gets some JSON returned.
If a person visits this URL just with the browser, they would probably see some JSON too. Or you can code some sanity checks to make sure it’s only your React code that is able to call it.
Any time you want to get standard pages, they are opened as usual /example.com/somepage but when React needs to update, you will have alternate endpoints to use /example.com/api/getusers.php. You just have to code your own security to protect these API pages, which is a different discussion.
React is not based on “pages”, it’s based on components. You would load a component into some part of the page with normal JS code.
Load the React library, then code “hey go render your component into this HTML DIV over there”, done. React will then be in control of that little div component as long as the page is open.
We’re not on the same page. I understand if the whole client side is rendered in React. That works fine. What I am asking about is to migrate my current application over to React where eventually everything is done with React. In the meantime, all communication to my server, other than ajax, is handled through htaccess. I never make direct calls to .php pages. All my url’s are plain english, simple url’s.
So day 1 when i want to start integrating React and I want to create one page with React, but the rest of the pages are still being created by calls through htaccess to php pages, how do I call that one react page? While still being able to call all the other php generated pages?
And I understand React is components but components join together to make a page if I am only using React to for the client side, right?
Does that make sense?
Ya if you eventually want React to generate the entire page, I still don’t think you need to change anything in htaccess.
You have friendly URLs, basically human readable pages, /example.com/somepage.
All I’m saying is you deliver the content like you would any other page, you just deliver the React JS library and the basic HTML and React takes over.
Often the HTML won’t be much more than a doctype, header, body, with a
<div class="app"></div> and then React hooks into that div and does the rest. So in the header of the page you load the React library. And then perhaps above the end body tag, initialize React.
I guess maybe what I’m confused about is why you think anything changes on the server side with PHP or htaccess. Delivering normal PHP pages is no different than delivering a React page. You just send along the page with whatever content it needs. In this case, some basic html with the React libraries and code.
If you have a CMS like Wordpress or something and are wondering how to create some new pages to play with, then you would have to create a new template and set it up just for React. Then create a new Page and select that as the template.
Maybe it would be clearer if you mentioned what CMS or tool you’re using. Or give a sample of your htaccess. Normally htaccess rules are little more than redirecting to the index.php page. Are you using htaccess to redirect every single endpoint?
If you can create a page that can use it’s own template and content, just add React to that template and server it with PHP like any other page.
Thanks for the input. I think you have steered me in the right direction. I need to do some more learning in this area. My knowledge of React is limited to the dedicated use of it and I need to look at incorporating it into an existing page.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.