The concepts that React got built upon don't just apply to React code. Joel talks about how he taught the React style of componentized code, but using Angular in the workshops he has run.
- The Beginner's Guide to ReactJS
- Advanced React Component Patterns
- Learn ES6
- React Documentation
Kent C. Dodds
John Lindquist: This is an Egghead.io podcast on Transducers, with Paul and Brian. All right, I'm in here with Joel Hooks and Kent Christoper Dodds. This is John Christopher Lindquist. We're going to go ahead and introduce ourselves first. We're going to have Joel, go. Joel, what's your experience with React? What have you done with it in the past and anything about yourself that's interesting?
Joel Hooks: Yeah, that's a tough one, interesting. So, with John, I co-founded Egghead.io and it's built on rails, but over the last year we've switched it over to, for the most part, being a React front-end which has been a very interesting experience to move from the world of templates into an API-driven React page. So, we've been busy at that and then kind of building the features and stuff that you see on Egghead and building components and spent a lot of time in React over the last year and really love it.
John Lindquist: Sweet, Kent?
John Lindquist: Are you guys soulmates now, you and React?
Kent C. Dodds: Yeah.
John Lindquist: No, I love when people find technology they love and it's something that they feel they can evangelize and get behind. It's great. So, yeah, tell me more about that first experience with React. When you first started playing with it, was it the automatically fall in love with it or was it "Wait, this is so different than the directives and components I'm used to?"
Kent C. Dodds: Yeah. It was kind of like a mixed bag. When I first looked at it, I was kind of thrown off like everybody else, I think. I was thrown off by the JSX stuff. Screaming in my head was this separation of concerns, which is something I didn't actually understand at the time, but thought I understood a little bit. Then Hunt gave a talk at JS-Conf in 2014 or something where he kind of picks apart the separation of concerns. I think that was really good talk and that smoothed things over for me.
Kent C. Dodds: So, when I finally actually tried out React-Fold, along with the docs, there was one section in the docs that said give it five minutes. I was like, "Okay, I'll give it five minutes." And it was literally five minutes in to trying out this JSX thing. I was like, "Oh, yeah, this is awesome." I was really heavy into Angular still and this was like late 2014 I think. Actually, if you go back in my Tweets around that time, as I was reading through the docs, there were just a whole bunch of hidden gems in the docs of good software principles that I just thought were so good.
Kent C. Dodds: So, I Tweeted out quotes from the docs, which was not easy to do back in the good old days of 140 characters.
John Lindquist: Oh yeah, a long time ago.
Kent C. Dodds: Yeah, it was not easy. But I was just really impressed by the principles but it still was another year or so before I started to actually use React regularly. I was still very heavy in to Angular One and loving it there. I finally, totally switched over when I started working at PayPal. That was actually part of the motivation was ... The job I was at, there was no way we were going to be able to rewrite or even start using React. So, I started looking around because I really liked the idea of using React for my day job and found PayPal. So, anyway, now I'm doing React and that was about two years ago.
John Lindquist: It's funny for me, because I was doing Angular, too. Angular, also but I saw Pete Hunt actually give a talk at Strange Loop and it was the first time I really looked at React and was like, he's amazing. You can watch him talk and he'll convince you that, "Hey, just give it a try." And at the time I was like, "Huh, that's interesting. I knew there was something there, but the Thinking and components, that article that was in the docs, was like this is really how I feel you should be writing software. I actually took that and while I was giving Angular training for a year and a half, two years I'd reference that document. I'd be like "We're going to build our Angular directives in this approach.
John Lindquist: We're going to use components and we're going to do it in this of react style component architecture and it worked really well there and to me, that was the big thing. We're thinking about components, we're composing things and structuring our application in this component driven so we have these independent, everything's a component and the application's just a big component and that's all the way down to the bottom. Like I still to this day love that and Thinking and Components that article was really something that stuck with me and almost changed how I thought about developing applications. This was pretty cool.
Kent C. Dodds: Yeah, man. I felt the same way and it changed ... I remember tweeting something like just trying React out for a couple hours has made me a better Angular developer or just a better java script developer because applying those same principles in my angular stuff. Actually, kind of a funny story, during this period of time that I was starting to like React a little bit, I proposed a talk to Jay Focus, which is in Sweden. I wasn't aware of that at the time that I proposed, but it was a talk that I actually ... It was using React inside an Angular application was the title of the talk. I had never actually done that before, but I saw a video on Egghead where, oh shoot. Who Was it? Joe did that in a video on Egghead. He rendered a D3 chart with React inside of Angular or something like that. So I was like, "oh dude, I could make a talk out of that." And I got my first international speaking gig, but still having, not ever actually used React seriously. So yeah, it's kind of funny.
John Lindquist: I think it's cool seeing the evolution and the velocity ES6 kind of going alongside of React at the same time where like Angular 1 was ES5 and everyone was still doing the ... everyone was writing regular functions. No one knew what object spread was, and then it seems like React helped push ES6 forward, even that, you know, it's pushing features forward because people want to write in a more functional components style and seem in your intro course, you almost take for granted that you're doing an object spread on with prompts or that you're writing the Arrow function. Like that's so natural for you now whereas it's just ... how many years ago or last year, that's brand new stuff. But for people just starting out now, they get all these helpful features that are [crosstalk 00:08:04].
John Lindquist: You probably [crosstalk 00:10:06] or something.
Joel Hooks: Yeah. We had the transition at Egghead, right? Because we're recording video and video just by its nature, it's immutable, right? We can't change it but at the end of the day, once you record a video it's a pain and like text or whatever. So it was like ES6 comes around and we're like, "Well, what do we do?" And the general rule is we use ES6 and it doesn't become normal and people don't get used to it until [crosstalk 00:10:32].
John Lindquist: Yeah, with tracer. I recorded all those tracer lessons [inaudible 00:10:36].
Joel Hooks: Yeah, exactly. Like how do we be part of the solution. Because there's a lot of places you can go learn to Code Java script on the Internet that are still using the old syntax and not using the new syntax and that's fine, but at the same time how do you push that forward? You have to be vocal and kind of stick to it, but then also at the same time provide the resources and help and understanding that folks don't know this and they might need some extra help so we can push the envelope that way too.
John Lindquist: Yeah. I think Kent, what you did was it was perfect. You have to treat that. If it's a language feature, you have to treat it as a normal thing and make that assumption that this is what Java script is. We use const now, we use objects spread, we use Arrow functions. That's just normal things to do that normal developers do every day and you don't pause every time and say, "I'm going to write an Arrow function now. If you haven't seen it before, it's just like a function and it automatically returns." I think the more you do that, the more you turn people away from it. That it's some weird thing that they don't need to other with.
Joel Hooks: There is of course, an Egghead course on learning ES6 that covers the new feature and it gives you a nice little translation to [inaudible 00:12:40].
John Lindquist: Kent, you want to talk about some of the goals of the beginner course, where people like [crosstalk 00:12:50].
Joel Hooks: Kent has two new courses that he's putting out on Egghead, one of them is a beginner's course. So like you mean jumping right into React with without a bunch of prior React knowledge and then an advanced component course, which are both excellent.
Kent C. Dodds: Yeah. Thanks Joel. My goal of the beginner courses that like, lots of times I'll see "beginner courses" for React or beginner material and they jumped right into custom components and state management, and sometimes they even include something like Redux, which totally blows my mind. Why would you teach a brand new beginner Redux?
Joel Hooks: To make them sad?
Kent C. Dodds: Yeah. So the goal of the beginner's guide to React is to start right from square one and to not have any superfluous tools. So the entire thing is like every single lesson in both courses with the exception of one is an index html file. So you can literally copy, paste the code into your text editor and pull that up in a browser and it'll work. And so yeah, you don't need Webpack or even create React app as easy as that makes things. It's still a barrier to people's learning and it's just an extra abstraction. Uh, so it's all just one file.
Kent C. Dodds: And now let's refactor that too React's APIs which provide a couple [niceties 00:14:54] there. Then we'll refactor that to JSX and I have a lesson all about what JSX is? How it differs from regular html? I show what the [inaudible 00:15:12] Transpiler does to the JSX as well. So I feel like it's more beginner than most beginner courses that I have seen and so that's why I created it because I feel like people need ... It's not just like people need to be able to write React components. I want people to understand what's happening when they write JSX and what's happening when they render certain things and why you need a key on an element when it's rendered as an array. What does the key property do and what happens if you don't include the key, what do you use for the key, those kinds of things which I think are a mystery for even advanced React developers. So getting this really basic fundamental understanding of what React is, what it's doing was kind of my goal for [crosstalk 00:16:10].
Joel Hooks: It was funny when you pitched it. I was like, "Well, that's kind of nuts. Like why would we do that? Why won't you just use create React app?" It's there, we can use it and then as I watched it and then like took a second to listen to you and understand your motivations, I was like create React APP, it's wonderful, right? It's a wonderful software. Dan Abramoff gets to maintain my build for me and that's how I look at that and that's fantastic. I still actually understand what's going on with create React APP. Then sometimes when you've been doing this for a while, you take that for granted, right? Like, I get it, I get Webpack, I get, [inaudible 00:16:45], I don't want to do that, right? I don't want to maintain that or I know when I need to inject or whatever.
Joel Hooks: But when you're starting that just ... it looks simple but it's not, it's just easy, right? Like typing, create React APP is easy, but it's intensely complex where when you take this approach where, "Hey, I just start with a blank page, here's some html and I'm going to drop a script import in there and we're going to go to town and write some React without all that complexity." That is truly simple and it's actually a pretty nice and takes a lot of the initial kind of fog of war dissipate for you.
Kent C. Dodds: Good. Yeah. Thanks Joel. I'm glad to hear that feedback. Yeah. So I do understand and realize eventually, you are to want to ship something for real. I mean, most of the little toy apps that we build like that people are using create Ceact app to build, they could probably just use an index html file and to build those little toy apps. And honestly, I don't know why we don't because yeah the experiences is pretty good. But in any case, there's actually a tool that sits between index html and create React app that I think is just so good and it's code sandbox.io.
Kent C. Dodds: So for the last lesson in the beginner's guide to react, I show you CodeSandbox IO, what its role is in your development workflow and how you could actually build and deploy an APP all right within CodeSandbox. And then you can ... if you really want to get serious about things and like have a team work on it and whatever, then you can, you can pull it down and what it gives you is actually create React App. So you start with your index html, you build something, a little prototype, then you want to share with people or something. So you go to code sandbox, you copy paste all this stuff into CodeSandbox and then you want to like really get serious about those. Maybe you want to inject or something then you pull it down and it's just a create React app for you.
Joel Hooks: But export to GitHub too, which I think is pretty new. I saw something just in the last couple of days where you can push a button and then all of a sudden you have a repo and you're going to town and have version control. It's like what?
Kent C. Dodds: Yeah, man. I actually just used that last night and I'm totally blown away. You can make commits, you can make pull requests. You can do all kinds of stuff. So, like now I'm thinking maybe I should get that pixel book from Google and I don't even need a local environment anymore. [crosstalk 00:19:36].
Joel Hooks: That's when the dream, I've seen developers wishing that they could do that, that they could just have the Chromebook or the new pixel book or something and it's all in the cloud and you're just going to town and developing. They've been doing cloud IDs for a few years, but it keeps getting closer and closer and especially when you have people doing the innovative work that I think CodeSandbox is totally doing. It's really pushing the envelope of having this online code being type thing and it's just great to see that, that could be a reality. You can have this ultra light thing, you can just fire it up and code anywhere, fix a bug or do whatever in the environment that I'm really just functions as you'd hope it would.
Kent C. Dodds: Yeah, exactly.
John Lindquist: It's funny thinking back to like you started the course just writing html. And it's funny thinking back to actually writing html and using jQuery with selectors to add functionality to little pieces of the DOM and it just, so how it's flipped it on its head now and my index html pages, one div with ID on it usually, and then all the script tags underneath it. That's all it is anymore. The change we've gone through over the past five, 10 years, whatever it's been, and thinking about what that could turn into in the future blows my mind.
Joel Hooks: We're building applications now.
Kent C. Dodds: Yeah. It's not like a little page that's rendered on the server and sprinkle a couple interactive pieces and then full page refresh everywhere you go. But it's an actual full application running on the client. So yeah, sure. Things are going to be a little bit more complicated, but that doesn't mean that like when we're getting started into it, it needs to be complicated.
Joel Hooks: I still want to call him rich internet applications sometimes. I don't because [crosstalk 00:23:07].
John Lindquist: So let's talk about some of the advanced stuff. Before we get there, what have you seen during the history of react? Do you think there's like these patterns that have been discovered or were they always there and people just didn't use them because it seems like some of these higher order components and render prompts and all these things that people are talking about and using now, like a couple of years ago, it just wasn't ... It never even came up in conversation.
Kent C. Dodds: I can't remember exactly when React context was a thing, but I'm pretty sure that was like at least 0.14. So it's been a long time that you've been able to do all this stuff, but back in the day we had stuff like [Nixons 00:24:26] and that was the blessed way to create or to share code between components but then there were a whole bunch of problems with Nixon's and then ES6 classes were coming, and so they thought, "Okay, we want to get rid of this react.create class thing and just have people define their components as a class that extends the React component, a base class and then they can add their lifecycle hooks and whatever.
Kent C. Dodds: And then they added function components and oh, my goodness, that was really nice. Makes it a lot easier to just create one off components really quickly. So, yeah, like none of these patterns are ... They're kind of new, but they're kind of like discoveries of recent years. Just out of like necessity basically. When they were getting rid of create class, they needed a new way to share code and so they ... Sebastian [Markbash 00:25:31], one of the core React members just thought, "Hey, maybe we could use this thing." And it got called higher order components or just kind of a misnomer because the higher order component is a function which returns a component and neither the function ... the function is not a component and the component that it returns has nothing, like it's not higher order at all. So it's kind of weird, but that's what it's called.
Joel Hooks: For me, I always look out and all I can think of is the gang of four design patterns with a decorator and like it's this decorator pattern that we're using. I know decorator is a loaded term because we have decorators also, but that's basically what that particular piece does too. Right? Just wrap this thing and decorates it and makes it have new functionality.
Kent C. Dodds: Yeah. Exactly. So, so higher order components kind of took off and especially in lots of popular libraries, and so lots of people started using them, but actually there were a lot of fundamental problems with Nixon's that like even when we had make sense, we were like struggling with, and then higher order components solve some of those but aggravated a few and left several problems unsolved. So then, I'm not sure when exactly this was, I feel like it was quite awhile ago, but React to emotion came out with this thing called ... Well, I don't know what they called it at the time, but it's what we now know as a render prompt. And so for the like in React JSX, the stuff you put between the opening tag and the closing tag is called the children prompt and normally you would just put more JSX in there.
Kent C. Dodds: Then I think the first one to really call it a render prompt was, Ryan Florence. We had a Twitter conversation about it a while back but, anyway, it was kind of like, When you put a function inside of that children, it kind of breaks your mental model of JSX or html inside of the opening closing tank are going to put some more html look like staff or XML like stuff in there. And when you put a function in there, kind of is confusing for people. Ryan Florence, who's taught countless people in this particular pattern, saw the look on people's faces when he introduced it as the children prompt like that or as just an irregular prompt that you assigned to a function and he called that prompt rendering [crosstalk 00:28:39]
Joel Hooks: And you give it a name and people are like, uh.
Kent C. Dodds: Yeah. It was more straightforward for people. I think because lots of people still don't quite understand that that children area is just another prompt. So anyway, it eventually made its way to being called a render prompt. I used a render prompt for my library downshift and that helped get it some steam, get the idea some steam and then a couple of months later, Michael Jackson gave this talk basically saying, "Hey, never use a higher order component. You can always do everything with a render prompt. You never need a higher order component." And that, that I think is really what pushed the render prompt pattern forward.
Joel Hooks: This is the thing that I pass in and I own and control and know the name of. It really did. It pushed it forward and it's clear and just the flexibility you get versus you like you talk about a namespace collisions and that sort of things that happens with higher order components. And you used to avoid this whole multiple classes of problem if you approach it in this respect. And that's a really ... Honestly, I haven't done that a lot in my own code and having watched this, I'm like, I'm kind of eager to go implement and start doing it for some of the components that I've written recently. I can really use this and start doing this and like my code better, like immediately.
Kent C. Dodds: Yeah, that's what I hope is that people, after watching this are just like, "Oh, snap, that component I wrote last week, I could rewrite it as a render proper or use the provider pattern." Or, "Oh, I can use a state initializer here and that'll just make it so much better." I'm hoping that these patterns will make their components better and more flexible and ultimately make it more enjoyable to develop their applications. So that's good to hear Joel.
Joel Hooks: Yeah, I was on lesson three and I sent a message to John on slack. I was like, "I think I've already learned five things." Oh Man, I've been doing this for a while, right? Like I've been programming computers for a decade and I've been doing React for well, over a year and I've done this quite a bit and like watch this and really, really learn some stuff. So that's just cool. Like I did that when learning is one of my favorite things. So when somebody shows me something new, I think it's ...and especially when it rings true and ... it really did for me.
John Lindquist: So yeah, it's really easy to get comfortable with the way you currently do things and then just to kind of shut out new things.
Joel Hooks: My joke is they're all code normal which like I own that codenormal.com and normal's always relative, right? That's kind of my joke. I tell people to code normal and it always depends and normal in one organization or one individual is it's always different and totally subjective. But once you get into that, once you have what your normal is, you just kind of it's habitual. It's what you do. You wake up and brush your teeth and that's just how it is. Like to have it shaken up a little bit and then see something that's like, "Oh, if I did it this way, then everything's better. That's how it like the epiphany's of software. They seem to kind of be never ending to me. That's why one of the things I enjoy about it. It's like a puzzle that's always shifting and showing new facets.
John Lindquist: I mean, you'll see so many people fight against a JSX or a community fight against JSX and then finally they're like, "Well, I guess everyone's doing it and it's working for everyone so I'll give up that fight and people find that [crosstalk 00:33:02]
Joel Hooks: If you're still on the fence on JSX, it's fine. It really is. After like Kent said, after reading that I was like, "Give it five minutes." Like literally, it just goes away and the tools are there. At first it was like a string and it was really weird because the tools didn't support it, but now like it's like [inaudible 00:33:18] code and Webstorm and whatever your tool of choice is probably understands it and gives you code hands and all of those goodies and highlighting and it's the new normal. It's just how it is and I don't know. It's been been great for me. I like the shorthand and it really works out.
Kent C. Dodds: Yeah, definitely. Tools will follow good ideas, that's for sure.
Joel Hooks: Yeah, that's a good one. I like that.
John Lindquist: It'd be nice if tools stayed ahead of good ideas, but it requires some fortune telling.
Joel Hooks: Yeah, that's a real trick. I'd like to see that.
John Lindquist: All right. Kent, anything else you want to share before we wrap up here?
Kent C. Dodds: I think that's pretty much it. Again, the whole idea of these courses is I want you to come out of it a better React developer than you were before. And so even if you're not a beginner to React, I think you'll be able to get a couple of gems out of the beginner's guide because it really gets into the fundamentals of what react is doing and how the JSX stuff is all working. I think that's a really critical part to you understanding and being able to be more productive with React. Then the advanced patterns, I really hope that people come out of that making their components better and making it more enjoyable to work in their own components. I want to see a lot more open source solutions that use a render prompt to render an accordion or to make a date picker or something like that because I feel like this pattern makes it easier to make our stuff more generic and generally, useful and simple at the same time. So I'm really looking forward to these courses, getting into the hands of people who are going to build awesome stuff with it.
John Lindquist: And the beginner's course is interesting to me. Like even if you have experience like watching this, like the way you approach to teaching React and showing React, like as an experience developers, it's our job to show newcomers the ropes and this gives us this really super approachable way that you can explain, React and explain what JSX is doing. And demonstrate it without a lot of rigamarole to other people too. And it's always good to revisit your fundamentals, anyway. Thanks for listening. You can learn more about transducers from Paul and more about functional programming from Brian on Egghead.io.