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. 😎
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.
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
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.
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!
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?
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, 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 RU-vid 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 😉
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.
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 :)
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.
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?
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?
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
@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?
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 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
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?
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?
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).
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, awesome video. Sorry when i run npm run start y receive this error. node:internal/modules/cjs/loader:936 throw err; ^ Error: Cannot find module './util/resolveCommand' Do you know how I can solve it?
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😊
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/
Hey Brad! Thanks for the awesome tutorial! I was trying your boilerplate theme without tailwind but it seems that the react build that is build with npm run preview or npm start is a production build and not a development build. When I console log process.env.NODE_ENV it logs development. I followed the readme for installation on a mac and a desktop and the same issue came up on both. Is there any way to change the build type to development? It makes error handeling in react a lot easier.
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.
The preview auto reload does not work for me. The window opens on running npm run preview, I see a message that it is synced, no error messages anywhere but will not reload on changes.
So the localhost:3000 successfully shows your WordPress site? You mentioned no error message, is that *both* the browser console *and* the command-line where the task is running?
@@LearnWebCode correct. The terminal also shows the code compiling on save so I'm really scratching my head. One thing that is different to the video, although I can't imagine how it is relevant, the url cannot be in quotes or it breaks
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
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.
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
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.
