## [00:00:00] Introduction
[00:00:00] **Aurooba Ahmed:** You are listening to viewSource, a conversation around tech, web development, and WordPress with hosts Aurooba Ahmed, that's me and Brian Coords.
[00:00:12] Hello, hello.
[00:00:14] **Brian Coords:** How are we doing today?
[00:00:16] **Aurooba Ahmed:** Pretty good. What about you?
[00:00:18] **Brian Coords:** I'm good. I just have this burning question. I gotta ask you at the top of the episode. Are you ready?
[00:00:23] **Aurooba Ahmed:** Always, never, but always.
[00:00:46] **Aurooba Ahmed:** Yes.
[00:00:46] **Brian Coords:** I have a, it's classic WordPress history, you know, it's like a seminal moment. How did you react? Did you learn it? Did you already know it? Did you get it? Like, what was your thoughts when that, when that became the thing?
[00:01:40] **Brian Coords:** Calypso?
[00:01:41] **Aurooba Ahmed:** Calypso. Yeah, so I remember seeing Calypso. I'm like, okay, are they thinking they're gonna bring something like that to Core? Oh, this is built in React. Okay, okay. Maybe it's gonna be React. So yeah, I bought the course, didn't go through it, until much, much later. But yeah. I wonder if Wes was like, what is [00:02:00] happening? Why is this happening?
[00:02:48] **Aurooba Ahmed:** Yeah. Yeah, it's a lot of fun actually. And I learned a lot when I first went through it. There were like random things that were like, oh, okay, I didn't even know you could do that, or, okay, that's how they do that. You know? Little moments.
[00:02:59] **Brian Coords:** Yeah.
## [00:02:59] What is React?
[00:02:59] **Aurooba Ahmed:** But today we're [00:03:00] gonna talk about, you know, React because that's the thing in WordPress and, uh, how React actually works. And hopefully this is gonna be a series where we start from like really, really basic and build what you called on Twitter, like the to-do list version, of WordPress blocks.
[00:03:18] **Brian Coords:** Oh yeah, I did.
[00:03:19] I was like, what did I say on Twitter? Yes. The, the accordion, the accordion block in WordPress, the thing that every site needs an accordion block. There's not one in Core. I don't want a giant plugin, pack of 50, you know, bazillion blocks. You gotta build it yourself.
[00:03:35] Everyone has to build their accordion block at least once. Um, it, it is the to-do list app of WordPress development for sure.
[00:04:03] **Brian Coords:** This is my, my how I explain react in like beginner terms or something, the metaphor that I use, which is I think when I explain React, I think about Facebook, the company that owns React or like created React. I think about how Facebook, um, is sort of a, a user interface that everybody's fam pretty familiar with, you know, social media network.
[00:04:24] Like social networks in general. So you have like a giant column of like latest feed information and you have like little avatars of people and you have some notifications. And what React is, is React is a way to say like, when I'm looking at all this stuff on a website, I want it to all be controlled in like one dynamic place.
[00:05:18] And it's like, it's like the way to put all of that in one mental model and make it super interactive like an app does that, is that, how close am I it to your, like, vision of what React is?
[00:05:30] **Aurooba Ahmed:** That's very accurate to how I would describe it, essentially, you know, it, it's, it's got a really good name. It tries to react to user interaction, and the way that it does that is React actually builds a sort of virtual DOM, so DOM being like your whole document in, in, in the browser, and it will build a React version of it and then it will track the comparison of what's happening in there versus what's actually happening [00:06:00] in the html, in the actual DOM. So when you click something in the browser, it's gonna say, oh, this click, I don't have that tracked in my, you know, shadow DOM.
[00:06:11] Okay, I need to update that. And then based on what React, like, you know, what you have programmed, it's gonna be like, okay, we need to add this into the HTML, so update the shadow DOM with what's supposed to happen. And that will, you know, compare to where the differences are in the HTML and then it'll interact there.
## [00:06:37] Comparing React to other familiar WordPress tech
[00:06:37] **Brian Coords:** I feel like it was the first time where it flipped it like the old jQuery days was like store everything in your HTML as like a little data attribute, like HTML nodes were just like getting packed full of data and you always had to update them and check them and like shift them around and stuff.
[00:06:53] And react was like, no, no, no, like, we will handle all of the thinking and then we'll make the HTML after. And [00:07:00] like, it's sort of like, you know, it's, it's sort of moving the source of truth and information kind of away and like keeping it in a nice, safe place where it can like feed little information down through all your little components.
[00:07:11] **Aurooba Ahmed:** Yeah, exactly. And just like PHP where you kind of have your render like your output and your logic mixed together. But when you're writing a PHP like document, you can say, oh, all of my logic actually lives here at the top and all of my HTML lives at the bottom. React especially the way if you use JSX works kind of the same way where you can like have your logic kind of near the top of a function and then that function, it returns the HTML and that's where all of your, like anything that's gonna happen in the browser actually is written.
[00:07:43] So there are similarities with like how PHP works, and the way React works in JSX, uh, which is really helpful if you're coming from the WordPress world, where you might have been kind of thinking like that a little bit.
[00:07:55] **Brian Coords:** Yeah. You know, react is like a very component based, so like a [00:08:00] component for this and then inside of your component, there's little components for this and they're very reusable. And if you build WordPress themes and you've used like template parts, I feel like that's kind of a good way to think about it.
[00:08:11] It's like you get your little template part and it kind of gets some stuff from like the global loop and it populates it in, but it's a reusable component. Um, if you've used a lot of template parts in your theme building, like that mental model of you know, breaking things into little components and, and passing information down through them is very similar except like also it's like very reactive and live and, you know, does, does like a million magical, like things without reloading the whole page.
## [00:08:36] A React-ive "Hello World"
[00:08:36] **Aurooba Ahmed:** Exactly. So I'm gonna share my screen and let's take a look at kind of what we're gonna walk through today.
[00:08:44] so first of all, if the browser looks crazy, it's because I'm using, I'm testing out the new Arc browser, which doesn't have any like extra URL Chrome or anything like that.
[00:08:54] So it is a browser. It just, I know it doesn't look like one.
[00:08:58] **Brian Coords:** Yeah, you're, [00:09:00] you're braver than me for like, changing your, I'm like, my browser is like where I spend like 80% of my waking hours and I'm afraid to, to I to mess with it or to take such a radical departure.
[00:09:12] **Aurooba Ahmed:** I get it. I'm between, I'm between browsers right now, I guess you could say. Okay, so on my screen I've got just a child theme of Twenty Twenty Three in WordPress, and there is a post, and I've called it "Building an Accordion" because over time we are going to build an accordion right here, but underneath it there is a button and it says hello.
[00:09:32] And if I were to click on it, underneath it, you see the "world" text appear. So it says Hello world.
[00:09:40] **Brian Coords:** nice touch.
[00:09:56] Once you get the pa, once you get past how to get React [00:10:00] onto the page, which is like a whole thing.
## [00:10:02] @wordpress/scripts and the scary part of React
[00:10:02] **Brian Coords:** Yeah, I mean, I think for a lot of people, the scary thing with React is like I need to install a bajillion dependencies and like, you know, I need to make a big comp, you know, like build process and compile things and all this sort of stuff. And even like if you've ever used like vue.js where you kind of can skip all that and you can get up and running, which just like including it on the page, which is crazy.
[00:10:35] **Aurooba Ahmed:** Yeah, that's true. Uh, the nice thing about WordPress is that we have this package that the Core maintains called @wordpress/scripts. And @wordpress/scripts takes care of a lot of this because of the fact that WordPress packages React into every WordPress instance. So React is available, you just have to start using it.
[00:10:53] Um, and if you use the @wordpress/scripts, you know, build package that they have. Then it takes care of a lot of that [00:11:00] stuff with magic, which is really nice. So, should I share my screen? Let's go through the code.
[00:11:06] **Brian Coords:** Let's look at this code. Um, I mean, when I look at the front, I'm like, okay, you got a button and you have some text, and you click the button and the text appears and disappears. Like, how much, how many lines of code will this take is what I want know.
## [00:11:21] Setting up a basic index.js in React
[00:11:21] **Aurooba Ahmed:** Okay, so, uh, I've got my code editor open now and it's showing up on the screen. And the very first thing we're looking at is the index.js file. And this file is 15 lines long. Uh, but really the code part is 1, 2, 3, 4, 5, 6, 6 lines of code here, of which really. 1, 2, 3, 4 lines are required in order to put React, like React on your page in WordPress.
[00:11:53] **Brian Coords:** And so when you decided to put this index.js file, you suck it in like a src folder and stuff like that. And the idea here is like if I'm [00:12:00] using WordPress' build process, it's gonna do all of these things like the imports, there's like import this from this and import app from this and it's gonna do all of that for me and I don't even need to think about it.
## [00:12:12] React and @wordpress/element
[00:12:12] **Aurooba Ahmed:** Yeah. You don't have to think about it. Like the @wordpress/element, which is the first package that I'm importing from, is basically how WordPress packages react into WordPress. The reasoning for this is in case they ever wanna switch out of React on, in underneath, behind the scenes, they can do that without you having to rewrite every single thing that you've ever written.
[00:12:32] But really for now, because it is React, we can say that @wordpress/element is React. So you're importing from React.
[00:13:05] **Aurooba Ahmed:** So I think this is something that a lot of people trip over when they're first getting into like WordPress block development especially because yeah, it's really hard to know what is React, what is WordPress React and what is like the WordPress block stuff. Everything that's inside Element, for the most part is straight up React from this package.
[00:13:24] It's just React stuff that is being pulled in. It's not all of React, but it's most of what you might need from React. Those base things that React does and it allows you to pull from them. And today what we're gonna be looking at is just React. We're not looking at anything WordPressy flavored. We're not looking at, you know, what the WordPress Block API does in React.
[00:13:47] All of that is, that comes later. And it's a lot like when people do PHP dev for the first time for WordPress, and they only know WordPress PHP. You know, they know how PHP works inside WordPress, but they don't [00:14:00] necessarily know WordPress on its own. so it's a little bit like that when you start out, but like today, we're gonna look at just, just React. That's it.
## [00:14:09] Outputting the React app with createRoot
[00:14:09] **Brian Coords:** So then what is createRoot? The first thing you're doing is you're hitting up WordPress' element, they're kind of wrapper around React, and you're importing a function called createRoot. What does createRoot do for us?
[00:15:20] **Aurooba Ahmed:** Exactly. And after that line I have something called import App. So in React, there's this best practice of having an index.js where you initialize something, but then you don't actually do your work in that file. You, you put all of that work in a different file. Often it's called app because React is often used to create applications, and so you have to import that into this index.js so you can insert it in the root that you're gonna make. Then I have, I'm just importing a stylesheet just to add some little styles to make it easy for us to look at.
[00:15:54] We are on line 12 if you are following along and you have this repo, which we'll have in the show [00:16:00] notes, uh, we're creating a constant called domNode because what we have to do is identify and get the wrapper, the div, where we want to actually insert our app, insert our React stuff. In this case, I'm identifying and looking for a div with, or an element essentially with an ID vs-accordion-root. And on the front end, I actually just took a group block in WordPress and I gave it the HTML anchor with this so that I can just insert it there.
[00:16:31] **Brian Coords:** But like when you make React, like the initial piece of HTML is like, I need a div with an ID. Like, like is, is a lot of times what you're looking at. It's like, I need a div, I need an ID, and then I'm just gonna, like, that's gonna be the, the piece of DOM where I'm just gonna like, pummel, everything
[00:16:46] **Aurooba Ahmed:** inject
[00:16:46] **Brian Coords:** into that, that Yeah. I like I think pummel's a a technical term also.
[00:16:51] **Aurooba Ahmed:** Oh, absolutely.
[00:16:52] **Brian Coords:** Yeah.
[00:17:09] Then what you do is now that you've found this element, you have to turn it into, uh, a place where you can add React and that's what the createRoot function does. It says, hey, this is going to be the element that I wanna transform into my react stuff. And once you've done that, you grab your application that you're importing and the, and the name I gave it is app, that's the variable for that. And then I just render it. I say, Hey, take this and put it into that root that we just created on that vs-accordion-wrapper wrapper, div.
[00:17:43] **Brian Coords:** And so this, this right here is, is like from project to project, like this is pretty much like 80% of the time what you're gonna be looking at, right? I mean, like, you grab an element, you have an app, um, you import it, you render it. This part here is like, sort of like, I'm, I'm gonna [00:18:00] let Copilot write this page for me in the future because it's always, this is gonna be pretty similar to this, but the app.js file, like that's where the actual React app that we're building is kind of gonna live.
[00:18:13] **Aurooba Ahmed:** Exactly. And in fact, I literally just copy pasted this from another project that I have cuz I was like, I'm not gonna write this. What? And if you give it a verbose command, GitHub Copilot can totally do it for you.
[00:18:26] **Brian Coords:** Oh yeah. I'm sure.
## [00:18:27] Exporting and importing functions in React
[00:18:27] **Aurooba Ahmed:** Yeah. So this, I've switched over to the app.js file and this file is 20 lines long, but there's some spaces and happy comments and a few
[00:18:43] **Aurooba Ahmed:** No, but you did, you talked about it from the beginning. You were like, okay, let's see how many lines of code it takes to build this little button that opens and closes
[00:18:50] **Brian Coords:** Yeah. I, yeah. I have like 50 things I want to dig into here, but let's, yeah, let's do it line by line. Cuz you're right, it's like, [00:19:00] it's a lot of lines, a lot of this too is like scaffolding stuff, you know, declaring a function, exporting a function. Like that's the kind of stuff like, it's a line of code that again, like you're gonna copy paste, Copilot's gonna write, you're gonna do it so many times you do it in your sleep.
[00:19:13] Um, but it's what happens in between all those lines where like, you know, the magic happens.
[00:20:39] **Aurooba Ahmed:** no, you're right.
[00:20:40] **Brian Coords:** Some of that stuff is like a little bit like still scary.
[00:20:42] Like, oh, I can write a function and then I have to export my function from one file, and then another file is going to import that function.
[00:21:13] So you have to export it. And so here we've write written a function, and then we're doing something called export default and then the name of the name of that function, which is also something that can be confusing because this export default is assuming that there is only one function in this whole, uh, file that you want to be made usable outside of it.
[00:21:36] If I had more than one function in this file and I wanted to export those, I would not say export default App. In fact, I would just say export and add that to the beginning of the function name. So it'd be like export function App, and then I could have multiple functions that I'm exporting. It's a lot like partials in SASS.
[00:21:56] That's, I think, like the closest comparison to something that we already do. Right? Like you, [00:22:00] uh, you don't have to export, but you do have to import things in SASS where you write a partial and then you import it somewhere. And if you didn't import it, then you can't use it. You know, variables, for example.
## [00:22:12] Breaking your code up into smaller files
[00:23:33] The better your, your future self will just thank you. You know, your future self will be happy with you.
[00:23:38] **Brian Coords:** Yeah.
## [00:23:39] Concluding Part 1!
[00:23:39] **Aurooba Ahmed:** Okay, so clearly we have a lot more than I thought we would be able to get through in one episode, so I think we should pause here.
[00:24:07] So, uh, what do you say? We do that next week and finish, finish this next week.
[00:24:13] **Aurooba Ahmed:** Yes. Okay, so stay tuned for part two of this first part of the accordion series.
## [00:24:21] Outro
[00:24:21] **Brian Coords:** Visit viewsource.fm for the latest updates and links to the show notes. Review and subscribe to viewSource in iTunes, YouTube, or wherever you get your podcasts.