React In WordPress Boilerplate (Both Gutenberg Block Types & Front-End)
ฝัง
- เผยแพร่เมื่อ 20 ก.ค. 2024
- Join my full WordPress course learnwebcode.teachable.com/p/...
The GitHub repo from this video github.com/LearnWebCode/brads...
0:00 Intro
0:53 Official WordPress Package
6:47 Boilerplate Theme
13:21 Boilerplate Plugin
15:36 Complex Blocks
18:22 Plugin File Structure
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode
![ไหล่อ่อน (Soft Shoulder) - Atom ชนกันต์ [OFFICIAL MV]](http://i.ytimg.com/vi/HUWl53msBQY/mqdefault.jpg)
![[LIVE] : ONE ลุมพินี 71 วันนี้!! คู่เอก "ทรงชัยน้อย vs รักษ์"](http://i.ytimg.com/vi/_AGPnq2p6Js/mqdefault.jpg)
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!!!
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. 😎
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 🙏
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.
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
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 :)
I just purchased your premium WordPress course. Thank you for being so awesome! ...and kewl cat!!
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!
Best guide on the subject so far. Thank you.
Once again thank you for the great tutorial brad.
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.
Brilliant... and useful, it would be great to put a mini project for us to build an example.... thank Brad
My Favorite Teacher!
Really enjoyed your WP dev course on Udemy! I've been looking for headless WP tutorials. Thank you for making this one!
That's awesome! Thank you so much for sharing your knowledge! 🙌🎉
Excelent! You are good teacher, very clear! Congrats
Waw it's clear and simple! Well explained done, I will go to Udemy to check further.
I love it! You are definitely "Dr. Knowsalot"!!! :)
I audibly gasped on how easy this is
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 :)
what a great tutorial, Thank you!!!
Again a masterpiece ❤❤❤
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")?
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. ;)
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
Awesome tutorial as always!!!
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.
that is a very cool with mixing between react and wordpress
Intriguing work, man! Thank you.
btw, if someone can't run 'sync' command, try remove quotes from url, that helped me.
Niceee This is awesome! Thank you!
My Favorite Teacher 😍😍😍😍😍😍😍😍.
Thanks a lot !!!!! i learn more from you and i think i will learn more ;)
Great tutorial! 😀
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?
Awesome! Dude this is soooo helpful.
Pretty awesome! Thanks.
Such a good video thank you!
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.
Nice guide!
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😊
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.
great stuff
Keep it up 👍
Nice content sir
Thanks for the nice content.
quick question, does the plugin only works on the blog post, not pages?
thanks in advance.
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?
Very enriching -- can you make a whole web like an ecommerce app using this stack from scratch ?
really cool! can I have custom react gutenberg blocks inside the theme version instead of the plugin? I missed that part.
@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?
Thanks for your video. How can I push build folder to cloud wordpress host
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
is the new course going publish soon?? so excited
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.
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.
Hi Brad, I have a question. With this package is it possible to create an app with React and Firebase as a additional service in a web site?
Searched for react came for the cat 😍
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, 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.
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?
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.
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.. ?
What is the core web vitals score for a WordPress website with react? Are the website fast enough than normal WordPress websites?
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.
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.
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.
Liking the crap out of this for the great intro with the cat haha
i have a question do i can use this theme Boilerplate to create full wordpress react theme???
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
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.
If I add the BoilerPlate blog & preview the site it doesn't show anything on the page. Any help will greatly be appreciated.
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!
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 TH-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.
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
Great video! Looking for your premium course in Udemy!!!
Hi, please do more react and react native course , please
Step 12:20 to edit sync command to use my local domain in package.json, does not work with Local By Flywheel. Anyone else have this issue?
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?
Can you give me a series teaching how to create a plugin by using react js for wordpress, please ?
I'm curious about styled components on WordPress.
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 :)
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/
please show me any way how can i use this in wordpress >>> grid-template-areas:
'nav nav'
'hero hero';
Good
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
Hey, Brad! How can I activate block editor? Not theme editor. Thanks
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.
Hey, Brad! Awesome resource. Thank you for the effort you put into these videos. Hatsoff!
I wanted to subscribe to your Udemy "Become a WordPress Developer: Unlocking Power With Code" course and wanted to know if you have any coupon to share that's active right now?
Thanks again. :)
Sir can you make videos not on programming but on how these website example wesite are works what they are using
Oh.. Cool. 😁
@@suhailxeaser Yeah 😂
Is it possible to do that with other frameworks such as Vue, Svelte, etc?
my wordpress runs at localhost:80 port but when i use npm run preview it loads up at localhost:3000 port. Is there a way I can change this
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 😉
react part of it, does is act like normal react project can i use tailwind and typescript
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?
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 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. 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