The context
I was asked a few weeks ago to build a new page on a existing Wordpress site, in order to build a "shop area":
Link to page...
For further actions, you may consider blocking this person and/or reporting abuse
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?
Hello!
Have you build the react app ? (
yarn build)Maybe you have a public repo to check this out ?
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
Do you have something in the browser js console ?
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.
@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
Thanks for writing this up. I just did something similar, though more for a widget than a whole page (a multi step form/wizard that can persist data at various points and reach out to other APIs).
I learned from seeing how you did it. In particular, your shortcode setup was a revelation as I’m new to Wordpress.
I do think my approach will remain to sprinkle in bits of interaction where desired or where the plug-in ecosystem doesn’t meet my particular need.
I just wanted to chime in and say that I found @wordpress/scripts to be a nice alternative to create-react-app for getting up and running quickly. I’ve used CRA in the past, and it felt similar. And no need to fiddle with the build setup, which sims like a pain point in CRA.
Anyhow, thanks again for sharing
Hey Julien, thanks this plugin is a life saver. I didn't want to code PHP and kinda stumbled upon this blog. This is a cool thing. When I try to follow the exact steps I get this
in my browser console. I can see the paths for css and js in the created app is set proper. I think when the js is loaded this render call fails, don't know why...
Julien was able to find alternate way. I used wp.element for loading react and react-dom instead of directly packaging it from create-react-app. We have to use wp-scripts instead from where wp.element comes from. Once using that we also have to load/enqueue wp.element where we init our plugin (php file where we register it as shortcode).
Seriously thanks for the input on where to get started.
Hey Julien, nice article. Very thorough introduction, especially the part on how to use the Rest-API.
For convenience, I created a plugin to streamline the process of embedding a React app in a WordPress site: wordpress.org/plugins/reactpress/
Nice project ! I will get a look when I will have some time, thanks for the mention !
Hi! Thanks for this well written tutorial :)
How can I use wp_localize_script? When I try to build my app craca tells me that variables are not defined. Can you help me?
Hum I don't how to use wp_localize_script. It seems to be a php WP function right ? So it cannot be used in the react app as it's only frontend.
How it will work when we have multiple components on multiple roots?
E.g A component on div class="a-div"
B component on div class="b-div"
But a-div and b-div both are on different pages.
Hello Julien,
Nice roadmap, everything is working well. I just have a question, how to make several independent plugins from each other based on your code?
Thanks :)
Good question 😅
I see in other comments some others strategies that may worth to explore. I have a single react app in my use case 🙃