ISSUE: brads-boilerplate-theme displays the blue header box as soon as I activate the theme and after running npm install but; as soon as I run: npm run start, the blue header content disappears. Was on WP 5.9 so I spun up a local dev on WP 5.7 but has the same issue. Any thoughts?
Same thing with brads-boilerplate-block-plugin. Works after activation, after npm install, but breaks after npm run start. Editor says "Your site doesn’t include support for the “makeupnamespace/make-up-name” block"
I just updated the GitHub repo so that both the theme and the plugin folders have updated package.json files. I believe the version of the official WordPress package was old enough that it was causing the build process to just fail altogether; when I tested the repo a few minutes ago mine wasn't working either. But with the updated files now it works perfectly.
Man, you really knows how to teach AND you ALWAYS come with something cool. Even if is a subjects that others explain, or try to explain, your content is ALWAYS different AND better!!!!! Thank you very much!!!
I thought I recognized your voice…! I just finished your Git a Web Dev Job course on Udemy, and came here to look up how to put WordPress and React together, and here you are again! You’re an awesome teacher, Brad. Thanks so much for taking the time to educate 🙏
Taking the course WP developer now. Got the html /css, JS, and Git shortly after starting to accompany it. You're super at walking through a whole project and breaking down the high and low levels in a way that easy to process. 😎
Hey Brad :) I just wanted to thank you for the amazing video. It was super helpful, as expected. When I saw your video in the search results, it reminded me of studying WordPress around 6 years ago through your videos and how helpful they were for me back then. I just wanted to say thanks and wish you a good day :)
The approach in this video is still pretty "WordPressy" - if you really prefer to work with React more than WordPress I think the Frontity project looks perfect! The only downside is that you need Node.js web hosting instead of just the traditional super affordable PHP / LAMP hosting. EDIT: Apparently you can use the free Vercel service to host the Node.js endpoints; the official Frontity documentation has a deployment guide too.
thanks so much for this tutorial! I wanted to dig into the WordPressy way of using react for a while now and this opens up a whole new world of possibilities for extending WordPress 😁 I feel like I found a whole new playground to play with And I bought your course on the same day 👍 looking forward on digging deeper into it
Hi Brad - I own all your premium courses. Thank you so much for the wonderful work that you do. This was really great information. Wish you all the best.
You really know your way on how to teach! Thanks a lot for the free content. Just bought your react courses to go deeper on the subject. Do you have any more courses on React dev within Wordpress ? Like custom post type, theme... would be great.
i would love if you could make a video on how to bundle a nodejs module built with typescript that can be used in node (commonjs), es6 import, and in the browser.
Hi Brad, What an amazing video! Although I only knew very little about React, I still learned a lot from this video. However, some of these things were a bit confusing for me. I think I will gather more information about React, and then I will rewatch your video to understand it better. Anyways, it was a great watch, and thanks a lot for sharing this amazing resource with the viewers. Looking forward to watching more helpful videos from you!
I would love to see how to build the pages out with content now. All I am seeing is pages I create with a clickable Title on the top and zero content showing up. I really like this idea, but some more info like how to build out the Header, Footer, and Navigation would be very helpful.
Nice tutorial but i think you miss the most important part in the theme, how to integrate the loop of wordpress, or it just works with php and you have to use the api of wordpress with this setup? thanks
Good point! For SEO / accessibility reasons I like to have most of the standard content (paragraphs, headings etc...) output server-side, and only use React for interactive parts of the page as necessary (for example the sky color /grass color toggle buttons and values). If you want to use React for the entirety of the page and have the benefits of SPA / client-side-routing etc... check out the "Frontity" project.
Hello. The plugin works fine on wp set to "Local", but on a real wp project it doesn't render anything in the frontend. In the editor, after clicking the publish (view) button for 1-2 seconds, my front content appears at the top of the page, then the page is render and there is a blank in the place where I inserted it (there is not even a div in the elements). Can u help me?
Excellent content as usual. I finished the whole WordPress course last year. Is this a new course or is it an updated version of the Fictional University one?
Hey Brad, I would like to “hear” from you: In your opinion, what’s the benefit, or the great benefit, of use WordPress with React? Could you give some exemples of what we could achieve using React in compare to use WordPress without integrate with React and just use Vanilla JS.?
Whether it's WordPress, or any platform, you can always technically do everything with plain JS and don't need React or Vue or any library. The "Day 1 of the 10 Days of React" video on my channel explains the problem React is solving and why I feel it's useful. Also, since React is the official / WordPress way of creating Gutenberg block types for the edit screen, I feel like it's nice to also use it elsewhere on a WP project, as it's just one less mental / contextual shift.
Brad allow me a request for a premium course. You have already taught us the two methods to render our plugins settings pages on dashboard (using wp api and custom). What about building the settings pages with React + WP block editor components. Main concern is how to update/load options from javascript.Thanks.
Hey Brad, maybe you can make course of building mobile apps with WordPress and React Native or Ionic with cool project like your other courses? 😀I'll buy instantly in udemy and i'm sure there is a demand for that, I found only guys from Pakistan and India teaching this staff in their not very great courses
Hey Brad! Thanks for this amazing tutorial mate. Was looking for something like this since last 4-5 months. But finally got a perfect video. Just want to will it be a single page app? Like in react everything happens in single div. Will this also do the same after importing components. Also, how to edit theme details like theme cover photo, theme name, etc? Thanks😊
Help. Plugin is showing up in the editor but not on the preview for me. It seems like the query selector is not selecting anything? Edit: It seems to be the ob_get_clean(). When returned it shows nothing, but if I echo it, plugin shows outside of theme's boundaries (on top of the whole page, not where I placed the plugin). Still, don't know how to fix.. ?
hi brad, just finished your wordpress course on udemy :) great tutorial and learning. And for this video, i cant open the localhost:3000, do you maybe know what is the problem? thanks a lot, greetings from indonesia here :)
Hey Brad. About the theme version. What would be the boilerplate for embedding the react app in any page using a shortcode that returns the html target tag of ReactDOM.render? I mean what you think is the best solution to enqueue js and css only on this specific page that contains the shortcode/tag?
Is there a reason you want to use shortcodes instead of inserting a Gutenberg block type like in this video / boilerplate? In my boilerplate PHP that outputs the HTML placeholder for the block types to render into, in that same callback you can load the JS / CSS files, so that way you're only loading them if the specific page actually needs them.
@@LearnWebCode I agree Brad that the custon block type is a very flexible solution as you describe it for Gutenberg. But I would like to use your solution in other editors also, like Elementor etc. That's why I turned to the shortcode solution just to be able to easily insert everywhere the HTML placeholder. But I am not sure about the hooks and the enqueue code I have to use, in order to avoid loading the app when no needed.
Hey brad. I just bought your WORDPRESS course on udemy. Right now I'm working as a Web developer. We are using python django, wordpress html css and Javascript. Can i ask if what will I do next? Do i need to to deep dive on php? Or I just need to focus on my current skillsets? Sorry my english is bad :)
Hi, I think it depends on what you're the most interested in. Do you prefer UI / front-end / SPA / design work? Or do you prefer backend? I'd say unless you want to create plugins for WordPress there's not much of a need to deep dive into PHP.
@@LearnWebCode this is my skillset right now. Rate from 1 to 10. 1 lowest and 10 highest. Python (6), Django(6), Javascript(4), React(1),html(7),css(sass)(7).Wordpress(6),PHP(4). Please help. I'm so overwhelmed right now hahaha
Hello! Just bought your Udemy course 😃. One question: where can i find statistics dashboard templates in React to use in a page of my website? Where can i find those? Thanks in advance.
How do you go about creating routes within react and the wordpress theme? Do you use something like react-router-dom? And do you need to do some changes to your .htaccess? Does your Udemy course cover this topic?
Good question. WordPress doesn't have any standard solutions for that at the moment. If I wanted to have client-side routing on hydration and initial server-side rendering for SEO + accessibility I'd probably setup WordPress on a sub or separate domain, and then use Next.js as the React front-end site. You could definitely use React + React Router on a standard WordPress site but the question is server-side rendering for SEO + accessibility. You don't want to have to spell out your UI once in React and once in PHP HTML. There used to be a project named "Frontity" that integrated WordPress with React/JSX, but it was discontinued, but the good news is that now WordPress core is working on something new / related called "The Interactivity API." It will allow for server-side-rendering in a way that could play nicely with client-side rendering/routing as well. I'm looking forward to it developing over the next year or so: make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/
@LearnWebCode If I wanted to add an app react without adding blocks or creating a theme, what advice can you give me? How should I proceed to avoid chaos?
Hi, thanks for great content and course. I also have the course but not at the chapter yet. I really wonder if with this approach react parts of the page are somehow crawler friendly like SSR. Also looks like after development no need for nodejs, like no need for node server on hosting, standard php host like Apache etc. is enough to host the template or plug in, is it right?
I already have your WP course , I decided not to go with PHP as I want to use React. is the Plugin development with react sections are enough? (sections 24, 25). I already know React (need to repractice) I also seen people use React in WP with Frontity, is it recommended? cheers.
Only the knowledge of reactJS is enough for theme development? Because, I don't know php at all. And the boiler plate code is provided by WordPress or you write it by yourself?
Hi Brad, Hi, I have been trying to create a react app inside the theme. I am using @wordpress/scripts. I have been following your course on udemy and also your UA-cam video for this, everything works fine. But got a doubt on how to load the CSS. With normal React App we can load the CSS inside the Component itself but for now with the @wordpress/scripts setup, CSS file is getting generated and we need to enque the style in the traditional way. May be this question is a blender but I hope you understand the doubt.
Hey there, I had an issue when using the block template, the frontend wasn't visible. So to fix that you must add this to your code. : import "./frontend.scss" import React, { useState } from "react" import ReactDOM from "react-dom" // This line window.addEventListener('DOMContentLoaded', () => { const divsToUpdate = document.querySelectorAll(".boilerplate-update-me") divsToUpdate.forEach(div => { const data = JSON.parse(div.querySelector("pre").innerText) ReactDOM.render(, div) div.classList.remove("boilerplate-update-me") }) //This one too }) Hope this will help you 😉
Hey Brad, really really helpful video. I hate working with worpress but your theme made my life easier. I only have one question. I built a React project and I'm trying to implement a video but when I run "npm run build" or "start" the compiler returns the error: ERROR in "video.mp4" Module parse failed: Unexpected character ' ' You may need an appropriate loader to handle this file type I searched online a bit and it seems like a common issue with webpack that has no loaders for video files. I'm not really familiar with webpack and since the folder doesn't come with webpack.config.js I thought I could just add it in with the correct loader. Is it possible?
Thanks for this great video! I wanted to start taking your courses but Udemy increases the prices when I'm about to checkout.... $150 and $200 increase per course! It would be great if you created your own learning platform.
Hi ,Iim a fashion designer in England . I have just bought your wordpress course on udemy . I have a problem with my own website which is an e-commerce wordpress website.. I'm launching my new instructional courses but have some problems .. Can you help me with pointers or guide ? Thanks Look forward to hearing from you soon.
Hello! Thanks for this great tutorial! I'm working on a block theme and I'm struggling to get React to work in the frontend: your plugin is usable in the gutenberg editor but invisible on the website
Confusing. When I open the block plugin example, there's no hint of where the index.php came from - do I have to write this myself, or is there a generation script somewhere?
As far as I understand, yes, Frontity is not actively developed any longer, however, closely related, is the new "Interactivity API" that is still in the early stages in WordPress core. It's super exciting stuff, because it's finally addressing the shortcomings with blocks that I've pointed out several times over the last 3-5 years (namely dynamic instead of static blocks, the importance of server-side rendering, and how to run client-side JS on the front-end for your blocks).
Just like how WordPress offers the PHP function called __() where you provide your text value and text_domain, WordPress also offers a __() function for JS. Then once those are in place, I'm a big fan of the "Loco Translate" plugin for generating the translation templates, etc... In my full WordPress Dev course on Udemy we make one of the plugins we develop fully translatable using that process.
I have a very serious question. I'm tired of searching for my query. How to add the "add to cart" button to a custom page in woo commerce through coding not using plugins. Kindly help me I'm stuck there.
I dont know what the problem is but it was working till today. when i call npm run preview, it is giving me ssl error. I tried adding --proxy, --https, --ssl type of commands but no luck
ISSUE: brads-boilerplate-theme displays the blue header box as soon as I activate the theme and after running npm install but; as soon as I run: npm run start, the blue header content disappears. Was on WP 5.9 so I spun up a local dev on WP 5.7 but has the same issue. Any thoughts?
Same thing with brads-boilerplate-block-plugin. Works after activation, after npm install, but breaks after npm run start. Editor says "Your site doesn’t include support for the “makeupnamespace/make-up-name” block"
I just updated the GitHub repo so that both the theme and the plugin folders have updated package.json files. I believe the version of the official WordPress package was old enough that it was causing the build process to just fail altogether; when I tested the repo a few minutes ago mine wasn't working either. But with the updated files now it works perfectly.
I see that this command is deleting all the files from the build folder.
@@LearnWebCode yes, I downloaded it again and now it is working perfectly (with WP 5.9.3) so I can complete the tutorial. Thanks Brad!
Man, you really knows how to teach AND you ALWAYS come with something cool. Even if is a subjects that others explain, or try to explain, your content is ALWAYS different AND better!!!!! Thank you very much!!!
I thought I recognized your voice…! I just finished your Git a Web Dev Job course on Udemy, and came here to look up how to put WordPress and React together, and here you are again! You’re an awesome teacher, Brad. Thanks so much for taking the time to educate 🙏
You are my favourite from all other tutorial videos. you literally explain every nooks and crannies. subscribed !!!
Taking the course WP developer now. Got the html /css, JS, and Git shortly after starting to accompany it. You're super at walking through a whole project and breaking down the high and low levels in a way that easy to process. 😎
If i had to choose one course from all courses i took on udemy i definitely has prefer the brad wordpress course
I bought that course too and I assure you you won't regret. Brad is a great tutor and is a pretty good start to become a Wordpress developer
My Favorite Teacher!
I audibly gasped on how easy this is
Hey Brad :)
I just wanted to thank you for the amazing video. It was super helpful, as expected.
When I saw your video in the search results, it reminded me of studying WordPress around 6 years ago through your videos and how helpful they were for me back then.
I just wanted to say thanks and wish you a good day :)
Interesting, I've been looking into doing something like this for a client. It is more for me as I prefer to work with React than with WordPress.
The approach in this video is still pretty "WordPressy" - if you really prefer to work with React more than WordPress I think the Frontity project looks perfect! The only downside is that you need Node.js web hosting instead of just the traditional super affordable PHP / LAMP hosting. EDIT: Apparently you can use the free Vercel service to host the Node.js endpoints; the official Frontity documentation has a deployment guide too.
Really enjoyed your WP dev course on Udemy! I've been looking for headless WP tutorials. Thank you for making this one!
thanks so much for this tutorial! I wanted to dig into the WordPressy way of using react for a while now and this opens up a whole new world of possibilities for extending WordPress 😁 I feel like I found a whole new playground to play with
And I bought your course on the same day 👍 looking forward on digging deeper into it
I just purchased your premium WordPress course. Thank you for being so awesome! ...and kewl cat!!
Best guide on the subject so far. Thank you.
Hi Brad - I own all your premium courses. Thank you so much for the wonderful work that you do. This was really great information. Wish you all the best.
You really know your way on how to teach! Thanks a lot for the free content. Just bought your react courses to go deeper on the subject. Do you have any more courses on React dev within Wordpress ? Like custom post type, theme... would be great.
Learning a lot from udemy...your videos are simple and crispy....hopefully i can share my own personalized website to you....finger crossed
Have you done The Udemy Wordpress course (smth like Unlocking Power With Code")?
Once again thank you for the great tutorial brad.
Intriguing work, man! Thank you.
btw, if someone can't run 'sync' command, try remove quotes from url, that helped me.
Awesome! Dude this is soooo helpful.
Again a masterpiece ❤❤❤
Your cat *knew* that Professor Barksalot was highlighted in this video. They don't like each other, so cat proceeded to destroy the blinds
😂 😂 Accurate
I love it! You are definitely "Dr. Knowsalot"!!! :)
Hi Brad, Thank you for the tutorial. You're an excellent teacher. You mentioned about some discount to the course but I didn't see a coupon. ;)
Brilliant... and useful, it would be great to put a mini project for us to build an example.... thank Brad
My Favorite Teacher 😍😍😍😍😍😍😍😍.
i would love if you could make a video on how to bundle a nodejs module built with typescript that can be used in node (commonjs), es6 import, and in the browser.
what a great tutorial, Thank you!!!
Hi Brad,
What an amazing video! Although I only knew very little about React, I still learned a lot from this video. However, some of these things were a bit confusing for me. I think I will gather more information about React, and then I will rewatch your video to understand it better. Anyways, it was a great watch, and thanks a lot for sharing this amazing resource with the viewers. Looking forward to watching more helpful videos from you!
that is a very cool with mixing between react and wordpress
Excelent! You are good teacher, very clear! Congrats
That's awesome! Thank you so much for sharing your knowledge! 🙌🎉
Awesome tutorial as always!!!
I would love to see how to build the pages out with content now.
All I am seeing is pages I create with a clickable Title on the top and zero content showing up.
I really like this idea, but some more info like how to build out the Header, Footer, and Navigation would be very helpful.
Nice tutorial but i think you miss the most important part in the theme, how to integrate the loop of wordpress, or it just works with php and you have to use the api of wordpress with this setup? thanks
Good point! For SEO / accessibility reasons I like to have most of the standard content (paragraphs, headings etc...) output server-side, and only use React for interactive parts of the page as necessary (for example the sky color /grass color toggle buttons and values). If you want to use React for the entirety of the page and have the benefits of SPA / client-side-routing etc... check out the "Frontity" project.
It's awesome ! thank you very much brad for this video , can you pointing as to some docs to learn more , it's help a lot ! Thank you for All :)
I loved this tut... I have a request, can you please do a Headless WordPress with GraphQL ACF and React v19 or NextJs v14
Thanks a lot !!!!! i learn more from you and i think i will learn more ;)
Verry nice, good and clean job! Can you please tell if you have any tutorial how to make custom widget which user can put into sidebar for example?
Hello. The plugin works fine on wp set to "Local", but on a real wp project it doesn't render anything in the frontend. In the editor, after clicking the publish (view) button for 1-2 seconds, my front content appears at the top of the page, then the page is render and there is a blank in the place where I inserted it (there is not even a div in the elements). Can u help me?
Excellent content as usual. I finished the whole WordPress course last year. Is this a new course or is it an updated version of the Fictional University one?
Thanks! A month or two ago I added an entirely new 10 hour chapter about "Plugin Development" to the existing Fictional University course.
Nice guide!
Awesome content! What I need to run the plugin in another theme?
I can see that it works well with other themes, but is not working the frontend part in twentytwentytwo.
@@panamatsu5958 I have the same issue as you! Were you able to find a solution?
Hey Brad, I would like to “hear” from you: In your opinion, what’s the benefit, or the great benefit, of use WordPress with React? Could you give some exemples of what we could achieve using React in compare to use WordPress without integrate with React and just use Vanilla JS.?
Whether it's WordPress, or any platform, you can always technically do everything with plain JS and don't need React or Vue or any library. The "Day 1 of the 10 Days of React" video on my channel explains the problem React is solving and why I feel it's useful. Also, since React is the official / WordPress way of creating Gutenberg block types for the edit screen, I feel like it's nice to also use it elsewhere on a WP project, as it's just one less mental / contextual shift.
@@LearnWebCode Understood. Thank you very much for answer me, Brad.
Searched for react came for the cat 😍
i have a question do i can use this theme Boilerplate to create full wordpress react theme???
Brad allow me a request for a premium course. You have already taught us the two methods to render our plugins settings pages on dashboard (using wp api and custom). What about building the settings pages with React + WP block editor components. Main concern is how to update/load options from javascript.Thanks.
Hey Brad, maybe you can make course of building mobile apps with WordPress and React Native or Ionic with cool project like your other courses? 😀I'll buy instantly in udemy and i'm sure there is a demand for that, I found only guys from Pakistan and India teaching this staff in their not very great courses
Liking the crap out of this for the great intro with the cat haha
Great tutorial! 😀
Can you give me a series teaching how to create a plugin by using react js for wordpress, please ?
Sir can you make videos not on programming but on how these website example wesite are works what they are using
Thanks for the nice content.
quick question, does the plugin only works on the blog post, not pages?
thanks in advance.
Such a good video thank you!
really cool! can I have custom react gutenberg blocks inside the theme version instead of the plugin? I missed that part.
Hi, please do more react and react native course , please
is the new course going publish soon?? so excited
Niceee This is awesome! Thank you!
Hey Brad! Thanks for this amazing tutorial mate. Was looking for something like this since last 4-5 months. But finally got a perfect video. Just want to will it be a single page app? Like in react everything happens in single div. Will this also do the same after importing components. Also, how to edit theme details like theme cover photo, theme name, etc?
Thanks😊
I'm curious about styled components on WordPress.
Help. Plugin is showing up in the editor but not on the preview for me. It seems like the query selector is not selecting anything?
Edit: It seems to be the ob_get_clean(). When returned it shows nothing, but if I echo it, plugin shows outside of theme's boundaries (on top of the whole page, not where I placed the plugin). Still, don't know how to fix.. ?
Pretty awesome! Thanks.
hi brad, just finished your wordpress course on udemy :) great tutorial and learning. And for this video, i cant open the localhost:3000, do you maybe know what is the problem? thanks a lot, greetings from indonesia here :)
Hey Brad. About the theme version. What would be the boilerplate for embedding the react app in any page using a shortcode that returns the html target tag of ReactDOM.render? I mean what you think is the best solution to enqueue js and css only on this specific page that contains the shortcode/tag?
Is there a reason you want to use shortcodes instead of inserting a Gutenberg block type like in this video / boilerplate? In my boilerplate PHP that outputs the HTML placeholder for the block types to render into, in that same callback you can load the JS / CSS files, so that way you're only loading them if the specific page actually needs them.
@@LearnWebCode I agree Brad that the custon block type is a very flexible solution as you describe it for Gutenberg. But I would like to use your solution in other editors also, like Elementor etc. That's why I turned to the shortcode solution just to be able to easily insert everywhere the HTML placeholder. But I am not sure about the hooks and the enqueue code I have to use, in order to avoid loading the app when no needed.
Thanks for your video. How can I push build folder to cloud wordpress host
If I add the BoilerPlate blog & preview the site it doesn't show anything on the page. Any help will greatly be appreciated.
Hey brad. I just bought your WORDPRESS course on udemy. Right now I'm working as a Web developer. We are using python django, wordpress html css and Javascript. Can i ask if what will I do next? Do i need to to deep dive on php? Or I just need to focus on my current skillsets? Sorry my english is bad :)
Hi, I think it depends on what you're the most interested in. Do you prefer UI / front-end / SPA / design work? Or do you prefer backend? I'd say unless you want to create plugins for WordPress there's not much of a need to deep dive into PHP.
@@LearnWebCode this is my skillset right now. Rate from 1 to 10. 1 lowest and 10 highest. Python (6), Django(6), Javascript(4), React(1),html(7),css(sass)(7).Wordpress(6),PHP(4). Please help. I'm so overwhelmed right now hahaha
great stuff
Very enriching -- can you make a whole web like an ecommerce app using this stack from scratch ?
Hello! Just bought your Udemy course 😃. One question: where can i find statistics dashboard templates in React to use in a page of my website? Where can i find those? Thanks in advance.
Great video! Looking for your premium course in Udemy!!!
How do you go about creating routes within react and the wordpress theme? Do you use something like react-router-dom? And do you need to do some changes to your .htaccess? Does your Udemy course cover this topic?
Good question. WordPress doesn't have any standard solutions for that at the moment. If I wanted to have client-side routing on hydration and initial server-side rendering for SEO + accessibility I'd probably setup WordPress on a sub or separate domain, and then use Next.js as the React front-end site. You could definitely use React + React Router on a standard WordPress site but the question is server-side rendering for SEO + accessibility. You don't want to have to spell out your UI once in React and once in PHP HTML. There used to be a project named "Frontity" that integrated WordPress with React/JSX, but it was discontinued, but the good news is that now WordPress core is working on something new / related called "The Interactivity API." It will allow for server-side-rendering in a way that could play nicely with client-side rendering/routing as well. I'm looking forward to it developing over the next year or so: make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/
Hello Brad, is this part of the WordPress course at Udemy?
@LearnWebCode If I wanted to add an app react without adding blocks or creating a theme, what advice can you give me? How should I proceed to avoid chaos?
Hi, thanks for great content and course. I also have the course but not at the chapter yet. I really wonder if with this approach react parts of the page are somehow crawler friendly like SSR. Also looks like after development no need for nodejs, like no need for node server on hosting, standard php host like Apache etc. is enough to host the template or plug in, is it right?
I already have your WP course , I decided not to go with PHP as I want to use React. is the Plugin development with react sections are enough? (sections 24, 25). I already know React (need to repractice) I also seen people use React in WP with Frontity, is it recommended? cheers.
Only the knowledge of reactJS is enough for theme development?
Because, I don't know php at all.
And the boiler plate code is provided by WordPress or you write it by yourself?
Hi Brad, Hi, I have been trying to create a react app inside the theme. I am using @wordpress/scripts. I have been following your course on udemy and also your UA-cam video for this, everything works fine. But got a doubt on how to load the CSS. With normal React App we can load the CSS inside the Component itself but for now with the @wordpress/scripts setup, CSS file is getting generated and we need to enque the style in the traditional way. May be this question is a blender but I hope you understand the doubt.
Hey there, I had an issue when using the block template, the frontend wasn't visible. So to fix that you must add this to your code. :
import "./frontend.scss"
import React, { useState } from "react"
import ReactDOM from "react-dom"
// This line window.addEventListener('DOMContentLoaded', () => {
const divsToUpdate = document.querySelectorAll(".boilerplate-update-me")
divsToUpdate.forEach(div => {
const data = JSON.parse(div.querySelector("pre").innerText)
ReactDOM.render(, div)
div.classList.remove("boilerplate-update-me")
})
//This one too })
Hope this will help you 😉
Hey Brad, really really helpful video. I hate working with worpress but your theme made my life easier. I only have one question. I built a React project and I'm trying to implement a video but when I run "npm run build" or "start" the compiler returns the error:
ERROR in "video.mp4"
Module parse failed: Unexpected character ' '
You may need an appropriate loader to handle this file type
I searched online a bit and it seems like a common issue with webpack that has no loaders for video files. I'm not really familiar with webpack and since the folder doesn't come with webpack.config.js I thought I could just add it in with the correct loader. Is it possible?
Thanks for this great video! I wanted to start taking your courses but Udemy increases the prices when I'm about to checkout.... $150 and $200 increase per course! It would be great if you created your own learning platform.
can we create a complete react app in plugin as well ? as we have created in theme ? I am talking about Code Structure which react follows
Hi ,Iim a fashion designer in England .
I have just bought your wordpress course on udemy .
I have a problem with my own website which is an e-commerce wordpress website..
I'm launching my new instructional courses but have some problems ..
Can you help me with pointers or guide ?
Thanks
Look forward to hearing from you soon.
Nice content sir
man you were 40 something 2 years, how do you become 20 something?
What is the core web vitals score for a WordPress website with react? Are the website fast enough than normal WordPress websites?
There are 4 folders in there now.
There is 2 new folders in there for 'Tailwind' now.
Is there much of a difference in them?
Hi nice tutorial
Can you please more enhance it with real wordpress data like pages and menu
Hello! Thanks for this great tutorial! I'm working on a block theme and I'm struggling to get React to work in the frontend: your plugin is usable in the gutenberg editor but invisible on the website
Hey, did you manage to find the fix for this issue?
@@thomasleclech2917 thanks mate!
Confusing. When I open the block plugin example, there's no hint of where the index.php came from - do I have to write this myself, or is there a generation script somewhere?
I had this issue on my end that the plugin & theme does not update on the backend, but updates just fine on the published page (incognito). weird
How does this approach differ from Frontity?
Which is the best approach?
Is it true that Frontity is no more supported and developed?
As far as I understand, yes, Frontity is not actively developed any longer, however, closely related, is the new "Interactivity API" that is still in the early stages in WordPress core. It's super exciting stuff, because it's finally addressing the shortcomings with blocks that I've pointed out several times over the last 3-5 years (namely dynamic instead of static blocks, the importance of server-side rendering, and how to run client-side JS on the front-end for your blocks).
Brad, Will this new method be added to the Udemy course?
Hey, Brad! How can I activate block editor? Not theme editor. Thanks
I tried the plugin but the front end part is not showing at all while the back end works.
Thank you for the video! I have a question...how would you go about localizing the hardcoded strings in the theme so that they can be translated?
Just like how WordPress offers the PHP function called __() where you provide your text value and text_domain, WordPress also offers a __() function for JS. Then once those are in place, I'm a big fan of the "Loco Translate" plugin for generating the translation templates, etc... In my full WordPress Dev course on Udemy we make one of the plugins we develop fully translatable using that process.
I have a very serious question. I'm tired of searching for my query. How to add the "add to cart" button to a custom page in woo commerce through coding not using plugins. Kindly help me I'm stuck there.
Keep it up 👍
I dont know what the problem is but it was working till today. when i call npm run preview, it is giving me ssl error. I tried adding --proxy, --https, --ssl type of commands but no luck
please show me any way how can i use this in wordpress >>> grid-template-areas:
'nav nav'
'hero hero';