This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> Beyond that, that is the conclusion to the lessons part of the complete intro to react v6. So let's go ahead and take any questions you have about anything about react. And then we can we can chat a bit about that. So yeah, let's go I can definitely think of some use cases for portals beyond just modals.
[00:00:24] The one that I like the best, that's probably a much better use case for is like, imagine that you're on one part of your website and there's a contextual sidebar, right? So maybe I'm on the Well, I mean, the Microsoft docs are a really good example that when you're reading an article about JavaScript, the sidebar is all articles related to JavaScript, right?
[00:00:48] And then if you navigate to a different part of the application, it's about dot net stuff. It changes to be about dotnet stuff on the side. So it's like a contextual sidebar and it's a perfect use case for a portal, right? So you have like the main component, that's rendering whatever you need to from the article and the neck that can have a portal over to the side of like, okay?
[00:01:10] Here's related articles to the thing, I'm talking about the, and then you can have like five of those right? You could have a contextual sidebar, a contextual navigation, a contextual footer, all those things and they can all be portals that are driven from one part of the the application.
[00:01:25] Does that make sense? I like that. Like I think that's a really good use case for portals. So the question is, can I think of other use cases for context besides CSS up. The answer is yes. And the one I showed you is probably the dumbest one, if we're being honest about it, it was a simple way of teaching it but you have to think about it.
[00:01:47] Things like what our application state like what's universal to your application things like what user is logged in. I don't know other things that are gonna be like universal to your entire application. But let's stick with the example of a user logged in. Right? So let's say in the top right, I show that my user is Brian Holt and he's logged in, and then they scroll down the page a little bit and like, it's like Brian's profile.
[00:02:11] So I'll show a bunch of stuff there. And then I scroll down to the comments section and I'm gonna show my picture and my preferences for how I'm gonna comment on the page. That could all be in context because I have multiple places in my application where I'm reading from that context.
[00:02:26] So that's what you wanna think about with context is like where and how am I gonna be reading from this. And if that's everywhere in your application, then context is a good place for that, if it's just like one or two places, then have that live in a component and then have that component pass it down to its children.
[00:02:46] So I think the question here is let's come back to a code for a little bit. There's a theme context, our consumer here. This only works in class components right, you wouldn't do this inside of, it actually might work inside of a. So it probably actually would work inside of a function component, but not vice versa.
[00:03:05] You couldn't use a hook here. Don't do it this way. If you're in a function component, please use context, right? But so there's theme context here. And then the other place that it gets used is details. Were in details. The other one that is search params. Here, we're just doing use context here, which is up here, right there.
[00:03:33] This is just the hook version of that, right? So underneath the same machinations work, they're both contexts referring to the same context once just using a hook to do it. One is using a higher order component to do it. Yeah, otherwise they're the same. You just can't use hooks inside of class components, right?
[00:03:56] Like just really drill at home if I go here to search params, I can't say use state right here. In fact, it'll yell at me if I try to. Wait, I'm not. That's funny, search params is one I was talking about details. They gotta details here and inside of the render function, if I say use state right here, it's gonna be upset at me for a number of reasons.
[00:04:28] In fact, you can see here react hook use state cannot be called in the class component. That's one of the helpers from react hooks, rules of hooks, it'll actually prevent you from doing but is there any performance considerations to class properties? And the answer that is no. It gets transpiled to a constructor actually.
[00:04:47] So, no, it's totally fine to do it that way. And for that matter, not with JSX either, right? JSX just gets transpiled to create Element calls. There's no performance hit there either. You just drink from the fire hose today, I understand that being a bit facetious, but it is information overload.
[00:05:11] I'm a little cooked up here as well, so I totally understand how you probably feel as well. A lot of this is just being exposed to it and then re exposing yourself over and over again and if it feels like it's hard it's just because it is hard right and so ,I'm trying to consume something that I've been doing for seven years in my career in one day is difficult right.
[00:05:33] So please allow yourself the leeway to feel difficulty and to feel tired and upset and just wanna go home and, I guess probably many of you are home at the moment. But to continue being at home and not listening to me all these are totally fine emotions. If you can be upset at me.
[00:05:50] You can tweet angry things at me I will not be super cheeky back to you, maybe just a little bit. But yeah, all those are totally find things to feel like it's okay for you to not totally get this all at once. But I think it is a useful tool and I'm hopeful that this will be helpful to you in your career or whatever you're doing with with JavaScript.
[00:06:14]
>> Hey, quick question for you, Brian. I gone through your V5 of this and now this one and I know you showed us both a functional way of doing things in a class way. But if you're just sorting maybe, preferencing one of them if you're starting out, which one would you sort of go with?
[00:06:29] Should I just start maybe, working with classes or functionals? Wait the first just to start out?
>> Yeah, good question. So if you're just starting out, which one should you start out doing? They both have some oddity to them. Like one thing here is like this right in class components.
[00:06:48] Like here, we have to say like this dot set state. And we had to use an arrow function to get that correct. It's weird, right? It's you have to know what this does in JavaScript like it's a weird question. What does this do? By the same token, if we go back to search params We have this async function that we're creating inside of search params.
[00:07:10] And by the way, if we move this outside of search params it no longer works because setPets is coming from inside of the function. This is closures, right? And so that's kind of weird to deal with because closures aren't necessarily intuitively obvious all the time. So you're trading one set of weirdness for another.
[00:07:30] Do you wanna deal with this? Or do you wanna deal with closures? And I don't really have a good way to respond to cuz they're both weird. I'm gonna go ahead and say that most people are starting out with hooks and there's a reason why I tell you hooks first is because I do think it might be the slightly easier one to deal with.
[00:07:49] So if I'm gonna encourage you to go one way or the other, I'll probably nudge you towards hooks just for a myriad of reasons. This reads easier the first time. The closure stuff is nuanced, but usually pretty gettable. And the other thing is whenever I start a new component, you probably saw me right away, I just say const new component Equals, Turn each one, right, like I start out with function components cuz they're just shorter to write right.
[00:08:23] And then that lends itself really well to bringing in hooks because it's the logical progression on top of that because refactoring the classes just takes some doing. So I'm giving you a very weak direction to head towards hooks, but you need to trust yourself more than you trust me on that.
[00:08:41] Does that answer your question?
>> I think so, thank you.
>> Cool. Other questions? Okay, I'm gonna head back here and just kinda start wrapping up here a little bit. So the end of interests where we are here I've taught you basically everything about the core react library.
[00:09:06] Like there's not a whole lot left. There's some additional special use case hooks. There's some more component life cycles, but I've actually exposed you to everything and I've left you documentation on all those things that you might need. Also, if you go take the intermediate react course, it's gonna teach you more in depth, all the hooks.
[00:09:24] We get into some more advanced use cases as well. It's more the ecosystem around react, things like tailwind and type script and server-side rendering and code splitting and some of those things. That's all covered in the intermediate react. But you today have been exposed to all of the core library or at least 99% of what you're gonna need to go do, go build cool react stuff.
[00:09:53] But all beyond that, like congratulations, it's difficult and you made it this far. I'm proud of you, like a proud dad. Just kidding. I mean, I am, I am proud of you. Maybe not like a proud dad, that felt a little weird to say, so I'm gonna walk that one back.
[00:10:11] I did wanna leave you some expansion points, right? If you're interested in hey, I wanna go try some more stuff on my own, leave me some points to go do some more cool stuff. If you click here on the ways to expand on this project, one take the intermediate course I'm going to teach you a lot more cool stuff.
[00:10:29] One, there are like, more results. So if we look to our dev API here, and we just say pets like this. You can see here there's 63 results and I'm only returning the first 9. If you say page = 1 because it starts at 0, you'll notice it will get more and again, two.
[00:10:53] So one thing you could definitely do is go and paginate the results, that would be a really good thing for you to go do. You can use a real API. So in previous versions of the course, we actually use the Petfinder API. So I left you some notes here of how to go do that.
[00:11:11] You're gonna have to go modify a lot of things. It'll be a good learning experience for you. But you'll have to go create an account with Petfinder, you have to get some credentials from them. And then you can use their JavaScript SDK instead of making those fetch requests.
[00:11:24] And yeah, then you can actually have a real pet adoption app that you can actually adopt pets from, which is pretty cool. So that's one of the things you can definitely go do. You can deploy your code, and I left you some example places where you can go do that.
[00:11:40] That's always a good thing for you to learn how to do. You can use this theme selector more places, like for example, those modal buttons would be a good place to do it. You can add a navbar you can go play with some other tools like, I don't know, like snow pack or Webpack or anything like that.
[00:11:55] Those are cool things you can do as well. And lastly, I just wanna let me know if you go build cool stuff. I have created a repo here, where you can actually go just leave your btholt.JSON. Just let me know what GitHub user you're doing, where your code is where your URL is, and I'll merge it.
[00:12:15] And we can keep track of all the cool stuff we're doing together and we can maybe like make like a little gallery out of it or something like that. In any case, please tweet at me please let me know what you thought about it. Please let Frontend Masters know what you thought about it.
[00:12:28] And, yeah, cool, thank you. Thank you for coming to the complete intro to react version six. Hopefully this was helpful for you and, yeah. We'll see hopefully in the intermediate one and then eventually in the seventh version of this