DEV Community

Discussion on: How to use React inside a Wordpress application ?

Collapse
 
paredescreative profile image
Victor

Hey Julien! I was wondering if you might be able to help me out. I've followed these steps and the React app doesn't seem to display with the shortcode. While the react app works on its own, nothing displays where the shortcode is inserted on the page. The shortcode also doesn't display text on the front-end, so I know that Wordpress is noticing that it's there.

You can see how it looks here: snipboard.io/Qr0uIz.jpg
And this is the my-react-app.php code: snipboard.io/6dFw1a.jpg

Any thoughts?

Collapse
 
julbrs profile image
Julien Bras

Hello!

Have you build the react app ? (yarn build)

Maybe you have a public repo to check this out ?

Collapse
 
paredescreative profile image
Victor • Edited

Sure! github.com/ParedesCreative/react_test

I have definitely cleared the yarn cache as well as rebuilt a few times now. Let me know if that is the info you're looking for. I appreciate the help.

Victor

Thread Thread
 
julbrs profile image
Julien Bras

Do you have something in the browser js console ?

Collapse
 
jamo1789 profile image
Jamo1789 • Edited

Hey, I had the same problem. You could try put and replace the wp_register_script and wp_register_style with the full path to the build index.js like this:
wp_register_script("my_react_app_js", plugins_url("/frontend/build/static/js/main.js", FILE), array(), "1.0", false);
wp_register_style("my_react_app_css", plugins_url("/frontend/build/static/css/main.css", FILE), array(), "1.0", "all"); The $path variable isn't used anywhere after that.

After replacement just try as it stated in the article.

Collapse
 
adepachter profile image
Arno De Pachter

@julien amazing article!
@victor and others with the same problem:

  • in the package.json: "homepage": "/wp-content/plugins/my-react-app/frontend/build",

  • in the .php you created it only gives out the correct path when Wordpress is in development, the function my_react_app_init() doesn't work properly, to make things easier I changed the initial path to /frontend/build/static