React In WordPress Boilerplate (Both Gutenberg Block Types & Front-End)
Vložit
- čas přidán 30. 07. 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
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!!!
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 🙏
You are my favourite from all other tutorial videos. you literally explain every nooks and crannies. subscribed !!!
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 :)
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!
Once again thank you for the great tutorial brad.
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.
Brilliant... and useful, it would be great to put a mini project for us to build an example.... thank Brad
My Favorite Teacher!
That's awesome! Thank you so much for sharing your knowledge! 🙌🎉
Really enjoyed your WP dev course on Udemy! I've been looking for headless WP tutorials. Thank you for making this one!
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.
Again a masterpiece ❤❤❤
Excelent! You are good teacher, very clear! Congrats
what a great tutorial, Thank you!!!
Awesome! Dude this is soooo helpful.
Waw it's clear and simple! Well explained done, I will go to Udemy to check further.
Awesome tutorial as always!!!
I love it! You are definitely "Dr. Knowsalot"!!! :)
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 :)
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. 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?
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
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?
Niceee This is awesome! Thank you!
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")?
Great tutorial! 😀
Such a good video thank you!
My Favorite Teacher 😍😍😍😍😍😍😍😍.
@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?
Pretty awesome! Thanks.
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?
that is a very cool with mixing between react and wordpress
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. ;)
Thanks a lot !!!!! i learn more from you and i think i will learn more ;)
Nice guide!
If I add the BoilerPlate blog & preview the site it doesn't show anything on the page. Any help will greatly be appreciated.
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.
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.
Thanks for your video. How can I push build folder to cloud wordpress host
What is the core web vitals score for a WordPress website with react? Are the website fast enough than normal WordPress websites?
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
Thanks for the nice content.
quick question, does the plugin only works on the blog post, not pages?
thanks in advance.
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
Nice content sir
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.. ?
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?
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
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 CZcams 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 have a question do i can use this theme Boilerplate to create full wordpress react theme???
great stuff
Keep it up 👍
Very enriching -- can you make a whole web like an ecommerce app using this stack from scratch ?
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?
please show me any way how can i use this in wordpress >>> grid-template-areas:
'nav nav'
'hero hero';
Intriguing work, man! Thank you.
btw, if someone can't run 'sync' command, try remove quotes from url, that helped me.
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.
Hey, Brad! How can I activate block editor? Not theme editor. Thanks
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
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?
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.
really cool! can I have custom react gutenberg blocks inside the theme version instead of the plugin? I missed that part.
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?
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.
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.
Is it possible to do that with other frameworks such as Vue, Svelte, etc?
I audibly gasped on how easy this is
react part of it, does is act like normal react project can i use tailwind and typescript
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.
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?
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?
Hi, I have question for your Udemy WordPress course, where can I get your reply?
is the new course going publish soon?? so excited
I tried the plugin but the front end part is not showing at all while the back end works.
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.
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/
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.
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
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 :)
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.
Brad, Will this new method be added to the Udemy course?
Searched for react came for the cat 😍
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!
Could you help me with my website. I have basic experience with css and html.
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 Brad, is this part of the WordPress course at Udemy?
Hello, How can I use it as short code? Im using Divi Theme and I need to embed the short code.
did you find any solution Vn Aleixo ?
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, 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
What is the use of this when we cant edit background colour in wordpress we can do it react itself
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?
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?
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.