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

Improve this question
2
  • 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. Commented May 17, 2017 at 14:05
  • Thanks, How can I build the code when I deploy? Then I just import it as a script? Commented May 17, 2017 at 14:07

1 Answer 1

Reset to default
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.

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

3 Comments

So if I would create a stand alone project I can avoid setting up WP and Babel, ES6?
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.
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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.