 Hi there. Welcome to day 12. Just one hand. So a little trivia. I was wondering, I think either a year or two years ago, I was wondering for the 12 days of Christmas, do those 12 days count down to Christmas Day or are they after, like, do they start on Christmas and then go 12 days into, or I guess, into January, right? And I Googled it. I don't know why I hadn't before then, because it's something that I thought about like every Christmas. Anyway, so there's a holiday actually celebrated in a bunch of cultures called Three Kings Day, I think it's called. There's like a, let's see, Three Kings Day. Yeah, so it's going to be on Sunday, January 6th, and that is the 12th day of Christmas. So anyway, if you've ever wondered, like me, maybe you knew already, maybe you celebrate Three Kings Day, but yeah, that was news to me and I don't know. I thought I'd share it with you. Now, every time I think about 12, I think about Three Kings Day. So, day 12. Day 12. Congratulations. So, now, I was a bad student. I was editing and publishing an episode of React Podcast, our 32nd episode with Vincent Reamer. So I was doing that last night. Listen to it. It's really, really fun. He made this really cool app in React, which is a kind of really true 808 machine. It's pretty awesome. If you're into music production, you should check it out. Anyway, give that a listen if you want, but that is why I didn't get to the assignment that I gave out last night, which was to basically make a Pokemon. So mine is still boring. Hopefully yours is more entertaining. I was thinking that I might do on the weekend, since there's not going to be new information, I might save that for the weekend, maybe I'll livestream it. Who knows? But anyway, mine is still boring. I hope that yours is more exciting than mine. But even so, looking at this, and I have it kind of zoomed in so it's easy to see in a video, it's starting to get a little bit hard to find things in this code base. So, you're probably itching every time you're working here. Maybe you've already started to move things around for yourself. That's great. Totally. Take all the flexibility you need when working through these projects. But I'd like to show you kind of my take on how to modularize this code. To tell you right up front, I really strongly don't believe in the idea of one component per file. I think that it makes it really challenging to scale your application and move things around. So I'm going to show you something a little bit different, where we're going to clump things together based on cohesion, how similar things are to each other. And, you know, this might not be for everybody, it might not even be for you, but I want to show you how I think about code. Anyway, the code sandbox today is up here. I will post that on the YouTube description and also in the email. So this in code sandbox is our file system viewer. So we're going to move things into here. And I like to kind of see what we have here. So we have the app, that's likely going to stay in this index file, because that's the combination or the composition of all of the components that we've designed. So that'll stay in this index file. We have a Pokemon detail, we have a Pokemon resource, we have a Pokemon list component, we have Pokemon list item, we have a Pokemon collection resource, and we have this big error boundary. Now, one of these things is not like the other. And my understanding is that these error boundaries are, for the most part, going to be pretty generic. We've already made this one flexible enough to take a fallback. So, you know, if we end up using an error reporting service or error monitoring service, we can just kind of change this line and all those errors are going to get sent to our error catching service. So this one is kind of unlikely to change. And if it does, we'll probably want to change it in one place, not connected to any of these other components. So let's make a new file for that. Nope, not new directory. And I'm just going to put these all right on the just flat. I'm not going to put them in a folder or anything. I feel like that might be necessary with a huge app. But right now, not a big deal. So we'll call this error boundary. Yes, got that. I'm going to find the top and bottom of this. And I'm going to say import, I'll just import it like I expect it to be imported. So we'll import error boundary from in the same directory. Actually, I'm going to make this lower case. And the reason for that is I have done this uppercase thing before and obviously you can see it's a habit. And it can be really frustrating based on the the system that you're doing your build on, whether it is a Mac system or like a Unix or Linux based system, or a Windows machine. Some things are not. Mac kind of considers all of the the casing to be the same. So it'll work on my Mac. But then when I try to build it in a different environment, sometimes it'll complain about not being able to find the file. So that's been a major frustration for me. So I'll just use like dashes or underscores or whatever. In this case, we'll use dashes. It doesn't matter just the capitalization. It doesn't work well. So let's see. So I've index. Okay, so what we need to do now is we need to know we're not using that and that's why it's still working. But we're going to paste that in here. And we just need to say export default. Import, react from react. So we need import react in this file now so that we can have access to it. And now it looks like it's all hooked up. Let's verify. Apparently I accidentally deleted the error handling line. It's error, boundary, fault. Actually, we don't need that because we have a default around suspense. So we'll put that. Okay, cool. So that works. That is our first module. Now, we're using the export default syntax. So in this environment, it means that we're going to get that here. So we can just kind of assign this to this name. Now, I'm going to show you a different way to modularize code that I think is going to be that's really valuable when you have a lot of components that are related that you want to import individual individually. So I'm going to do another import line. I'm going to start with kind of the shape of things that I want. And we'll say import. I'm going to use these braces. Now this looks like a destructuring assignment. And it's different. But it's similar, right? So in this case, it means that we want to get certain things out of this module. So this one's got a default export. This one is going to have named exports is what they're called. So we're going to have inside the module, I know that I'm going to want, you know, such and such a component, such and such a resource and such and such an error component. So I'll just show you. So from and this will be, let's call this one Pokemon. Okay. So couldn't find module and path Pokemon relative to index. Perfect. So we know that that is the case. We need to make it. We'll call this Pokemon. Great. So now is the point where we start copying and pasting code out of this thing. So right here is the, so this is the resource or the collection. So we're not interested in any of these collection things. So we want this Pokemon resource. So let's take the Pokemon resource and the Pokemon detail. Oops. Cool. So we have the resource and the detail. Now, in order to use these separately, we don't want to export a default yet. Maybe we can decide on doing a default and we can add that later. But for right now, I just want to export Pokemon resource. And because it's in this file system, I'll probably just call this resource. And I'll say export detail. Okay. So that's what we got. And then again, in this component, because we are using JSX, we'll need to import react from react at the top. So I know this is a lot of code motion and I do apologize for that, but absolutely necessary. So we're going to import resource and detail from Pokemon. Okay. So now we're going to change, let's see. Actually, correction, we actually don't need to export this because we're only referencing it here. Now, I'm seeing this red line here that says create resources not defined, which means that we have another module that we need to import. We need to import react cache. And if you were kind of curious about this, the syntax that we had here before, we're importing this named export as another thing renaming it. But these curly braces are doing what we're doing now, doing these named exports. Okay. So we'll save this now that create resource is defined. And let's see if we can make this error go away. So we're not actually pulling in the resource. That's all kind of isolated now. And we can do that same trick. So we can say as Pokemon detail just in case we had another, another module or another component in this file that was already called detail. So we'll just be be specific. So import detail as Pokemon detail, duplicate definition for Pokemon detail. Perfect. That's exactly where we want to be. We're just going to delete our resource in our Pokemon detail. And it looks like maybe I got the path wrong. Yes, I did. There. Okay, cool. So we have now a Pokemon module, which will look into it. It has a resource, but this is not exposed. And it exports just the detail component already hooked up to the resource. So that's actually really nice. We've been able to kind of abstract over those details. Now, at this point, I'd kind of like to keep all of the Pokemon stuff in a similar place, even though the collection and the detail are notably different. I do like having those together right now at this phase in my application. I might decide to split them up later. But right now, it seems like there's not so much code here that it wouldn't make sense to have it all together. So let's just take this. We will copy and delete that and paste it over here. Okay, now you're going to see some stuff pop up. I don't want to fix that yet. I want to import it first. So we're going to need a little bit more space. So we're going to let's call this collection. And we'll take this as Pokemon collection only because, oh wait, Pokemon, yeah, sorry, list. So Pokemon list is what we had that as. Okay. Now, we don't have that defined yet. We're not exporting that yet. So we need to move into our module and do that. Okay, so Pokemon list. So we have this list, we need to export this. So we'll just say export. And it's going to export that as Pokemon list. It is reading from this resource, which we don't have to expose yet, because nothing else is using it. We could if we wanted to use just the resource and other parts of our application and use a different list component. Let's see, so what other errors do we have? The other one is that we are using directly in our application, the Pokemon list item. So we need to make sure that we export that as well. Now, I do have some naming problems here because these are still named like this in the module. So we'll take those prefixes off. So we'll be exporting list and list item. And I think I will take the Pokemon prefix off of this now that we're not kind of namespacing it in that environment. And we have it, go away, sorry. Now that we have this all kind of in a module called Pokemon and it's all kind of namespaced already. So yeah, so we will do that. Now it all still works, so that is great. The question now is what do we do with these fallbacks? Just got to check the time, sorry. So one of the questions is what do we do with these fallbacks? I think that I'd like to see the react suspense. So I don't want to abstract over react suspense, but I would like to export certain error and fallback states. So I would say list fallback as Pokemon list fallback and list error as Pokemon list error. Now what I'll do is I will, instead of giving text here, I will use a component which is the list fallback. And then here for the error boundary fallback, I'll use list error. Okay. Now list error and list fallback are not defined, so we need to define those now inside of our module export function list error. And that's just going to return, let's say a span for right now, couldn't catch all. Okay, so export, that's not going to work, export function list error. Okay, so we are doing that now. And we're going to export another function, export function list fallback, return another span, looking for Pokemon. Let's go back over here to our file. So what do we have? Oh, I need to render these. I need to call create, create element on these. Give it a refresh. It is still complaining about list error is not defined list. Oh my gosh. Oh my gosh. Because I'm renaming them to Pokemon list error. I'd like to say that this is not normal for me. But man, anytime I move code around, this is absolutely normal for me. I'm always kind of having trouble with the interfaces and boundaries. So yeah, Pokemon Lister. Now it's totally possible that we're kind of like going a step too far in renaming all of these. But I wanted to show you how it works, because it's very possible that as your application grows, you're going to have different types of lists. Maybe you may have like a Pokemon movie list or a Pokemon attributes list or whatever. You're familiar with your particular application domain and know how many lists and details you would have. And this is a nice way of being able to have them not clobber each other by using this as on these named exports. So all we have now in this component is a bunch of imports at the beginning. And we're importing all of these from this module that we created. And now it's just the application, which is great. And we just have this one Pokemon module that has a lot of implementation details, but really only exposes the handful of components that we need. So the detail, the list item, the list, the list error, and the list fallback. Now again, I had touched on this on day nine, I think, in just a video. But the idea that you don't want to wrap all of your error boundary suspense and whatever in a single component, and a really good way to modularize some of the implementation details is to still use your error boundary and so use your react suspense directly, but then create components that are specific to the error message and the fallback that you want to display to your users. The reason being is that in my experience, the way that you handle react suspense is always shifting depending on how you want to present the user experience. That's going to change a lot. So you don't want to lock that down into your components or bake it in. So that's it. So we've been able to move a lot of code out of this file. So now it's only 45 lines. And we have, we can kind of clearly see that this is kind of the bulk of our application. So that's it. That's dates 12. I know that's a lot of code motion and a lot of maybe new concepts. If you want to learn more about modules, MDN has incredible articles on modules, JavaScript code modules, import and export modules. These are great. So this talks about, this will show you all of the import syntaxes. We only covered a couple, but there's a bunch. This is just kind of a map to all of the documents that they have on modules. And then also this export talks about how you can now export inside of a module. So that's it. Go forth. If you have any questions about this, I know there's a lot of questions to be had about this. So just again, hit me up with a comment or respond to that email that I'm going to send you in just a little bit. And we will get those answered for you. So yeah, have a great day 12.