viewSource

## [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:26] Learn JavaScript Deeply

[00:00:26] **Brian Coords:** Okay. In your time machine, go back in time. You know, I think it's six, seven years now. The great leader gives his, his commandment from on high. The, you know, thus spoke Matt Mullenweg "learn JavaScript deeply."

[00:00:43] Did you, in that moment, well, do you remember that? Learn JavaScript deeply.

[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:00:57] **Aurooba Ahmed:** My thought was, oh my God, what is he about to do? [00:01:00] And two, uh, he's about to do something. I better go learn JavaScript. So I bought the JavaScript course from Wes Bos and then didn't touch it for like a year.

[00:01:10] **Brian Coords:** Yeah, I would love to see Wes Bos' sales after that, "learn JavaScript deeply," it's like he probably got so many sales and like how many of those people made it like 20% through his one of his courses? Which one? The React one, or did you make the fish market or whatever?

[00:01:28] **Aurooba Ahmed:** Yes. I made the fish market, the React one. I definitely got it because I think when he talked about JavaScript Deeply, uh, I forget what it was called. What was the name of the experiment they ran in wordpress.com for the new UI?

[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:02] **Brian Coords:** Yeah. Yeah, and I think you and I have talked about the fact that there actually is not a great like WordPress JavaScripty course that I like I, I don't have one in my mind when people ask like, oh, I wanna learn JavaScript for WordPress. I don't have that in my head of where I would send them other than, you know, Wes' React course is a good, you know, a great place if you don't know react for sure.

[00:02:27] **Aurooba Ahmed:** Yeah, and his vanilla JavaScript, the free one is also really, really good.

[00:02:31] **Brian Coords:** That the 30 day, like you do a little thing every day, that one is great. That should be like if you're kind of unsure about JavaScript or like you just have a little bit of , you should do that like once a year or something. Like it's just a fun little like 30 day challenge, don't eat carbs and do 30 days of JavaScript.

[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:03:43] **Aurooba Ahmed:** Yes, in the JavaScript world that we find ourselves in now. Yeah. So, you know, we will build one over a course of a few different episodes, but before we actually build an accordion block, we actually have to understand a little bit of React. Like what is React? So, [00:04:00] uh, what is react, Brian?

[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:04:44] And I want like all of those little components, the, the feeds, the posts, the things I want them to be as like performant and reusable and connected as possible. And that was like, super hard in the old days of kind of vanilla JavaScript and jQuery. But what React does is it [00:05:00] basically says like, oh, this is a component, this is your component of messages. And when you read a message, the other component that says how many unread messages you have will automatically update and react to the fact that you up read this message over here somewhere else in your thing and this component will be here and you'll be reusable and all this sort of stuff.

[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:26] So it's doing a lot of injection and things that are happening behind the scenes so that you don't have to do that manually, like with vanilla JavaScript. That's like, that's the basic core of React.

## [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:41] **Aurooba Ahmed:** Yeah, so this is React. This is built completely in React and honestly, you could also do this with regular JavaScript, but it's a little bit, just a little bit easier to read and maybe a little easier to understand it in React.

[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:24] Um, you know, that I think is maybe is like the first thing people are like, yeah, you say it's just JavaScript, but like, I know I gotta do like a bunch of stuff. I know I, there's like a process. I can't just write my React.

[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:12:40] **Brian Coords:** So, so I'm importing from React, but like big picture, do you, how much, how do you keep track of like, I'm using React, I'm using vanilla JavaScript and I'm using WordPress' very specific flavor of React, or do you just not really think [00:13:00] about that right now? Cuz you're just like, I'm in WordPress, that that's the most important thing to fun, to focus on.

[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:14:22] **Aurooba Ahmed:** Okay, so createRoot is whenever you're using JavaScript, really, and even jQuery, or let's say you were using AJAX in the regular WordPress fashion, you need to create, you need to have a container or an element on the page that you target and say, here is where I want to inject my JavaScript. Or here is where I wanna create things, let's say with AJAX, you were like pulling posts dynamically from WordPress. This is the div that I want it to add it to. So that's what the root is like this is going to be the element that forms the foundation of where we're adding everything from React. It's the root of [00:15:00] our setup.

[00:15:01] **Brian Coords:** Okay, so in the build process, it's gonna grab that function and kind of like compile it into your JavaScript. So like, it, it pulls into everything you need. It imports this function that's gonna like, uh, let you create your root of where you're gonna kind of like, you know, render out your app and store all your data and all that sort of stuff.

[00:15:19] Uhhuh.

[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:16:53] **Aurooba Ahmed:** I mean, we're all used to doing that kind of thing with JavaScript in general, like whether it's jQuery or you're running like AJAX to pull [00:17:00] posts from WordPress, it's a very common thing to have a wrapper or some sort of div that's empty, and that's where you put all of your, like the JavaScript stuff is gonna get added there.

[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:39] **Brian Coords:** you don't have to brag about how long your JavaScript file is.

[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:19:19] **Aurooba Ahmed:** Yeah, so I'm gonna skip the first line just for a second. The first import that we're doing, we'll come back to that. This whole application is just a function, and then I export this function just like I would in maybe in a regular JavaScript file, and then I'm importing it later. In this function, we have a return, and the return area is where we spit out the HTML that we want happening on the front end of our website. So that's where I'm adding my button. And it's also where I have a little conditional that says, Hey, when I click that button, show the word world in a paragraph element.

[00:19:55] **Brian Coords:** Well. I will say you make it sound like writing a [00:20:00] function and exporting it in one JavaScript file and then importing it in your index.js file. Like I, I will say, you make it sound like that's a thing that everybody does all the time, but I would push back a little bit and say like, these are the places where I think a lot of people who came from like jQuery and maybe some vanilla JavaScript, and they're looking at WordPress and they're looking at blocks and they're looking at the block editor, they're looking at React, and they're looking at "learn JavaScript deeply".

[00:20:24] Like that right there. I would bet that a lot of people would probably agree with me and say like, I don't know if that's JavaScript. I don't, that's like, whatever is it ESNext or what? Like that's, that's modern future JavaScript and like, that's already a little bit of a you know, so I, I'm just pushing you on that because I think it's

[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:20:51] **Aurooba Ahmed:** That's fair. That's that's fair. And it's something that in jQuery, you often really don't need to do because you just write your function and then you include the file and it just [00:21:00] works, you're right. Um, but yeah, like in a lot of JavaScript and especially in React, if you wanna take a file and include its contents in another file, you have to say that this is something I want to use outside of this file.

[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:22:12] **Brian Coords:** And, and, uh, or another one is like in PHP, like I love my PHP to be like 50 files instead of one giant file. Like I love tiny little files that with different names and so, you know, it's a similar thing where you're requiring or including a file in PHP. There's not that like export process, but it's that same thing of like, how can we start breaking things into smaller files and, and if you're used to writing like one JavaScript file for your theme, and it's like 4,000 lines long, it's like a bunch of jQuery event listeners or whatever, you know, hey, we've all done it like that.

[00:22:46] This is, you know, once you do realize like, oh, I can just write a function and I can export it, and then later when I need it, I can import it. And, and similarly, WordPress has written tons of JavaScript that they're exporting that we'll get into [00:23:00] the, you know, like we did before, we can import it at the top and import that function that you need.

[00:23:04] Um, you start seeing like kind of how cool that is and how neat that we can start doing those things with, uh, when we build JavaScript.

[00:23:11] **Aurooba Ahmed:** Yeah, definitely. I think the practice of breaking things into little files instead of doing all of your work in long files is really, really important as you start to do more complex and intense things and JavaScript, especially block development is just by default, a complex thing, you know? So the more files you have, the cleaner and easier you make your code to read and navigate.

[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:23:47] **Brian Coords:** Yeah, I think let's stop here. Let's come back. I think there's things we need to, like, we still need to talk about the, you know, state management we need to talk about like JSX and how all that works. We need to talk about all these [00:24:00] like, weird, modern JavaScript things like destructuring and like, uh, spreading arrays and like all those like fancy things that kind of trip people up.

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