New to Coding? You Need to Know This About AI
Other Videos📅 2025-04-26
Transcript
[00:00] let's find out a very fundamental technique that every software engineer should know how to do refractor and code welcome back y'all today's video is going to be a technical one oh yeah very technical and what we're going to do in today's video is go over the concept and idea of refracturing code parent files child files components what does this all mean especially in the context of when you are coding with AI I'm making this video as I've seen a lot of comments on this topic so if you want to be in the right route to an extent in coding of AI of how to properly create scalable front ends you found yourself
[00:31] in the right place you found yourself with Corbin Brown let's do it to best showcase this I'm going to go over a web app we created together in a 3-hour and 30 minute long playlist and essentially kind of show you the structuring here now for you to visually understand refracturing and when we do this in code it's best for me to show it like this right off the bat as every single one of these elements is its own separate component the announcement bar is a separate component the nice little top fold here is a separate component if you don't know what I'm saying right now don't know what a component is don't worry I'm going to explain that the
[01:03] three little pieces of investment are a separate component what is that come over here if we go to views notice how the investment G which was that little three little round rectangles here this is all the relevant code to it it's just called investment G and investment G CSS so investment G this section I would consider a child component that we import into our parent component here which is going to be our homepage notice home homepage all this code isn't just
[01:33] literally all of the code in the sense of there is no other files we're importing here we just put it all in homepage that would be excessive and not good development so what we do here instead is we actually render by component so these are all Childs of our parent component here of homepage and to make this a little bit more clear here top fold notice the order of top fold is at the very top what's under top fold investment okay right there as well and then newsletter CTA and all the way down to footer so your first major lesson
[02:05] here is going to be when creating web apps or software Pages break it down into separate sections of that underlying page rarely do we ever use a parent file to code out very intricate parts of the page typically we will just set it up for the very overarching structuring of the page now here's one situation that we need to very much understand when leveraging parent files as I said before most of the rent rendering of the UI will have its own little separate child components EG top fold that's going to be top fold. JS and
[02:36] top fold. CSS this is all the relevant code associated with that and we do it here I guess let me take it one step above this once you have your parent component here we're going to have like the ultimate parent component which will just render the homepage. JS in the app and the app right here is homepage and we're going to get from views and homepage which is the folder here all the way to Hom page.js one fundament Al use case that can be leveraged within a parent file that is very useful in development is the idea of grabbing data from the back
[03:07] end or needing to leverage data from the backend whether that is a database storage Etc so what I mean by this is that let's say within our homepage we actually needed to leverage a data point found in our fire store for the user's profile image assuming we do the code for grabbing that profile image data what we can do here is leverage the fact that this is a parent component we can actually pass this profile image data into our top fold investment G newsletter CTA and footer if needed if
[03:38] it's not needed then don't do it but assuming the profile image needs to be rendered on every single one of those we can proceed in this manner what's cool about that is for example I take this profile image data I put it in top fold we'll pass it through here we can leverage it everything down here now to be clear here essentially what you're doing is you're saving on a ton of reads because alternatively if we were to grab the profile image data in every single child component rather than just doing it once in the parent component then we're doing 4X the amount of reads
[04:08] necessary to grab that same data point if you want a little bit more in-depth on the topic of backend and grabbing data check out the playlist down below or just look at my name Corbin backend I did a 2hour and 30 minute video showing you how to build out fully functional software backends in this manner right I show you how to do it with AI point for this video though is much more high level in understanding the purpose of a parent and child component in development so to to make this clear let's give an example of what bad code would look like also just for context to refractor like at a very base level You're simply just going to be importing
[04:38] the file right so for example we go to top fold here this is all of our relevant code that we always know and love where top fold JS has this and then our stylings and top fold CSS we build out whatever we want to render you know if the return statement etc etc and then our export default top fold is what we're going to be grabbing and then importing over here as top fold top fold. JS wherever it's located within your repo and you can render it like that that is like bare minimum I just refractor some code that alternatively we could have just grabbed all this code
[05:08] here and placed it within our homepage. JS and just paste in here right but as you can see I think our homepage looks pretty clean when we're just rendering child components so then to answer your question of how do you know whether or not you are creating clean code it really comes down to how does your parent file look your parent file is your meta file that you are going to be importing into your app.js to be used throughout your application and rendered throughout your application therefore bad parent files other than that case in the sense of like we're passing one data
[05:39] point through four different components that's obviously very relevant and very needed but typically you don't want a situation here where the only thing that was in the views folder was hom page.js and homepage. CSS and I coded out all four of these child components all in the same file context our Footers 54 lines investment G's 57 lines cta's 128 lines top folds 105 lines now to be honest with you that's really not that much code but add it all together you're looking at maintaining a rendered
[06:10] component with around 600 500 lines which can be very annoying if you are creating changes or pushing changes that maybe only are relevant to the top fold section therefore make your life easy that's part of the reason we refractor code and just refractor it so that any change you want to make to top fold you're not messing around with 600 lines of code mod you just go straight to top fold and you're like let's go and do it what's the change very easy to pass off to other Engineers as well cuz this is very legible way of writing code but as you saw this can get pretty interesting here now watch this like we have our
[06:42] child component rendered here but if we go to top fold. JS we're also rendering another component now these could be components for anything this component that we're rendering in top fold rather than our homepage. GS is the banner so notice how we're importing Banner from components and banner scroll down here we're just rendering it here which then gets rendered all the way to our parent level which then gets rendered all the way up to our app level this little Banner here is actually part of top fold rather than being part of the homepage. JS being imported here on top of top fold but typically within the
[07:13] app.js it has to be very clean very limited logic here do most of your database logic within the parent of all parents and then work your way down there may be some Fringe cases here where in theory if you're not passing a data point for all four of these and maybe it's only one yeah you could probably take the extra leg work to maybe just do all the Firebase and Fir store and all the database logic within that specific file that's up to discretion that's up to how you want to approach it now here's the best part about this video I know this may have came off as very confusing if you stayed up to this point then that's awesome if
[07:45] you want to actually talk to this video like talk to me in this video check out bump ups.com I'll leave you in the description down below you can chat with this direct video and basically ask questions that you may have about everything I went over as I've said before in many of my videos you clicked on this video because you want to create software web apps this is not a pottery class the concepts and the ideas I talk about on this channel some of them are going to be like what is this guy even saying but trust me stick to it have some fun I'll see you in the next video refractor code two random videos that's
[08:18] my face I'll see you in the next video