3

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

Ido Barash
  • 4,856
  • 11
  • 41
  • 78
  • I think you would want to serve a completely built file, I would not touch webpack on production server, simply build the code when you deploy. – Patrick May 17 '17 at 14:05
  • Thanks, How can I build the code when I deploy? Then I just import it as a script? – Ido Barash May 17 '17 at 14:07

1 Answers1

4

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.

Patrick
  • 3,289
  • 2
  • 18
  • 31
  • So if I would create a stand alone project I can avoid setting up WP and Babel, ES6? – Ido Barash May 17 '17 at 14:12
  • I think so, I'm doing something similar in embedding React inside a regular jQuery environment, this env has no react, babel, webpack etc. and it just works using a script tag. – Patrick May 17 '17 at 14:13
  • I was looking for a way to do this as well but not just wordpress, this answer is very helpful. You probably have to set up your wordpress dev env as normal while outputting the js and including it in your wordpress theme. You will still set up your npm separately or within the theme folder. Is this somewhat in the right direction? – Chopnut Jun 25 '18 at 19:00