Search code examples
wordpressreactjswp-api

React on existing Wordpress site


I have a WP site working. It has everything rendered by using PHP files.

Now, I would like to change one page of my site to be based on React. Meaning one page-template that will execute react JS code instead of PHP. Can this be done?

I found that I can user WP-API, and that is great but can It be done in somekind of a hybrid mode?

If so, what do I do with webpack and node_modules? Will I have to navigate to the react template and run webpack run manually? Should I execute npm start on my production site?

I found tutorial showing how to use WP-API as backend server, but the React app is served on its own. I need the react app to be served by wordpress.

Help please

Regards, Ido


Solution

  • This is somewhat complex, but I think it's a two step process

    1. Setup a develop environment for React, this can be done inside a wordpress project, but it would be much simpler to develop it in a side project.

    2. Once you finished developing, you build a production version of your code(I.E, index.min.js) - this is a self contained file that should be a "plug and play". simply including this regular script tag in your page should start working.

    The complex part is setting up an ES6 / Babel / React environment inside a wordpress project, but other than that, React will bundle into a browser-ready file that can be used directly inside a browser.