React: Make Excellent Apps and Websites in JavaScript

Speaker 1: 0:00

Yeah. The overlap is a show about the intersection of design and front end development. I'm Alex, our front end developer from new haven, Connecticut. With me, as always is my cousin and cohost owl.

Speaker 2: 0:29

Hey, I'm al a designer from Philadelphia on the show. We share our experience with each other about design and coding. We don't know everything, but we share what we do now and laugh about Welby. Nope.

Speaker 1: 0:40

Yeah. Today I'm going to be teaching you about an awesome Ui tool called react. It's great for developers and it's great for designers to be familiar with. Today I'm going to introduce you to the big concepts of react so that you'll know it's purpose and guiding principles. I'll be explaining how easy it is to pick up and give you some great places to go next to learn. React. Ooh. Yeah. Some of the big concepts going to touch on are how it started. React, speed, jsx components, props in state, which is pretty much how react handles data, uh, event handling page routing, lifecycle methods, how to install it, how to learn it, a react for mobile devices. And who like these big companies who uses react.

Speaker 2: 1:22

Okay. So those were all words. Ah, I'm not 1000% sure what most of those mean and I don't know anything about react.

Speaker 1: 1:30

Nice. So that's kind of a, so if that's you and you're listening to this and you don't know anything about react, that's fine. Prepared this really for you. And for l just to give you a big overview of what react is. Kind of explained the, the big ideas, the big parts of react, kind of explained to you how it works and how easy it is to learn and then kind of where to go next with it. And also why would you even want to learn this? What's, what's, what benefit does this give you a designer? Right, right. So what would I need to know before I build on my skillset with react? Um, so before you even get there, you probably wouldn't know html or you decent with html, you understand? Yeah. Tags and it cost fans the whole thing. See, look at that. So there's some, some Saudis Gimo right there. So just understanding the basic building blocks of html sub cm. Some CSS will definitely be helpful, uh, so that you can style your app or your site and make it look pretty good and then pass that. Um, knowing just a little bit of javascript will definitely help you out. You don't need to be fully mastered in Javascript, but just knowing a little bit about just how programming works in the first place or just how functions work and some javascript syntax will work, uh, will be helpful for you. Cool. Okay. So really what react js is, um, is a javascript library for Ui for creating a user interface. It is created and maintained by Facebook and the open source community, uh, Facebook, build it back in 2011 and the open source they're, which means they opened it up to everyone to use and to build upon and to just work on, uh, back in 2013. So it's been around for awhile and it is massively popular. About 80% of front end job postings mention it. So if you want to be a front end developer, it is definitely a good library, a good skillset to have under your belt. It's pretty popular. It's, yeah, it's, it's um, so really the three big frameworks for front end web development are angular react and Vue and react is by far the largest and it's still growing in popularity. So definitely recommend you learn it. Um, not, not only is it good just in knowing it, being able to approach those job listings that mention it, but also it just makes you a better javascript developer creating with react if they're really just using really good modern javascript. So one of the big ideas of react owl is that it's declarative. And that basically means that you tell react how you went, your app or your website to look and then react. We'll do all the work that's involved in getting there. There's declarative and there's imperative with programming declaratively say like I want a landscape painting with a sunset and a river, right? That's saying what you want on on, on the page or on the canvas imperative. The opposite would be saying like each brush stroke, your telling it how to paint that brush stroke, so react is nice in that you kind of to say how you want the end to look and it'll do all the hard work. Getting your APP to that state in the fastest, most efficient way possible so you don't have to worry about all that stuff. You don't have to worry about the performance and you don't have to worry about how it renders out that content. If you say that you want a purple button there and you want an image over there and you want it to all just be laid out in a certain way, you tell react to that and it will make it as fast as possible without you having to worry about it. Yeah. So that's just one, one thing to know about it, that declarative aspect of it makes it a lot easier for you. You don't have to get into the nitty gritty. You have a lot smarter people doing that for us. You have to trust the computer. Yeah. But with the computer uprising, with the robot uprisings, you're going to have to deal with that a lot more and that they'll know, like the robots will know that you trusted them. They can tell when you're trusting. Yes. They can sense their emotion and yeah, no you will. You'll be one of the last remaining survivors. It'll be much better for you. That's another benefit to learning react that no one talks about. No one's talking about that machine up pricing. Yeah. And how this is going to make you much better off and that happens. Yup. Yup. You guys are great.

Speaker 2: 5:58

I'll have, you know that I hold onto computers for a long time because I feel a connection with them. You just leave a computer for the new shiny thing.

Speaker 1: 6:08

I've seen you office space, a few computers now. I thought never done that. Um, so because you're kind of declaring the way you want it to look and react to is doing the rest. It is incredibly fast. React is super, super fast. And a big part of that is that um, it, it uses a copy of the dom to work on. Now the dumb, it stands for document object model and I know we're kind of getting into the weeds a little bit of, but just stay with me. Um, the dom is really just the layout of your page. It's kind of like a tree where it starts with html and then go then go stone be like Hetero and body and it's like every little element in your site, right is part of the dom. And so rather than changing that, that actual version on the page, it has his own kind of copy in the background. And a change of stuff around there and sees what needs to change. So if you have a counter on your page or if, okay, so you and I were just working in Trello, right? Trello runs on react. So it saw that I had updated a card and your entire page didn't refresh. Right? Just that one little spot. Just that one little spot and it went fast. It, it, it didn't have to do a lot of work because it saw, oh there's a change and it's only this element. I'm going to change this element out. And it happens fast. It's a low lift because it's not wiping the entire dom. It's not throwing out everything and just throughout that one element and brought the new one in. So that's, that's kind of the power of reactors that it intelligently says only this changed. Let's only change that where before, if you want to update a page and everything changes. Yeah. So you know, it, it, it, it all goes white and then it all comes back. That's a lot of work. So react is way faster because it doesn't do that. Okay. So, so does, does that make sense so far?

Speaker 2: 8:09

Yeah. So react is of a thing that basically makes your website make the things up here, the way you want them to appear, where they want, where you want them to appear. And instead of updating the whole thing all at once, it only updates parts that change. So the robots know what changes and it's basically goes through checklists like same, same, same, same, oh, different change this. Exactly. Yeah.

Speaker 1: 8:34

Yeah. So it's, it's much, much faster than, uh, what, what we've been using before because of that kind of an idea. Um, so the good news is your entire site could be in react or if you already have a site that you like, like a wordpress site or anything like that and you just want like a new interactive part to your site. Let's say you have a wordpress site that's all about recipes and stuff and you just want like a new dynamic ingredients picker builtin react, you can just have that one element in react or you can have your entire site rebuilt and react. So it's, it's really great in that you can kind of just put it in in one spot or it can run an entire site from the login to the admin panel to everything. It's, it's, it's very versatile.

Speaker 2: 9:24

Very cool. So if you already have a site built, you can part by part built, rebuilt, like rebuild components, using react eventually, like eventually rebuild your entire site or,

Speaker 1: 9:37

exactly. No. Yeah. So if, if you wanted to have a new contact form, um, and you wanted it to, you know, have some cool animations or special validators that just check to make sure that, uh, you know, they entered a valid address and you just would like to build that and react, you could just have that part of your site be a react component. It's as easy as, um, if you've ever put like bootstrap into a site, you just put the link to the javascript and the CSS, like in your header and your footer, you just put the javascript link in your footer and you're good to go.

Speaker 2: 10:15

Hmm. Okay. So you wouldn't have to tear down your whole website and rebuild it from scratch. Right. So it's pretty nice for that. Um, and it plays well with the other kind of Javascript, angular and view that you just mentioned.

Speaker 1: 10:28

Yes. Yeah. Um, you, you can do those together. Um, it gets to me like it'll play nice. Uh, and, and some sites do have, um, angular and react and vue going together, but generally you're, you're going to kind of pick one. Does that make sense? Like they, they kind of overlap in what they do. So unless you have a good reason, you generally kind of pick one and you develop with that.

Speaker 2: 10:56

Gotcha. Okay. That's probably better for the developers to, it's cause they don't have to know, they don't have to know a little bit about several frameworks. They can know a lot about one framework.

Speaker 1: 11:06

Yeah. It's, it's, it'd be a lot of switching and trying to get those components to play well together. I, it would, it would be a heavier lift. Um, but, but it's, it's definitely not unheard of, which means it's heard of for all. You'd double negative fans out there. So I've done it. Yeah. Oh, there we go. Nice. Um, so one of the big concepts and one of the things that kind of freaks people out when they first see you react is this concept of jsx and Jsx is pretty much a, it's kind of like a templating language, but it's not actually because you get the power of javascript in there. So, so think of js x, they, so the js is for javascript. Um, uh, it's, yeah, it's pretty much like a much cooler html is kind of how I think about it when I'm writing it it or, or future of jelly spreaders. Cool. What do I know? What's a jellies better? I don't know. A knife. So it's, it's, it's if a, the spreader joined the x men. That's what you're thinking. You're like knife with a knife. It's a guy that got bit by a radioactive, I think it's just wolverine is what you're saying. With the three knives coming out and he's just making peanut butter and Jelly Sandwich. I mean that, that's already wolverine. If you don't read the comics, you would know when it was character traits is that he's just a sticky guy. And every episode or every comic he does his, his phrases, I got myself into another sticky situation and then everyone, oh, so you do read the comics. So you, you, you know exactly what happens. You know, I was just following your line of logic. That's good. Yeah. So that, that Stanley came up with some crazy characters. All right. Um, so jsx has, is, is like this cooler version of html in that, um, say you, you have your html element, right? So if you guys aren't familiar with html, um, you basically have your opening ang angle bracket. You have like an h one and then a closing angle bracket. And then inside that you will have your header, your, your top header. So like Alex's site. And then you would close that angle bracket. Right? And if I wanted that head or to do anything when I w when someone clicks it, I would have to in a separate file, have this event listener in a javascript file. So I have these two files, my html file and my javascript file and I would have to create this separate code and continue to build up my site. And as the complexity increases, it really starts to get slow and clunky. Um, not so much for how it runs, but for how my development goes. So they had to keep kind of going back and forth between them. Um, where if I'm writing with Jsx, I can put that reference to the logic or, or even some of that logic right there, right in that h one so that I can have that header unclick trigger a certain function and that function can maybe change the color of that header. So it's, it's all there right in that file and I don't have to go too far. So it, it looks a lot like html. It's not actually html, but the syntax is like practically identical so that it's a lot easier to create your app, to create your layout in your structure right there in the file as Jsx the same thing as react. So you write react in jsx primarily. You don't have to, but I don't really know anyone who doesn't. Um, it's not heard of. It's, it's hurtful, but it's not as common. Um, when it first came out, people were like, ah, jsx like it's just like fake html. It's, it, it does all this weird stuff. It's just not normal. Like, and, and people didn't like how we brought our logic into the markup. The markup is the html, the CSS, right? They didn't like combining the markup and the logic and react kind of argued, uh, you already have that logic in the markup already intrinsically combined. But you have this like fake separation with the two different files. Let's just bring them together because you already have a button here and that's in your markup and then you have the function over there in your javascript. You might as well have them like right next to each other because the, the, the actual physicality of that button and the action it does like says like sending an email. Those are linked in in a certain way.

Speaker 2: 16:08

So if you did that, if you put all of the logic, width of markup, it seems like you would have to remember the way you did it because you'll have to do it over and over and over for every time, every instance of that action. Is that right? I'm not, I'm not sure what you mean. So if you link to something in Java script, you say, okay, when you click on each one, it turns purple. So every time you have an h one and your markup, you can tone and you have to have the same jsx script to make that h one action the same time, the same way, the same time, every instance of an h one. Uh, well, no, no.

Speaker 1: 16:44

So if I have an h one in my jsx, I'll, I'll create this h one and then inside it, um, I can say on Click, I want you to fire the change color function. Right? And so that change color function is defined in that same file and it will, um, oh, it's just in a different part of the file. Yes. It's, it's, it's, it's just a different party. Exactly. Yeah.

Speaker 2: 17:11

Okay. I was thinking that you put the jsx next to the markup, so it was like h swan and then a bunch of jsx and then cascading in a way.

Speaker 1: 17:21

Um, not, not, not exactly, no.

Speaker 2: 17:26

Okay. But there's one place where you write the Jsx and then it connects to

Speaker 1: 17:31

the markup. So I think this is definitely a thing where it becomes easier when you see it unfortunately. So for the podcast and medium it's a little bit tough. Um, but it's just that I'm not explaining it as well as I need to. Okay.

Speaker 2: 17:47

Cause I'm picturing like I'm people

Speaker 1: 17:50

who just style things in line. I get what you're saying. So we're actually in a javascript file this entire time. The, the actual like file name would be like index dot js. So that const is declaring a constant variable called element and then we're setting that equal to this h one hello world clothes h one. Right. So that's the declarative aspect of jsx and that we are, we're telling javascript what will you want and then it will, sorry, we're telling react what we want, like how we want this to appear on the page and then it's, it's going to build that out for us. So now with that element I can use that like a variable and put that in places because that's now assigned to the variable element. Got It. Okay. So I can reuse that. I can change that. I can put functions inside that so that if I have some data that says the user's name, I can say instead of hello world, I can say hello. And then in brackets I can put username and then so it'll dynamically say hello l right when the page loads. Okay. Got It. Got It. Okay. That makes sense now. Okay, so, and this is all in line with your, yeah, so, so your, your telling it at the end as a function to render this out. So you, you will say render and then you can put all the, what seems like html, but it's just the jsx all the jsx in there and you'll tell it to render these parts and then the functions for what you want those things to, to trigger will be outside of the render cause that's, that's the logic of it. Got It. Okay. So you'll, you'll have, let's say, um, you, you, you start your file and you create that first function of change color, right. And the change color, we'll maybe just a toggle between a few different colors, red, blue, green. And then underneath you'll say render and you'll, you'll have your h one and you'll pass it that unclick, change color function so that when it's clicked, it'll reference that function and it'll go through those colors. Gotcha. Okay. Cool. Yeah, it's, it's tricky to explain jsx because it's, it's different from, or it's, it's, it's tough for me just because it's different from what you've kind of seen before. And it's kind of like wrapping your head around this new dynamic for how to do things with, um, with both html and javascript. So the big takeaway really is just that there's no more separation of your markup on your logic. It's all kind of intertwined and it allows you to really build out your html dynamically. The cool thing is you, if, if you have a list of let's say sales items, you're able to just say that you, you take your sales array and all that, like the list of sales and you've mapped over them and you can build out your table dynamically an easily so that you can build out really responsive, really dynamic apps kind of quickly. Cool. So that's just sex and that's one of the big changes that someone coming over to react from. Maybe just html, CSS and javascript. We'll kind of see first kind of be like, Whoa, what is this? And it's going to seem a little more extreme or just a little more confusing than it really is. Once you kind of pick up the way that it works, it'll come a lot easier. Um, and then another big idea with react and it's, and this one is not specific to react. This one's kind of been happening in a, in a lot of different circles and in a lot of different frameworks and libraries, but it's the idea of components. If the idea of these sections of reusable code, kind of like a Lego block that you can snap into any part of your app and it brings with it maybe some styling and some functionality and the really nice part about components, it's just that you can build it once and then drop it everywhere. Right? So like if you think about the Facebook like button, right? That like button is just a component and that component is just referenced on every post, on every picture, on every thing on Facebook. They don't have to rewrite that like button every time and the functionality behind that like button, they can just reference it. There's something about just calls for that information and it says, hey, all of this stuff, we're on this like button, put it right here. Right? Yeah. So everything that that's involved with this like button, all the logic that that's in there, the styles, the SVG that makes the thumbs up icon, all of that has to be written once somewhere. And then every single page, like if you and I were working for Facebook making a new kind of feature where you can share videos or whatever, um, and we needed that like button, we would not design it again or we, we would not copy and paste all of the code in there. Again, we would just reference like button and that would be, and so it makes generation of new things a lot faster, a lot easier and cleaner. And it's easier for you to test that like button because it exists in one place. You can make one really good button versus, you know, having an updated in a lot of places. It just gets messy. That makes a lot of, and, and I mean, we, we, we see that in other apps too. Like if you use, um, Adobe XD or if you've used illustrator, those kinds of things, um, those apps allow you to kind of make a symbol. Right. And that symbol, if you edit it in one place, it changes in kind of all the places. Right, right. Yep. That's exactly, it's the same sort of concept of we want to make one really good thing and then we want to throw it everywhere but also be able to change it and have it update everywhere. Yeah. So it's like one source of truth. Exactly. Like this is the button. Yup. Yup. And it's funny cause that idea of the one source of truth comes back in react a little bit. Okay. Uh, that's a little bit of a foreshadowing. Mess it up.

Speaker 2: 24:12

Nice. Yeah. I read through the show notes.

Speaker 1: 24:15

Hey, nicely done.

Speaker 2: 24:17

I'm just kidding. No, I am facing that concept of one single source of truth at work, but with something completely unrelated. Oh, interesting. Ah, it has nothing to do with code at all, but it's, I understand the concept of that and in my dream world that would exist. But it as of yet does not, someday dreams can become reality. Yeah. Um, well right now I'm the source of truth usually. Nice. So Nice. I just happened to know all this stuff anyway. So with components, yeah,

Speaker 1: 24:47

it can either just be a piece of the visual Ui. Like if you have a user profile picture that you need to drop in a lot of places, right? So like if, if you styled the user profile picture in a certain way, like it has a circle and maybe a drop shadow around it and you want to put that up at the top right. And also on their, you know, their card, like their user card or, or on their page and you just have like all these places where this is popping up.[inaudible] you can style it once and use it in a bunch of different places. Okay, cool. Yes. So, so things like cards, uh, the header, the footer, popups, dropdowns, all these things that just need some styling and just need to show up in a, in a lot of places you can use a component for that or it can be something that adds functionality. So you can have a component that kind of wraps around other components. And this one is actually like it, it doesn't show up in the Ui so you don't actually see it. But this component might be something like, uh, uh, component that makes sure that you're logged in and if you're not logged in, it kicks you to the login page. Got It. Okay. Or it's a component that passes down data to all the other components so that you can populate the user data in the components like the table and like the user card. Uh Huh. Gotcha. So you might not see all components, they might just be logic components or it might just just be a visual component or it can be both like a button that loads of papa or sends off a message or something like that that be, and it has functionality that kind of Gotcha. Okay, cool. Yeah, so these are great because it's like I said, it's similar to design where you're going to reuse bigger elements when working with a brand. Right. You're not going to redraw everything from scratch all the time because it's going to bank it less cohesive. Right. And just to do a lot more work, it's kind of silly,

Speaker 2: 26:35

right? Yeah. You don't want to have to like redraw an icon every time you need an icon, you just want to go. Right,

Speaker 1: 26:40

right. Absolutely. Um, and like I said, it's easier to maintain. You write less code cause you're just referencing the code. Right. And if there's an error with it or you just want to update it, you fix it in one spot, you change it in one spot. You don't have to search through every part of your code where you, you paste it up a hundred lines of code, all you're doing is referencing it with one line and it's nice and tidy.

Speaker 2: 27:02

Right. Yeah, that makes sense. That makes a lot of sense.

Speaker 1: 27:04

So one thing with components is kind of like when do I make this a component? When is my component getting so big that I want to make it into smaller components? Right? So like with a flyer you might kind of be like, oh, is this, is this heading kind of becoming a bunch of subheadings or or, or is is this layout becoming something that I'm going to want to reuse again or do I want to break these cards down in something else? It's kind of subjective. It's, it's really up to you. There's no right answer of like when you're at a hundred lines of code, that's when you break it into a component. But really if you are reusing code a lot, that's one time. Like if you're putting this button everywhere, you might want to write that down into components so that you can reference it easier and not have to have so much repetition. Also, if your component is getting too complex, that's another time you want to break it out or or, or you'll break that out into multiple components. So like right now I'm working on a player component for this podcast, right? So if you think about it, like a player or a player is a pretty good component like concept, right? Like all right, yeah, that's something, something that we're going to put a lot of places on every page. That player component is going to show up. So I don't want to repeat it for the homepage and for this episode's page and just keep, you know, re rewriting this code or copying and pasting this goes, I'm going to reference it as a component.

Speaker 2: 28:20

Right? So it's like one big puzzle you can shove on to other blocks and other places. Exactly right. And you don't have an end because it's referencing one source of truth. If there's something wrong with it, you don't have to go digging for it.

Speaker 1: 28:34

Okay.

Speaker 2: 28:34

What's wrong in every single instance you find one instance checks that it pushed us to the right parts. That makes a lot of sense.

Speaker 1: 28:42

Um, but, but even with within that player component, maybe I have other components like that seek bar if if, if the seek bar gets really complex, maybe I break that out into its own component. It's not going to show up in a lot of places but maybe it has a lot of logic to it and it's just going to be easier for me to rationalize and think about that if I'm, if, if, if it is its own component and not part of a much bigger component. Because if you think about a player you've got seek, you've got how much is loaded already about play, pause, you've got the speed, the volume, like there's just a lot going on there. So while I'm, I'm not going to repeat that, seek bar anywhere else, but inside this player it still might be easier if I break it out and just have that to think about.

Speaker 2: 29:25

So is this true only of react or is this this idea of components, true of angular and view

Speaker 1: 29:32

[inaudible] and view and even just html, CSS and javascript kind of in general, but react kind of has it as a core in in that this is how you build this out, this is is a big part of how you build react out. Like I'm doing the same thing at work right now with angular where making those same kind of decisions about is this something that's worth being a component that it's its own thing. Like for instance I was putting a zero state like icon and text in it into our app in places where as a new user they didn't have any sales yet or they didn't have any information on this page yet. So it's one of those like uh, oops, like you don't have anything here yet. Once you do like you'll see your data here, right? That sort of thing. So I was copying and pasting the same code over and over again cause it was just an icon and that tax and it was only showing up if you know, some variable was hero. So after like the third time of me doing that and realizing I wanted to do it a lot more, I cut that, that code out, I put it into a component and I just referenced that component and the files that I was putting it into our much tidy or now cause it's just referencing the zero state component rather than having all that code all across the APP. It's, and it also seems like it would be a better user experience for other developers cause he can say like, Hey I've made this lego block. Here it is, have at it if you need this, if you need a zero state thing in any of your pages or layouts or whatever. Yeah, that's that's exactly right. Cause now, um, my coworker can just reference zero state rather than going and fishing for that block of code, copying and pasting it and editing it now he just references. Yeah, exactly. So it's, it saves a lot of time. It makes things tidy or components are pretty fantastic and you can nest them. So you can put components within components, right? So with my player component, I am going to nest or I'm, I might nest a Sikh, right? Like a seek bar component inside that player. So you can kind of go like infinitely deep, um, with your components. It's, it's just how you build it out look like, like the entire APP is kind of one big component. And then from there you work in just building out components. So I'll have a hetero component and a content or a body component and a footer component and then everything goes in there, uh, at certain levels, right? Like everything's like a child of something else. Gotcha. Okay. So now that we've got these components, we need to think about how to work with our data. And react has a pretty interesting way of of handling this. And this can be confusing for a little bit, but I'm going to try to explain the data manipulation and just how, how, how to work with it inside react and kind of an easy way, but just two terms that we kind of need to know. And they sort of mean the same thing. It's just whose data was it and who's holding onto the data. So state is the data that a component is holding and props are kind of the data that a component was given. Okay. So they're both kind of the same data but props or what is passed down. So if you go back to my player, I'm the player is holding on to all of the information about the track that, that it's playing and it, it, it will then pass down that information to its children. So all the information that the player is holding its state. So right now it knows exactly what second it's, it's on. So it's been playing for three minutes and 25 seconds that is part of its state. And then it passes that time down to the seat bar that seek far receives that time as a prop or a property. Okay. But, but they're called[inaudible] but it's just, it's short for property. So it comes back to the one source of truth thing, but you kind of mentioned earlier, react does this on purpose because the concept is that you want to have one place where that data exists. You want to have one source of truth where that that number or whatever it is, it can be a string, can be anything where that exists and everything else just updates it or tells the player to change it or to do something with it. What's kind of working on an analogy here with kind of a basketball scorekeeper, right? So if there's a scorekeeper keeping track of the score, that score scorekeeper has the score and that is his, what prompts her state. That is his state. Nice. All right, cool. So yeah, he's keeping track of the score and that's his state. All right, so he's got the score. That's his state, right? He tells the ref, the referee the score. So he passes that information to the ref saying, Hey, the score is is 12 to 10 that is the rafts, props or state that is his prop. It's the Rapha component in this analogy. Kind of. Yeah. So He's, he's, he's just kind of passing that that down to the ref saying the score is 12 to 10 right now the ref can't go over and change the score. Right. That's not how that works. The referee never goes over and says the score is 12 to 12 she, he, he, he never says that especially cause there's maybe multiple refs on the court. So that can be really confusing if there is, you know, multiple numbers coming in. And so the referee never says that. He says add to to the score. Right. He just tells the scorekeeper. That was a two pointer add to, to the score that you have. Tell me that stuff. But you tell me the score that you get after that you do the processing. Exactly. Yeah. So the referee kind of calls this function called increments score. Right. And so, so that's what the component or the child component we'll be doing is just calling a function that might be increments score or um, change color or uh, subtract, you know, value if it's maybe like a wallet app or something. Right? So you're never having that child component actually reach in and change the state. The child component is calling a function that tells the parent, Hey, you should change the state, you should set the new state.

Speaker 2: 36:01

I have new information for you and you need to process it and tell me what, tell me what that means.

Speaker 1: 36:07

Yeah, pretty much. So the, the reason for this is that you don't want to have multiple child components that, that might need to know that score coming back and setting a new score and maybe because of some, some bad connection or because of something happening, one referee gets there a little bit later than he should have and tells the wrong score. So, you know, I'm, I'm extending this analogy a little too far, but say when, when referee is just a bit of a slower runner and he, he gets to the scorekeeper and he says score is 10 12 after the other referee already came and said the score is 1212. So you now have this, you now have this thing called a race condition where you have data that's not matched up to what it actually should be and you can avoid this entirely by just having the increments score function add to the score that is kept inside the parent. Got It. Okay. So, um, with with, with race conditions, it can get kind of bad because child components might have outdated data. Okay. So if they are updating the state themselves, they're going to do it with, with some bad data. Right.

Speaker 2: 37:20

Makes Sense. Yeah. No, it makes sense because I'm thinking of the referees and I'm seeing them walk over to the scorekeeper. I'd say like someone scored a point plus two and then another referee goes over and says they scored a point plus two. The scorekeeper then gets all of that information, processes each bit of it, and then spits out a new final thing.

Speaker 1: 37:39

Right. And then, and then the scorekeeper will give that new data to the referees. Yeah.

Speaker 2: 37:45

It's sort of, it's sort of in a very elementary way how the blockchain works. Okay. But that's a whole other episode.

Speaker 1: 37:54

Yeah. I'm not as familiar, but yeah, no, I kind of see what you're saying. Yeah.

Speaker 2: 37:58

I like, I don't know too much about blockchain, but the best analogy for that is, uh, you're in a room like a, like a theater and there's an accountant at the top and the accountant says add 10 points to Joe Smith and then all the other little accountants in the theater, right. Plus 10 plus 10 plus 10 plus 10 plus 10 plus 10 plus 10. But that's something else entirely.

Speaker 1: 38:24

No, but I definitely see what you're saying, right. You can really see the need to avoid a race condition in something like a voting app. Right? So if you, if you have an voting app and you load it and you kind of take your time with voting, um, and in between you voting and or sorry, in between you, you loading the page and you clicking send, say a hundred people vote in, in between that time, right? If your APP sends back, here's the new vote totals, right? This most popular fruit and you send back numbers of there are a hundred votes for bananas, 50 boats for apples and 30 votes for peaches. If you send all the, all those number back, it totally wipes out all the hundred votes that came before. But if instead you just send a plus one for bananas, then it can update with all the other hundred people that have voted. Definitely felt for banana. Yeah. I mean cause you know so much about it. I mean

Speaker 2: 39:25

next episode, bananas,

Speaker 1: 39:26

next episode, that's going to be the big one. It's going to really put us on the map.

Speaker 2: 39:31

I learned this this week. I went to a sober ladies happy hour with a girlfriend of mine. Nice. That was a woman there that made Kombucha and she gave a talk about what Kombucha is, how she got started and Kombucha has a a very trace amount of alcohol in it and she said it doesn't have any more alcohol than a very ripe banana. Wait what? Yeah, it's very ripe. Bananas apparently have like, cause that's what fermentation is. That's what ripening is.

Speaker 1: 39:56

So finance, that's why people love banana bread. Any way that the kids are going to get drunk. I hope so. Yeah. Yeah. The kids are going to get rid of that. Nay, nay, nay. Nay on Ben Ne Ne Nice. It's like the new bath salts. Yeah. Actually what's going to happen at all, but all of our listeners now are just picking out rotted bananas from the garbage. Yeah. Gross. You did. Sorry. Yeah, so basically prompts in state our state is, is the data that a component has prompts or the data that has been passed down to a component and they all revolve around this idea of one source of truth. You want it in one place and then that person can distribute it from there. Or sorry, that component be going back to the analogy. That component can distribute the data from there and chartered components can tell it to update its state by calling functions that you also pass down. So like you've given that referee the ability to add to, to the score, but he's not actually allowed to go over and manipulate the score himself. Got It. Okay. Cool. So, um, react also has event handling and that's kind of what I talked about earlier with javascript where, uh, so the javascript will listen to certain elements in the dumb to see if they were clicked or if something, you know, if you scrolled on something, anything that happened there or if you moused over it, that's now like all inside react. You, you just have it right there inside the jsx so that if a user clicks on something, you can just fire off the function. Um, and all different kinds of events that you can handle just within JSX, um, to make your app nice and interactive. Right. Another big thing with react is routing. So here's the interesting thing with apps or, or with what are called single page apps or spes, um, like angular, like view, like react. These are actually all just getting injected into one html file. And as you click through, like as you move through Trello board or as you move around Facebook or as you move around any of these react apps, you're not actually changing and loading new html files. The react is simply with javascript swapping out the html elements that are in the page. But if you look, you're not actually changing and loading a new page, you're just, the entire dom isn't refreshing. It's just navigating you around the page so it doesn't have to wipe out all this stuff. It just quickly loads in new content. Right. Gotcha. Yeah. So because of that, you have to have almost kind of a trick to how the, the, the website works because nothing's actually changing as far as the html page that's being referenced. But you still want users to be able to go to El forward slash or I'm using your name but it, but it sounds like a ladder. You still want users to be able to go to um, you know, a Troast forward slash about and see something different than just what would be at[inaudible] dot com. You still want that, that URL routing to work the same way and you still want it to work if they click the back button or the forward button. So you need to kind of add routing to your site when in normal html it would just kind of work that way. Right? With normal html you just have an about dot html file and that's what's called and sent to the user when that link is clicked. So with this, you add an add in, some routing to make it so that you can move around the page, you can type in the URL and get to where you want to go. Um, but you still have that quickness of a single page app so that the page isn't really re loading the entire APP. It's just swapping out the parts that need to change because of the way react works. Right. Does that make sense? Yeah. Yeah. Yeah. That makes sense. So once again, it's the same. It's a single page app, just one page. But we want to make it feel like there's all these different parts to it. Gotcha. So it's all one actual pages, just changing stuff on that page. Exactly. Yeah. So it's kind of like you, you swap out the guts of it and put new stuff in there. Um, and it saves a lot of time just because they didn't have to call for a whole new html file and go back and talk to the server in a slow and long way. It's, it's just much faster with javascript. Yeah. And that makes actually a lot of sense with the basic core thing about react is where it's only changing what changes not re rendering the entire page so that you make that actually makes sense with what free act is designed to do. Right? Like why would you throw away the header and the footer if they're not changing? So there's just a lot about sites that that don't change in between page loads. So why bother? So, um, I'll send you a couple of sites a little later that have react and as you click around and navigate through, you'll notice that the icon, uh, the fave icon never actually like changes and disappears. You won't see that loading circle in your browser. It's pretty cool. Okay, Gotcha. Yeah. Another big kind of concept here is lifecycle methods. Each component has what's called a series of lifecycle methods. So a component kind of gets attached on the dom and you know, if you navigate away from that page, it gets removed from the dog. So you can kind of cue into when this element comes on and, and it's, it's, it's added and when the components removed or when the component updates and all these different things, so that if you have, let's say like a Twitter widget, right? And every, every time this shows up on the page, you want to make a call to the Twitter Api to get all your tweets back, to display them on your page. Every time that component is added onto your page, you're, you're going to want to send that call, right? And maybe you send that call every five seconds. So you set a timer that checks to make sure that you're not behind on the tweet. So it keeps checking and checking and checking. So you want to start that five second polling when it gets added to your site and then as it's getting removed, if, if, if they navigate away from your, your Twitter component, right? You want to make sure that you clean that up and that you remove that every five second call so that you're not still calling for that. Gotcha. Okay. Yeah. So re re re react gives you a couple methods or functions, right, that allow you to cue into what's happening with your component and act accordingly. Once called component, we'll mount that happens right before the component is mounted onto the dumb component did update. So if something changed about it, that'll fire off and maybe you want to check for something or, or you, you want to let something else know that it updated component did mount that will fire right after it. It's actually attached on the dumb and component will unmount that that happens right before it. It gets removed from the dom so that you can clean up any kind of functions that are ongoing or just do anything that you want to do when it gets removed. And there's a couple more, but those are kind of like the main four that you might use. Gotcha. So that's kind of like basics of react. You might have also heard of something called react native and it's actually a little bit different only in that it is not so much for Web apps, but it is you using the same react syntax and everything to create mobile apps for Ios and android. And the Nice thing about it is that it allows you to use kind of the same design and same syntax, the same kind of logic as you do in react. So that if you know how to create react apps, you'll be able to create a react mobile app. And the cool thing about it is it, it compiles down into native code. Sorry, it compiles down into native code, which means that it's not, um, like, like a lot of these things they just make like a crappy shell over like a website. So like it feels like it's an app a little bit, but it's really just a website and it's, it's, it's not good but react native actually compiles down into like Java or into I'm swift. Gotcha. Okay. So is that, do you have to build two separate things and two separate frameworks? Good question. Yes. So unfortunately you just can't take your, like, like say you just made a designer clothing web app in react, you can't copy and paste it into like a react native project and have it just compile into an Ios APP. The, the, the reason is because with react js you're using a lot of things like h one elements are dibs and all those things that, that are very specific to the web, right? Like two browsers. When in react native you're using specific things for Ios and for android it's just you're using the different elements, so, so it's not one to one. There's just like, it's just a separate thing, right? Yeah, but, but there's a lot that you that you can reuse. It's just not going to be a one-to-one. Exactly. So kind of from here, it kind of went to point you in the direction of like, all right, I kind of understand what what react is. Now how do I learn? Right? So kind of get html and javascript under your belt a little bit. Be familiar with it, especially with html, just to kind of understand how to put things together with with this and Hetero elements and all that kind of stuff. And then get a bit of javascript under your belt, just so you understand. But really a good way to go is just to start with the official reacted Loreal, and that's over@reactjs.org actually a surprisingly good tutorial for like being the official one. You know what I mean? It'll be to walk you through a lot of the basic elements of react. A lot of the things that I talked about and kind of show you step by step. I think you make like a tic tac toe APP. So it kind of shows you all these different steps to how to make that and how to make it so that it updates and it's, it's a lot of fun. So that's a great way to start. Highly recommend free code camp.org they have reacted loreals now so you can kind of go through that and uh, it's totally free. It's a great community and everything, so they're pretty great. I learned through you Udacity and a lot of uh, you to meet tutorials and also a sites like[inaudible] dot com and there's a whole bunch of stuff out there, lots of good places to go. But how do you recommend just to get your feet wet with the reaction tutorial@reactjs.org that's so cool. Yeah.

Speaker 2: 50:54

Yeah. Just breezing through this react js.org it's pretty robust. There's a lot here.

Speaker 1: 50:59

Yeah, no, it's um, it's really good documentation. They update react a lot. So it's kind of tough for them to fully stay up on it. But um, as especially cause it's just an open source thing, like other people are adding stuff to it all the time. Yeah. I mean react is really well supported with the community. It's the incredible community. People are adding new things, new libraries, new like it's, it's just such a growing community right now. It's, it's incredible to watch it just like take off. That's cool. Yeah. Wow. Um, and just a quick list of like who uses react and just because you know, everyone wants that kind of like social pressure, not, not, not social pressure, social, like a stamp of approval kind of thing. Right. Like, well if they use it, it must be good. Um, Facebook, Instagram, Netflix, read it in New York Times, Khan Academy, Dropbox, Airbnb, Trello, fiver, a sauna and a lot of other ones. So it's an excellent, excellent Ui library on your website. I used it on my website.

Speaker 2: 52:06

That's cool. Okay. So what made you want to use that versus any other

Speaker 1: 52:11

platform? Mainly it was the one that I knew, but also I use a static site generator called Gatsby that runs in react or, or uses react to run. Right. And I'll definitely get into that because that's a, it's a really fun framework. Yeah. It's, it's uh, yeah, so static site generators are kind of a whole different thing. I don't want to overwhelm everybody, but Gatsby is this great static site generator that's built in react and uh, yeah, I wanted to use that. Makes your site super fast because it uses, reacted also uses a lot of other logic that makes for a great developer experience and a great user experience too, so. Right. Cool. Any, uh, any final questions? Anything that I'm not or that you're not too clear on?

Speaker 2: 52:54

No, I think I, I think I got it. I think I struggle because I don't really fully know what Java script is in the real, I know what it is in the abstract. Like it's the thing that makes the website do things. It's just a programming language, right? Yeah. I get that. I get that. But like in a, in its use. I'm not fully, I don't have a full understanding of like how it's used, how I could learn it. So that's something that I am definitely interested in doing.

Speaker 1: 53:21

Maybe you should do the tutorial and we'll have a follow up APP. I am going to

Speaker 2: 53:26

maybe maybe we have another APP. I like it like part two of this episode where I go through the tutorial and try and be like trying to explain my process of learning. It may be cool. This could be our first two parter. First to be continued. Banana Banana apps is going to be like a good three or four episodes you think? Oh, I think we could get a good, a good three episode arc out of that. Especially if you know, as we're doing it, we're just eating ripe bananas. Oh and we are recording with our mouths full. Yes. And just drunk eating bananas. Perfect. Just wasted banana, alcohol and alcohol that, yeah. Really top quality audio content here. The Bananas Chewing. Yeah. It's not, it's not a good mental image or whatever you wanna call it for audio. I personally don't like when bananas are too ripe like her too sweet in a way. Gotta be that kind of perfect yellow, right, like not too green and you can't eat them like before they're too ripe either. Like it's you have to hit it. It's like an avocado. You got to hit it right on the money and then you walk into the next day and they're all just brown here. If you miss your chick, like you've got to eat bananas in a day, you really do. It's stuff we are just wasting content because this is all golden for that next episode. But super just a preview for them. I think we just got a lot of subscribers. People are just like, well I can't miss that. So thanks for subscribing. Yeah, thanks. Thanks for tuning in. Center react or bananas on Twitter. Maybe you have an APP, a single page APP. Make an app about bananas and send that to us. I would be overjoyed. Even if it's just tic tac toe with banana emojis. Ooh, I like that. Or maybe it's an APP that tells you how long have banana will take to ripen. Uh, that's$1 million APP. Cause I mean, yeah, I was just saying like put a banana emojis in for the react to tutorial, but you're asking them to like do rocket science. That's impossible. It's impossible to tell. No one could tell if it doesn't exist yet. It can't possible. So thank you so much for tuning and then yeah, send us your questions and your comments to us on Twitter. I'm at lovelletters co and I'm at Mr Troast. For more episodes in our show notes, you can visit us@overlappodcast.com. Thank you so much to a alto. I'm free music archive for our show music. Smash that subscribe but smash or is it mandatory that people have to say that? Why is there no other verb for what you do to that button? Even watching people that I like respect, everyone's just like smash it. Like I forget what it was, but I was like, all right, this is a pretty, oh it was hot ones. It was the chicken wing guy. You guys know what I'm talking about with

Speaker 1: 56:24

the, uh, the guy who eats chicken wings with celebrities and all the celebrities like can't take the spicy wings. I don't know about this at all, but it sounds wonderful. All this is pretty great. All of our listeners know it's, it's, it's a pretty good show. But even at the end, that dude who like seems like a pretty cool dude says, smash that like button. I'm like, buddy, this isn't like Logan Paul. Come on. Yeah, smash it. Don't just press it. Don't just touch it. Don't just poke it. Smashed it. Smashed to Smithereens. Yeah, I don't, yeah, that's not. So going back to react at that is not one of the event handlers. There's Unclick, there's not on smash. That's not a thing. So there's not on smash hold on. Growth Mindset dog. Oh my God, that's true. I've got to get back on my growth mindset. It hit us up on your pod, catcher of choice and leave us a review. If you hated the show, you could also leave a review. So Mia, gripe here, grapes send, send us your grapes. We'll see you next time. Thank you so much for tuning in. See you.