React In WordPress Boilerplate (Both Gutenberg Block Types & Front-End)

Рет қаралды 93,498

Күн бұрын

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

Пікірлер: 170

@EricThomson 2 жыл бұрын

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?

@EricThomson 2 жыл бұрын

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"

@LearnWebCode 2 жыл бұрын

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.

@EricThomson 2 жыл бұрын

I see that this command is deleting all the files from the build folder.

@EricThomson 2 жыл бұрын

@@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!

@fvgoya 3 жыл бұрын

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!!!

@ChristopherZ11 3 жыл бұрын

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. 😎

@EdwardZaii 3 жыл бұрын

You are my favourite from all other tutorial videos. you literally explain every nooks and crannies. subscribed !!!

@devinegger4570 Жыл бұрын

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 🙏

@TJKhara 2 жыл бұрын

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.

@dominikliss 2 жыл бұрын

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

@TutTravelsVlogs Жыл бұрын

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 :)

@johnravi3887 2 жыл бұрын

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!

@slimmsherpa9771 Жыл бұрын

Best guide on the subject so far. Thank you.

@abdulsamad.official 3 жыл бұрын

Once again thank you for the great tutorial brad.

@nicolebeck1075 Жыл бұрын

I just purchased your premium WordPress course. Thank you for being so awesome! ...and kewl cat!!

@lionelgibaudan3592 3 жыл бұрын

Brilliant... and useful, it would be great to put a mini project for us to build an example.... thank Brad

@jahid3747 3 жыл бұрын

My Favorite Teacher!

@quentinober3175 Жыл бұрын

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.

@artneo7 2 жыл бұрын

That's awesome! Thank you so much for sharing your knowledge! 🙌🎉

@sushispicelatte 8 ай бұрын

Really enjoyed your WP dev course on Udemy! I've been looking for headless WP tutorials. Thank you for making this one!

@alejandronarmona3121 2 жыл бұрын

Excelent! You are good teacher, very clear! Congrats

@6_clicks 2 жыл бұрын

Waw it's clear and simple! Well explained done, I will go to Udemy to check further.

@DannyM255 2 жыл бұрын

what a great tutorial, Thank you!!!

@KnownTechnical 3 жыл бұрын

Again a masterpiece ❤❤❤

@mahdisoultana4926 3 жыл бұрын

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 :)

@rework7562 Жыл бұрын

I love it! You are definitely "Dr. Knowsalot"!!! :)

@cholo2605 4 ай бұрын

Awesome tutorial as always!!!

@rememberkismat 3 жыл бұрын

Learning a lot from udemy...your videos are simple and crispy....hopefully i can share my own personalized website to you....finger crossed

@BMikel 3 жыл бұрын

Have you done The Udemy Wordpress course (smth like Unlocking Power With Code")?

@victorkimura1 Жыл бұрын

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. ;)

@unjoined 3 жыл бұрын

Niceee This is awesome! Thank you!

@MaxOnTech 2 ай бұрын

Awesome! Dude this is soooo helpful.

@codaciencia Жыл бұрын

Great tutorial! 😀

@trongnhanle7658 2 жыл бұрын

that is a very cool with mixing between react and wordpress

@innovativeideas442 3 жыл бұрын

My Favorite Teacher 😍😍😍😍😍😍😍😍.

@JoshuaRieth 3 жыл бұрын

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.

@LearnWebCode 3 жыл бұрын

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.

@WellMetMunro 4 ай бұрын

Nice guide!

@tiamcquaid5606 2 жыл бұрын

Such a good video thank you!

@mounir101 3 жыл бұрын

Pretty awesome! Thanks.

@user-mo3cw6go7c 3 жыл бұрын

If i had to choose one course from all courses i took on udemy i definitely has prefer the brad wordpress course

@nicolastovar792 2 жыл бұрын

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

@Gemeinzam Жыл бұрын

Thanks a lot !!!!! i learn more from you and i think i will learn more ;)

@piotrszymanski8325 2 жыл бұрын

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?

@victory_lucky 3 жыл бұрын

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.

@thehkmalhotra9714 Жыл бұрын

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😊

@ekkihugsa9769 Ай бұрын

I audibly gasped on how easy this is

@AyushPanditofficial 3 жыл бұрын

Nice content sir

@vahidsediqi5638 3 жыл бұрын

Keep it up 👍

@ajayadav09 Жыл бұрын

great stuff

@Erxme 18 күн бұрын

Intriguing work, man! Thank you. btw, if someone can't run 'sync' command, try remove quotes from url, that helped me.

@maantjemol Жыл бұрын

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.

@calvinchou7186 2 жыл бұрын

Thanks for the nice content. quick question, does the plugin only works on the blog post, not pages? thanks in advance.

@sonphamngoc8281 2 жыл бұрын

Thanks for your video. How can I push build folder to cloud wordpress host

@nicolastovar792 2 жыл бұрын

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?

@ilkerbalc3956 Жыл бұрын

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?

@kingnsengiyunva614 3 жыл бұрын

Very enriching -- can you make a whole web like an ecommerce app using this stack from scratch ?

@edoardododoguzzi 2 жыл бұрын

@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?

@yauhenipliuta4351 2 жыл бұрын

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?

@emmanouil1453 3 жыл бұрын

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.

@No1mrnoobplayer 3 жыл бұрын

is the new course going publish soon?? so excited

@puturro Жыл бұрын

really cool! can I have custom react gutenberg blocks inside the theme version instead of the plugin? I missed that part.

@ashkanahmadi 3 жыл бұрын

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?

@LearnWebCode 3 жыл бұрын

Thanks! A month or two ago I added an entirely new 10 hour chapter about "Plugin Development" to the existing Fictional University course.

@mfwmusuc 2 жыл бұрын

What is the core web vitals score for a WordPress website with react? Are the website fast enough than normal WordPress websites?

@tikroute 2 жыл бұрын

Searched for react came for the cat 😍

@samuelwilliams7079 2 жыл бұрын

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?

@LearnWebCode 2 жыл бұрын

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.

@fvgoya 3 жыл бұрын

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.?

@LearnWebCode 3 жыл бұрын

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.

@fvgoya 3 жыл бұрын

@@LearnWebCode Understood. Thank you very much for answer me, Brad.

@farhadnazmi7477 3 жыл бұрын

Hi, please do more react and react native course , please

@captainunknown2839 2 жыл бұрын

If I add the BoilerPlate blog & preview the site it doesn't show anything on the page. Any help will greatly be appreciated.

@wandersonsilva2262 Жыл бұрын

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.

@simonemassaro3875 10 ай бұрын

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?

@user-ds1iz8fz8p 9 ай бұрын

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

@suchandrachattopadhyay8981 3 жыл бұрын

Great video! Looking for your premium course in Udemy!!!

@mistersz 2 жыл бұрын

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

@vishvajitkumar9497 2 жыл бұрын

i have a question do i can use this theme Boilerplate to create full wordpress react theme???

@extremelyangryman2583 4 ай бұрын

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

@arhabersham Жыл бұрын

Your cat *knew* that Professor Barksalot was highlighted in this video. They don't like each other, so cat proceeded to destroy the blinds

@LearnWebCode Жыл бұрын

😂 😂 Accurate

@salihk5235 5 ай бұрын

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 KZfaq 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.

@servalpunk7411 Жыл бұрын

I'm curious about styled components on WordPress.

@kevinebenhezer8912 6 ай бұрын

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 :)

@emmanouil1453 3 жыл бұрын

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?

@LearnWebCode 3 жыл бұрын

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.

@emmanouil1453 3 жыл бұрын

@@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.

@trongnhanle7658 2 жыл бұрын

Can you give me a series teaching how to create a plugin by using react js for wordpress, please ?

@xromium Жыл бұрын

Hey, Brad! How can I activate block editor? Not theme editor. Thanks

@a99986 9 ай бұрын

please show me any way how can i use this in wordpress >>> grid-template-areas: 'nav nav' 'hero hero';

@EricThomson 2 жыл бұрын

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?

@matthew_brown Жыл бұрын

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?

@matthew_brown Жыл бұрын

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.

@jsantos1220 3 жыл бұрын

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

@LearnWebCode 3 жыл бұрын

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.

@thomasleclech2917 Жыл бұрын

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

@desactivamos Жыл бұрын

Hey, did you manage to find the fix for this issue?

@desactivamos Жыл бұрын

@@thomasleclech2917 thanks mate!

@unpelagato Жыл бұрын

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.. ?

@Rkdo_Dev 4 ай бұрын

react part of it, does is act like normal react project can i use tailwind and typescript

@ZiPMo85 2 жыл бұрын

Brad, Will this new method be added to the Udemy course?

@ombratth Жыл бұрын

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?

@LearnWebCode Жыл бұрын

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/

@amitrangwal7177 10 ай бұрын

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

@yukoh326 2 жыл бұрын

Hi, I have question for your Udemy WordPress course, where can I get your reply?

@Noritoshi-r8m 5 ай бұрын

Is it possible to do that with other frameworks such as Vue, Svelte, etc?

@mohamedyamani8502 Жыл бұрын

Liking the crap out of this for the great intro with the cat haha

@diyarpolat1099 Жыл бұрын

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

@luckyWabbit75 Жыл бұрын

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?

@jojoremeny 3 жыл бұрын

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.

@milenfrom 2 жыл бұрын

Hello Brad, is this part of the WordPress course at Udemy?

@attaullahkhan7032 2 жыл бұрын

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.

@panamatsu5958 2 жыл бұрын

Awesome content! What I need to run the plugin in another theme?

@panamatsu5958 2 жыл бұрын

I can see that it works well with other themes, but is not working the frontend part in twentytwentytwo.

@Ed-tt5kd 11 ай бұрын

@@panamatsu5958 I have the same issue as you! Were you able to find a solution?

@magikarp2063 4 ай бұрын

I tried the plugin but the front end part is not showing at all while the back end works.

@proteus1 2 жыл бұрын

Could you help me with my website. I have basic experience with css and html.

@patitorodri Жыл бұрын

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?