This is gold. I was searching for a way to use React in tandem with Wordpress and every other video was providing a simple click counter plugin. This showed a unique plugin that really showcased the functionality!
This is unique. Gold. I was trying to search how to combine my react-three-fiber projects with wordpress but no luck until I found your video surprisingly. New sub.
Thank you buddy! I have been contemplating doing a video on how to make a page builder using ACF Pro with ACF Extended. Is this something you'd be interested in?
Wow. I never thought that you are this experienced with r3f and backend integration my friend. Your are a genius. Congratulations. Loved the tutorial. Learned a lot from it and for sure I will talk to you soon about a project using this stack. 👏🏻👏🏻👏🏻👏🏻
Compared to your work I still see myself as a newbie haha! Only started using react once I saw bruno simons updated R3F lessons... now I'm "hooked" 😆. Drop me a message on twitter as and when anything like this comes up, might be able to assist! 😄👍
Like others were saying in the comments, this content is amazing, thank you so much, Wordpress with R3F is exactly what I was looking for and I did not expect to find this well made video
Thank you bro! On holiday for a couple of weeks but have a few projects/tutorials lined up for when I get back which I can't wait to share on TH-cam with you all! 👌
@@reecedevs is there any way we can integrate for instance, a calculator app from our react app into our wordpress website (landing page for instance) even if we don't own ACF PRO?
@@ahmadissa5931 hey man, if you change the target of the react app (normally an id of #root) to something like #calculatorForm, then build the files you should be able to run npm run build. From there, include the javascript files on the page it's needed and make sure that there is a div with an id of #calculatorFom and the react app will attach itself to the div. Hopefully this helps 🙏
Great video, well put together 👍 Interesting approach to the live rendering in WordPress too. We use ACF Extended's "Flexible Content - Dynamic Render" feature, which could let you render the exact template your FE is using (removing the need to have a backend-only script).
Amazing tutorial. One of the best that I watched about this topic. Anyway, what WordPress theme are you using in this tutorial? Thanks and congratulations for this amazing content.
Thanks so much bro, building wordpress sites is my full time job, so thought there's probably people out there like me that would like to know a way to do this (I struggled finding anything online)! I dont used prebuilt wordpress themes but instead start with with a blank theme, which if I can remember, I used "underscores" to generate. From there I have advanced custom fields flexible layouts (each component from a given design is coded into a layout manually). I used advanced custom fields extended to make the backend more user friendly as it offers dynamic previews that give you a frontend "page builder" style view which is nice. For styling I used sass, each layout has its own sass file which makes them nice and easy to manage/edit. I prefer this as I can easily replicate any design. (Although you could use a framework like tailwind/bootstrap if you don't need it pixel perfect) Hopefully that gives you a nice insight! I could possibly do a tutorial if you're interested?
@@reecedevsFantastic! Thanks for your reply. I find Underscore very interesting as well. I usually use a child theme from Generatepress or Genesis Framework. However, I was really curious about how to integrate React, Three.js, and ACF (which I use a lot) together. If you happen to come across a tutorial on this topic, it would be amazing.
No worries! I've had a little look into headless wp using Frontity (react framework for wordpress), although haven't used it for any client work. Reason being that headless comes with its own issues such as having to host two sites separately, rather than just the one. Also some concerns with SEO, certain plugins not working etc... but might be a good solution for you perhaps if the websites you're building are more creative and don't need to rank high on Google. 👀👍
Hey mate may i ask when deploying something like this am i able to use shared hosting for example the hostinger or do i have to use a vps to host react with the wordpress website?
Hey! First of all, amazing video, congrats! I have a question: Its possible to send information from the react to the wp data base? In the video i think that you only show how to send data from wp to react. Thanks!
Hey! Thanks so much. Being totdally honest, I haven't tried what you have described, however it should be possible. I would look into the Wordpress rest api docs here: developer.wordpress.org/rest-api/reference/posts/#create-a-post Within the react app, you could then create a fetch, which can make a post request, something like this (bear in mind, unless you want lots of spam, you want to make sure people are authorised to do so ): fetch('yourwebsite.com/wp-json/wp/v2/posts', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic' }, body: JSON.stringify({ title: 'Post Title maybe from a form?', content: 'Any content you want', status: 'publish' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Hey Reece, great video, it really helped me a lot! :) have you ever tried embedding more than one react app in the same app? I am trying to do just that (I have multiple r3f scenes), but only one at a time seems to work: if I embed any of my scenes individually, they all work, but if embed all of them, only one is visible in the WordPress app.
Hey, apologies for the delayed reply. There could be a few things happening here and i wouldn't know unless i saw the code. The main thing i'm thinking is that the id of the scenes are all the same (usually #root). In the index.html file, you could change the div ID to be something unqiue, and then update the index.js file where it says "document.getElementById('root')" to be the name of the unique id you have chosen, e.g: - index.html - change: "" to be "" - index.js - change "const root = ReactDOM.createRoot(document.getElementById('root'));" to be "const root = ReactDOM.createRoot(document.getElementById('app_1'));" and then do the other apps as "app_2" "app_3" etc. Hope this helps.
Hey, I haven't used Spline much myself, but seems to be a solid tool. I would say use which ever tool helps you get the result you desire most efficiently... Designers with little code knowledge would likely prefer Spline, Developers who prefer coding and a bit more control may prefer the way demonstrated here. :)
@@reecedevs awesome 🔥🔥 I've been trying to find some quality videos on that but so hard to get and none of them are a fully fledged video, they are all bits and pieces 😭
Hey, I would say learn what you enjoy so that you stick with it. React can be used to build a headless wordpress site (look into "next.js headless wordpress") which comes with it's own pros and cons. In this tutorial, I could have used Vanilla Three.js, however I really enjoy working with R3F, and thought I would share how I have been using them together as there isn't much out there. (There seems to be a disconnect with wordpress and react stuff unless it's 'headless wordpress'!)
This is gold. I was searching for a way to use React in tandem with Wordpress and every other video was providing a simple click counter plugin. This showed a unique plugin that really showcased the functionality!
🎉❤wow really a genius. Thank you sir. Keep it up
This is unique. Gold. I was trying to search how to combine my react-three-fiber projects with wordpress but no luck until I found your video surprisingly. New sub.
Thanks so much 👍I did the same and ended up coming up with this solution as nothing really worked how I wanted it too.
straight to the point, without blabla at a good pace - thanks a lot - other tutorials would be 3 hours for that information :)
Thank you! :)
You deserve way more views & subs. You cover areas which most don't cover. Thank you!
Would love to see you cover more wordpress projects
Thank you buddy! I have been contemplating doing a video on how to make a page builder using ACF Pro with ACF Extended. Is this something you'd be interested in?
Wow. I never thought that you are this experienced with r3f and backend integration my friend. Your are a genius. Congratulations. Loved the tutorial. Learned a lot from it and for sure I will talk to you soon about a project using this stack. 👏🏻👏🏻👏🏻👏🏻
Compared to your work I still see myself as a newbie haha! Only started using react once I saw bruno simons updated R3F lessons... now I'm "hooked" 😆. Drop me a message on twitter as and when anything like this comes up, might be able to assist! 😄👍
Like others were saying in the comments, this content is amazing, thank you so much, Wordpress with R3F is exactly what I was looking for and I did not expect to find this well made video
Thank you so much, really appreciate the feedback :)
Great video mate, keep it up. Looking for more R3F tutorials from you in the future 👍
Thank you man, definitely will be doing more in future 👌
Great tutorial my friend 👍... Hope to see more content 🔥
Thank you bro! On holiday for a couple of weeks but have a few projects/tutorials lined up for when I get back which I can't wait to share on TH-cam with you all! 👌
@@reecedevs is there any way we can integrate for instance, a calculator app from our react app into our wordpress website (landing page for instance) even if we don't own ACF PRO?
@@ahmadissa5931 hey man, if you change the target of the react app (normally an id of #root) to something like #calculatorForm, then build the files you should be able to run npm run build. From there, include the javascript files on the page it's needed and make sure that there is a div with an id of #calculatorFom and the react app will attach itself to the div. Hopefully this helps 🙏
keep uploading, more ... more... want to see your learning road
Thank you, I'm hoping to do some more videos this year :)
Great video, well put together 👍 Interesting approach to the live rendering in WordPress too. We use ACF Extended's "Flexible Content - Dynamic Render" feature, which could let you render the exact template your FE is using (removing the need to have a backend-only script).
Thanks Adam, such a great shout with the dynamic render! 👌
You did it and got me hyped!! Thank so much for this.. legend
Haha no worries buddy! 😄👍
Amazing tutorial. One of the best that I watched about this topic. Anyway, what WordPress theme are you using in this tutorial? Thanks and congratulations for this amazing content.
Thanks so much bro, building wordpress sites is my full time job, so thought there's probably people out there like me that would like to know a way to do this (I struggled finding anything online)!
I dont used prebuilt wordpress themes but instead start with with a blank theme, which if I can remember, I used "underscores" to generate. From there I have advanced custom fields flexible layouts (each component from a given design is coded into a layout manually). I used advanced custom fields extended to make the backend more user friendly as it offers dynamic previews that give you a frontend "page builder" style view which is nice.
For styling I used sass, each layout has its own sass file which makes them nice and easy to manage/edit. I prefer this as I can easily replicate any design. (Although you could use a framework like tailwind/bootstrap if you don't need it pixel perfect)
Hopefully that gives you a nice insight! I could possibly do a tutorial if you're interested?
@@reecedevsFantastic! Thanks for your reply. I find Underscore very interesting as well. I usually use a child theme from Generatepress or Genesis Framework. However, I was really curious about how to integrate React, Three.js, and ACF (which I use a lot) together. If you happen to come across a tutorial on this topic, it would be amazing.
No worries! I've had a little look into headless wp using Frontity (react framework for wordpress), although haven't used it for any client work. Reason being that headless comes with its own issues such as having to host two sites separately, rather than just the one. Also some concerns with SEO, certain plugins not working etc... but might be a good solution for you perhaps if the websites you're building are more creative and don't need to rank high on Google. 👀👍
@@reecedevs Thank you for your reply and this information about Frontity! Very good content and I'm following you.
i cannot find theme to be use like you do, the Hero part, can you show what theme and how to use it in elementor?
Super Cool! you helped me a lot man!
Thank you, glad I could help!
Hey mate may i ask when deploying something like this am i able to use shared hosting for example the hostinger or do i have to use a vps to host react with the wordpress website?
Hey! First of all, amazing video, congrats! I have a question: Its possible to send information from the react to the wp data base? In the video i think that you only show how to send data from wp to react. Thanks!
Hey! Thanks so much. Being totdally honest, I haven't tried what you have described, however it should be possible. I would look into the Wordpress rest api docs here: developer.wordpress.org/rest-api/reference/posts/#create-a-post
Within the react app, you could then create a fetch, which can make a post request, something like this (bear in mind, unless you want lots of spam, you want to make sure people are authorised to do so ):
fetch('yourwebsite.com/wp-json/wp/v2/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Basic'
},
body: JSON.stringify({
title: 'Post Title maybe from a form?',
content: 'Any content you want',
status: 'publish'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Hey Reece, great video, it really helped me a lot! :) have you ever tried embedding more than one react app in the same app? I am trying to do just that (I have multiple r3f scenes), but only one at a time seems to work: if I embed any of my scenes individually, they all work, but if embed all of them, only one is visible in the WordPress app.
Hey, apologies for the delayed reply. There could be a few things happening here and i wouldn't know unless i saw the code. The main thing i'm thinking is that the id of the scenes are all the same (usually #root). In the index.html file, you could change the div ID to be something unqiue, and then update the index.js file where it says "document.getElementById('root')" to be the name of the unique id you have chosen, e.g:
- index.html - change: "" to be ""
- index.js - change "const root = ReactDOM.createRoot(document.getElementById('root'));" to be "const root = ReactDOM.createRoot(document.getElementById('app_1'));"
and then do the other apps as "app_2" "app_3" etc.
Hope this helps.
Thanks you❤
What program are you using for WordPress on local host?
it's Localwp
Why wouldn’t I just use spline?
I would like the answer to this as well.
Hey, I haven't used Spline much myself, but seems to be a solid tool. I would say use which ever tool helps you get the result you desire most efficiently... Designers with little code knowledge would likely prefer Spline, Developers who prefer coding and a bit more control may prefer the way demonstrated here. :)
I want a full tutorial on this with wordpress ACF integration and setup as well as deployment 😢
Hey, I have been tempted to make a video that goes into more depth about the ACF stuff. I'll drop you a message if I do go ahead and make a video 😀
@@reecedevs awesome 🔥🔥 I've been trying to find some quality videos on that but so hard to get and none of them are a fully fledged video, they are all bits and pieces 😭
Very nice!!
Wow! 🎉
i have learned react js is it worth to learn wordpress with react
Hey, I would say learn what you enjoy so that you stick with it. React can be used to build a headless wordpress site (look into "next.js headless wordpress") which comes with it's own pros and cons. In this tutorial, I could have used Vanilla Three.js, however I really enjoy working with R3F, and thought I would share how I have been using them together as there isn't much out there. (There seems to be a disconnect with wordpress and react stuff unless it's 'headless wordpress'!)
Sub!