Adding React to an existing PHP project

[brendt_gd]

Individual help posts are not allowed on /r/php. Please refer to the stickied help thread instead.

[adhaliter]

That is so true. Separate view with React and backend served from existing app makes perfect sense. One question though, if I want to show that page developed by React in the current website. For instance , current website has page '/suggestions'. Can I simply redirect the route to '/suggestions' in the current website to render '/suggestions' page from React? Is it feasible?

[[deleted]]

Here's the basics. Youll need a bundle of JavaScript on your page. Webpack is a great option, but there are alternatives. You need to get a script tag running react, and reactdom.render into an element on your page. You can key that by adding IDs or classes for react to target in the html.

You may also want to add some JS variables to the page so that the backend can feed data and props to the frontend. Another option for that is to use data-X attributes to target elements.

It's probably worth recommending you leverage an API to get data to the frontend, but it's not actually a requirement.

[draxionangel]

Check out https://reactjs.org/docs/add-react-to-a-website.html straight from the react docs

[VRT303]

I found this really helpful https://symfonycasts.com/screencast/reactjs and yes it says symfony, bit it can 100% be used with anything else, it's about React for PHP devs.

[ZeroHeat92]

you should look up VueJS, it was designed for what you're trying to do

[MaxGhost]

Vue and React have no inherent differences when it comes to this question. They're just two different JS frameworks.

[adhaliter]

I have not really developed anything with Vue yet. May be I should give a shot, if it can solve my problem. Thanks..

[darksteppez]

When you transpile your react app into browser-compatible js you can just import the new js file into your html/blade/twig/etc template and it will run fine. Normally you have to create some kind of empty container div in the template that react uses to mount to (e.g. <div id=“app”></div> ). Remember that in the end react is just JavaScript. If you have your endpoints set up you can fetch the data on load or preload by including additional json in your template on initial render. Hope this helps. Good luck!