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

hey welcome back this video is for you if you know a little bit about react js you understand maybe what it is what it's used for but you're not sure how to integrate it with wordpress because there's a lot of great tutorials out there about how to use react on the editor screen right for creating a gutenberg block type but there doesn't really seem to be an official wordpress way of using react on the front end once again my cat is destroying my blinds so in this video i'm going to show you the official wordpress package from npm and how with basically zero configuration we can get it up and running and we can use react both for the editor screen and our public front-facing website and we're going to set this up for both a theme and a plug-in now that my blinds are thoroughly destroyed let's jump into the action for this video okay now before we worry about wordpress i just want to show you in an empty folder that is not in any way connected to a wordpress installation i want to show you how this package works i want you to see how simple it is how it requires basically zero configuration and then after this i'll show you how we could connect it to wordpress okay so i'm in a new totally empty folder and i would just run npm init dash y if you don't already have node.js installed on your computer you'll need to do that okay but now that my folder has a package.json file i just want to install the official wordpress package so npm install and its name is at symbol wordpress forward slash scripts go ahead and press enter and now be patient this package has a lot of dependencies so it will take maybe a good minute or two even on a fast internet connection but once it does complete then in our project folder we would just want to create a brand new folder named src for source and by default the wordpress package knows to look in this src folder for a file named index.js we don't need to write any configuration that points towards this file it just knows to look here so now in this file we could try to import react from the package name now here's something that's cool we don't even need to run npm install react wordpress will load react on its side and this package is smart enough to treat react as an external in webpack meaning it will look in the browser's global scope for react so our bundled file size will not be bloated it'll just perfectly integrate with wordpress but you and i still get to write this standard import code that we're used to writing so we would also maybe import react dom from react dom again this is just a quick test to show you how simple this package is you don't need to be following along with this example if you don't want to we'll get to actual wordpress integration in just a minute but imagine i have a react component and i don't want it in this main javascript file so i could just create a new file in my src folder i'll name it testcomponent.js i'll just paste this in because it's just boilerplate but you can see i'm just importing react i have a super simple component with just a div h1 a paragraph and then i'm exporting it so i could save that within the main file i could say import test component from give it a file path dot slash test component and then it's as simple as rendering it to the page so react dom call its render method just render out test component you have to select an element on the page so document query selector we don't even have an html page but you get the idea and this isn't just limited to react you can do anything that you would normally do with javascript you can split your code up into separate files this is going to bundle everything up for us the other thing that i want to show you in this example folder here is sassy css or scss so in my src folder or really anywhere in the project folder i can create a new file i'll name it main.s css for sassy css and you can have a selector and then you can have nested selectors this is not a video about sas but i'm just showing you that it will work so this is not valid normal css but it is valid sassy css back in our main javascript file you would just import that file in so import give it a file path dot slash main.scss give that a save okay now we're ready to have the package sort of bundle all of this up and export it we just need to do one thing we open up our package.json file in the scripts area we're going to add two scripts so one will be called build and that would just be wp dash scripts build add a comma add one more task let's call it start quotes it would be wp-scripts start be sure to end that line with a comma give it a save now start will watch you and this is the one that 99 of the time it that i use you run it once and then it will just keep running and watching you in the background and it will bundle up your files every time you save a change build is just a one-time build so it's good to have but i don't use it very often anyway down in the command line to actually leverage the start task it's just npm run start cool so you can see that created a build folder and in the build folder it automatically split out our css so you can see it figured that nested code should be bundled up into regular css that looks like this it created a javascript file with our react code now here's something that's cool i want to show you the file size on this index.js file so here it is in the build folder index.js so it's only eight kilobytes even though we included react and react dom so this is pretty cool the wordpress package again its webpack configuration knows to look in the browser global scope because wordpress will already be loading react and react dom for us so our bundle is nice and small our sassy css is good to go cool now there's obviously more to this official wordpress package than what i've shown you here but i feel like these are all of the most important features so right now let's really change gears and now i want to show you how you could use this with wordpress right when you're creating a theme or a plugin so let me press ctrl c in the command line to tell it to stop watching me point is though is it was watching so anytime you save a change it's going to rebundle everything up a new version into your build folder anyways the question now is well how would you integrate this into wordpress and from this point forward it's just a lot of boring you know loading certain files from certain directories so in order to save you maybe some time and frustration i've created this github repo called brad's boilerplate wordpress and all that it does is it uses that exact same official wordpress scripts package that we just looked at but it already has the boilerplate skeleton or file and folder structure for a theme and for a plug-in so you'll find a link to this repo in the description for the video you can go ahead and clone it or just click this and download the zip but basically there's one folder for a theme and one folder for a gutenberg block type plugin so really quick i want to show you how you could use both of these to get up and running with basically zero configuration okay so on my desktop i just downloaded the zip from the github repo so brad's boilerplate main inside it let's start with the theme so we'll do the theme first and then later we'll do the plugin so in this tab i have a brand new totally empty fresh wordpress installation and i want to walk through how i could set up my theme folder on this site so i'm using local wp for my local wordpress dev installation so to open up the files or folders for that site i would just right click on local and choose reveal in finder so that just gives me the location on my hard drive where all of the files live so i would go into app public wp content obviously we're interested in themes right now so these are the default themes that wordpress ships with i would just want to move over from the repo files that we downloaded my brad's boilerplate theme just drop that into the themes folder okay then back in your wordpress site we'll go into appearance and just activate my brad's boilerplate theme so activate that now if we go visit the front end and refresh cool so this is header.php footer.php it's pulling in a blog post and most importantly though we see hello from react you have clicked this and then each time you click you can see the counter here goes up really quick let's look at the folder for this theme so i'll just open that up in vs code with vs code pointing towards the theme folder the first thing we want to do is npm install so npm install it'll automatically look at the package.json file for us and install all of our dependencies again even on a fast connection this will take maybe a minute or two okay once that completes then we'll use npm run start so it'll be up and running and watching us and let's give ourselves an example task so imagine we want to change this text that's living in react maybe instead of a period at the end we want exclamation marks so you would just go into your src folder you can go into your main index.js and for example i can see that it's loading this component from a file named example react component in the scripts folder so just dig into the scripts folder go into that component you have clicked on this component maybe we just changed this to an exclamation mark give it a save the start task is up and running and watching us so we don't need to do anything if we just go back and refresh perfect there it is how about a css change imagine we want to change this color so instead of blue maybe we want purple so in the src folder i have a subfolder named styles and there's no right or wrong way to organize your sassy css but you can see i have a main file that sort of pulls in other files and if you go into variables.s this is where i've defined you know the primary and secondary colors so if you just change this blue color in this one location to maybe purple and give it a save if you go back to the browser and refresh cool that changed it here and this link text as far as this theme goes that's really all i wanted to show you so it's just loading the css and javascript and it's just a basic wordpress skeleton theme there's nothing else special going on however i do want to show you one last task so if you go into the package.json file you'll notice that in addition to start i've also set up something called preview this preview task yes it's going to call our start task it's also going to call something called sync so i've set up browser sync so that we don't need to manually refresh the browser it will refresh the browser for you whenever you save a change in order to use this functionality we do need to customize the local dev domain that you're proxying so in package.json on line number eight you can see the example domain is myexample.local so you'll want to change this to whatever your local dev domain is so for example in my address bar you can see it's four dash youtube.local so you'd want to change this value on line number eight for youtube.local whatever your local dev domain is give that a save and now let's run that task and again you don't call sync directly you call the preview task because it's going to call both start and sync in parallel so they'll both run so in the command line npm run preview okay off camera that just opened up safari for me but i want to view it in google chrome so in your address bar just visit localhost colon 3000 so this is a preview proxy server of your wordpress site now check this out imagine i want to change the primary color to green so nvs code i'll even drag this down so you can see it in real time so i change the purple to maybe this shade of green give it a save we don't need to do anything else and we see that change reflected cool let's change gears and i want to show you how to get the example plug-in up and running so in vs code in the command line i'm going to be sure to press ctrl c to stop that current task from running okay and then in your wordpress installation you just want to navigate so app public wp content instead of themes now we're interested in plugins in the plugins folder let's just drag and drop the code from that github repo so we have this other folder called brad's boilerplate block plugin just drag that folder into your wordpress plugins folder now we need to go activate the plugin so in wordpress where you're logged in as the admin let's click onto plugins here we see it brad's boilerplate block plugin just click activate okay and before we even get it up and running in our text editor let's first just see what it does in wordpress so imagine you go into a blog post and you want to insert a new custom block type so maybe below this paragraph if i try to insert a block type if i scroll down a little bit there should be a block type called brad's boilerplate block and if you click on that cool we have this new area there's two input fields so the first one says sky color i'll say light blue and then for grass color i'll click on that and type green okay and then if we go ahead and click update to actually save that and then we view the post on the front end of our website cool so here's the post but here is that custom block type we inserted so it says toggle view sky color if you click on that only then does it reveal that value same thing with grass color and you can click again to hide them so the point here obviously that in and of itself isn't impressive but the point is is that we're using react js right to handle this interactivity of actually clicking on it and we're using values or data that you entered for that block type in the editor so while this specific example might not be that impressive you can take those building blocks of taking dynamic data and using it in client-side javascript you can take that and run with it and build anything you can think of having said that this video is sponsored by my hour premium wordpress course in that course we learn how to build two different block types so here's an example of the first one it's a quiz or multiple choice block type what species is meows a lot if you get it wrong on purpose you see this animation if you get it correct cool the other block type we build is called featured professor here's an example of it on the front end let me show you how it works on the backend or in the edit screen so if i click edit post for this particular blog post well here we see that multiple choice quiz block type so i could add a fourth answer maybe bird and it's hard to see the color difference with this background color i could actually change the background color for this instance of the block maybe to something like that but this is where you choose which answer is the correct answer from the admin side of things so i can update that and then if i view it on the front end we should see that new background color yep but i did want to show you how the featured professor block type works so this has to deal with relationships between posts so on this website that we build in the course together there's a custom post type called professors and now within a blog post well let me actually just delete this instance of featured professor and insert a new one so you can see it from scratch so if i add a new block of the let's say featured professor or it's called professor call out it says select a professor so it looks through all of the posts of that professor post type and it lets me choose so if i choose froggerson it pulls in the content for that post through the rest api and it does it on the fly so now if i save this none of this content is actually being saved into this blog post we're just saving a little piece of metadata that points towards the post id for this dr froggerson post so if we go view this on the front end and refresh instead of barks a lot it's froggerson and there's a link to that post so you can click on learn more about dr froggerson it takes you to that permalink and then we can show the relationship going from the other direction so down towards the bottom of frogerson's page it says froggerson is mentioned in the following posts and then it lists any blog posts that feature him cool so if you're interested in building more complex block types using react and you know the official wordpress package we've seen in this video you might be interested in my 35 hour premium wordpress development course you can find a link to get it at a heavily discounted price in the description of this video anyways before we bring this video to a close let's take a look at the folder and file structure for this example plugin so in our plugins folder i'll just open this up in vs code just like with our theme once vs code is pointing towards your folder we want to run npm install to get things started that will install all of our dependencies once that finishes then we just run npm run start okay let's give ourselves an example task now that that's up and running so maybe we want to change the text for one of these toggle buttons so let's look at the folder structure in our src folder we have two javascript files and two sassy css files one for the front end that the public will see and then one for what you'll see on the admin edit screen you don't need to use totally separate code bases you could just use the exact same css and javascript but i wanted you to have this option anyways if we go into frontend.js so down here we see a bit of jsx maybe we just add an exclamation mark at the end of toggle the color add it here as well give that a save go back on the browser and refresh and there you see the exclamation marks maybe you want to change the background color for this you would just go into frontend.scss and change that right here so maybe if i want it to be a green give that a save refresh cool and then obviously the same thing applies for the admin side of things so for example uh here we see what it looks like on the back end to change this you would edit index.js and then index.scss if you're curious how this index.js file works and how you would do perhaps more complex or interesting things on the admin side here well that's outside the scope of this video but again you might be interested in my premium course at the very least i hope this video gives you something fun to experiment with even if you're not exactly sure how things work you can go in and make changes edit certain values see which bits of code affect which features and really just experiment and have fun anyways that's going to bring this video to a close i hope you feel like you learned something thank you so much for watching and stay tuned for more web development tutorials [Music] you

Channel: LearnWebCode

Views: 12,141

Rating: 4.9566159 out of 5

Keywords:

Id: NKqogVcqDHA

Length: 21min 2sec (1262 seconds)

Published: Tue Aug 03 2021