This is the Only Right Way to Write React clean-code - SOLID

if you're not familiar with these five soil principles you're most likely writing your react code wrong so these are the five solid clean code principles that you should follow to write readable maintainable and testable code and you're probably wondering what are these and how can I grasp on those and how can I learn those in one video well in this series video I'm gonna go through these five principles as quick as possible with you to actually give you as much understanding as much of information about how you can start utilizing those principles in your react code and your react components and for a quick disclaimer before we get started so this particular tutorial or this guide assumes you already have a basic knowledge of how typescript works or how typing works in typescript in general simply just because solar principles are meant for oop or oriented object programming languages and actually typescript provides a great way to work with those with interfaces and types and everything also soil principles are originally made for the oriented object program you said before and sometimes or for this particular video tutorial we're going to go ahead and try to abstract those and use them on react itself which means sometimes you might find this a little bit difficult to work in K or some like case scenarios for react or maybe some of your components can't actually apply with solid also if you want to have more better knowledge you can go into this like medium blog you're going to find it down below it actually has everything that you would want to learn about solid for oop and actually to understand this tutorial battery I really advise you guys to go and follow this particular kind of like medium article with really awesome illustrations so solid is the actual acronym for actual five principles that allows you to write much more readable maintainable and testable code and those five principles were developed by Robert G Martin who is also name or AKA and kobab who has like books like clean book and other design principles books I actually made a huge impact on how we write code AS developers or programmers how we think and how we make our code way much easier to read and maintainable when it comes to like collaboratively working on code and today we're going to implement those solid principles I'm going to see how you can use those solid five principles into react ecosystem and how you can use those five principles to write way much better code so the five principles are single responsibility List cost substitution open close interface segregation and dependency inversion the first and the most important principle which is the SRP principle or what stands for the single responsibility principle and for the Bare Bones definition of the first principle it means every class should have only one responsibility and a class in our case in here for reacts it basically means a component a function or a multi so in the case in here I try to go through two different scenarios one is the best scenario on how you can use that the second is the good scenario on how you want to utilize and observe and actually respect the SRP principle so for our example in here we got like a simple component this is just all of it it's just a single component all it does is takes products and allows you to filter products first it fetches product sinking uses use effects to fetch those products obviously it handles filtering of this one and obviously it's going to do the filtering part in here but like filtering products users use memo and so on and so forth and last but not least you actually got like the rendering part in which we were simply just rendering a bunch of stuff first we're entering the rating kind of like stars and everything and we got just like a div in here where we gonna filter and render our products and it's going to clearly imagine here we're doing the map we're returning every single product and these divs in here these bunch of kind of stuff that you can Furious in here which is super annoying and you don't exactly understand what's going on these this particular one this like the start of the dev and the end of the deaf in here this is responsible for rendering a single product so this huge and very big kind of component is responsible for Frenching products filtering products and eventually rendering the filtrate or fetched products so this would look something like this and you can use like the rating kind of stars in here to go ahead and filter and go through the different products so if you take a quick look in here and try to actually observe or apply the principle the single responsibility principle in here we see this component it's not doing one thing but rather is doing a bunch of stuff at single place it's not utilizing the react kind of features of like component and composing components to split up this code into much more smaller components and like really lose them over the whole component here but rather than that all he's doing is just putting everything into a single component and doing everything at once so this is sort of very bad so the first thing in here I always observe is actually when there is ever like whenever there is a map function in here that's looping through and trying to render a bunch of stuff especially if these stuff in here are actually like a huge component like a product component this one in here it represents a product component so what I simply doing here I go in and create a brand new component I call the product component in here and if you notice I'm using typescript already in here and this is just Electronic Component all it does it takes a bunch of stuff in here it takes the properties or the you know the property needs to render with like the title image and everything and it renders the component as simple as that so for the good implementation I do this and this is actually going to turn to something like this where the product and it's just passing the product he needs to render and that is a instead of like a whole ugliness that's going on in here we're rendering a bunch of stuff at once which makes no sense I also look up what what else I need to actually split up I need to split up this actually rating kind of filtering UI in here or GSX and they put it into a separate component too so the same thing in here goes a filter I put that in here and it just access it or give it like the access to whatever stating needs and handling through the props and also this would look something like this eventually now the next thing I always do is actually whenever I find a new state I like whenever I see you in a component there is a new stage and there is any use effects I immediately realize that I need to build a custom hook or create a custom hook that's going to take care of both of these into a way much simpler and easier to read and easier to maintain kind of custom hook that's going to do all these bunch of stuff for us in a single function so here I create in a hooks folder and I'm just going to call this a used products so use product is going to be another hook that's going to have a state for set products and products it's going to do the fetching products and it's going to use effects and eventually all it does is just going to return products for us I don't care about anything else because it's him doing everything behind the scenes and that's what I'm doing in here for the good implementation I'm just doing ease products and that's just going to work fine and the next thing I also need here is actually the use rate filter so if I go back to the bad implementation I'm here I'm doing filtering on my own with the use memo and I'm handling the rating in here and updating the state a bunch of stuff right so if I go to the good implementation I'm using the use filter or rate filter in here which is another haircut built up and this one just to take a state it has handle rating and returns both of these functions in here for us so now with the final version if you compare this really awesomely good implementation versus this bad implementation you can see the difference and you can see how this SRP or single responsibility principle can actually improve our code way much now second for the O principle or the open close principle and from like its bare bone definition we know that software entity should be open for extension but should be closed for modification and because this can be also be applied really well on react and these components are kind of like a system we don't need to actually Bend or we don't need to shorten or extend any of the extension or basically that definition to fit the reactic system because it just can work as is now if you take for example this button example in here this button component here for the LCP or the open close principle so if you take a closer look in here we got an interface obviously this is an interface or a typescript interface we got a roll now particularly this robot allows us to do is actually define whether we want to back or forward or a main icon or what is the actual role of this particular button now obviously because this rule can be extended and can like for example let's say later on we want to add another role in here to be like to go like 404 or something I don't know or maybe a different not found one kind of like icon something of that sort now let's imagine this particular scenario where we do that now it's curious in here for every single role in here we need to actually do roll equals forward and understand or go ahead and render a particular thing conditionally and so on and so forth and if you ever added another one it's going to be like adding always a new role and you were on your own and that's going to break or bend the actual definition of the open close principle because we are not going to like go ahead and extend that but rather we're going to modify that every single time so we don't want to modify the source code but rather we want to extend upon that source code without like modification directly into the source code so this is the actual example and this is how it looks now with the go back and go home now how can we make this work and likely for us this works really well with reacts because react can actually take through props and actual react node so which means in here I can pass in an icon instead of a roll and it can go in in common both of these worlds in here and instead I can go ahead and render an icon so let me just going to do icon in here and through this icon in here I can put whatever icon and of course obviously this is going to be extended outside of the button itself it's not going to be like inside of the model button that means the source code is not going to change but it's going to be extended from whatever component is going to use it next in case in here I can go ahead and comment this one and then comment the icon same thing in here now a screws in here I Define different icons for different buttons and that's going to make us extend the functionality of the button without modifying the source code and for the third principle which is the list conf substitution what it defines as subtype objects should be substitutable for super type objects so let's say for example this particular example in here we got a search import and it's actually more than a search input it's it's more of like a storage bar in here and for example in here we got let's say we got a storage bar in here we can actually go ahead and like you know put something into search whatever and for the actual code we got something like this so for example we got this is the search input the search input in our case in here is going to present the subtype because this one is going to extend from the actual input or the bare minimum HTML input which means that this is going to play the rule of the super type and since the input in here actually needs prompts more than it were basically for example we're actually going to be using because an HTML input can have plethora bunch of props that are attributes that you're not aware of so every single time if you use a component like a search input in here where it uses a bare minimum or another component that needs props you need to make sure that all the props of that super type component which is the input in our case in here should be passed through as well and we should always always for example create like an interface this is the search input props interface now for example let's say we got only the ace large Boolean in here now that's good right we're passing the East launch and everything and to basically fulfill the actual principle to fulfill the list called principle in here we need to make sure that we extend from the super 12 kind of elements for the super type input HTML attribute as well because we want to go ahead and grab the props from that and actually make sure we're actually using that as well and for a better way to use this actually just do a double down do rest props in here copy this one to make sure you're just only using the rest of the prompts in here because you're using some of the other ones as the value and the unchanged as well I know this kind of principle is a bit weird and might feel a little bit kind of like uh it doesn't make sense in that kind of case scenario or something but what you should actually keep in mind to be able to use and actually fulfill this scenario or this principle on your own that whenever you're using a component like a search input then that particular component uses another component inside of it which is like composed off into this component like an imprint on our case in here make sure to always pass the prompts of that composed or or that like kind of child component that you're actually using inside of the main components always pass the props of that like every single prop of it make sure you pass it through and make sure you're delicating the prompts in here from that components or from the extended components through to the base component in here and the third principle which is interface segregation and for the bare bone definition of this particular principle which is that clients should not depend upon interfaces they don't use and in our case in here for react this should be something like components that shouldn't depend on props they are not going to use and if you take a look at this particular example which is the same kind of scenario or same demo used before we got our products in here simply this is what our product looks like we got an interface that describes what a product has like an ID title price rate and image and we got the props of that particular product now inside of that obviously because this is a product it needs all the attributes with all the properties of the product has and you can use them freely but let's say and let's imagine inside of that to render the actual image of a product or the thumbnail of that on 8 we're using a separate component called thumbnail and through this particular components we're passing an actual product into it so if you give me some thumbnail we are actually what we're doing particularly we're extracting the products objects which has everything alongside the image it has literally everything all these properties and even more so we pass in all the products in here and literally all we are actually using and all we are utilizing is the image from the products we don't care about any other attribute we only care about the image and we're using the image to render an actual image in here I know sometimes we do a really dummy kind of stuff and I did like this kind of stuff myself and before knowing about these principles and when it was like a newbie and you to react and everything but no nobody should actually do that so since the thumbnail here only depends on a single prop and needs a single prop to actually operate and work which is the image property here or more particularly the image URL all we need to do is actually here like for example do an image urinal or just an image I don't need a products anymore right I don't need you and I'm gonna change that to props and change that to image URL as simple as that and actually go ahead and use the image URL like this component doesn't need to know about the product doesn't need to care about any other property of the product he only cares about the image URL to render an actual image that is it if you go back in here save that real quickly go back because there is an error because I need to do image URL and it can just go to product dot image to passing that urinal let me fix that and that is it that should fix it and that should make it way much better and that should fulfill the actual interface segregation principle and the last principle we should grasp on which is one of my favorite principles alongside the first one which is the dependency inversion and for the Bare Bones definition of this is an entity should depend upon abstractions not concretion and when it comes to rank this is more of like making react components more of like a standalone component and allow them to extend rather than allowing them to like you know completely rewrite the component or mortify the components which can actually ridiculously take you to something like unexpected bugs expected behaviors because a lot of people are collaboratively working on the same projects and sometimes they want to change a component that is being used by different other kind of pages or different components that's going to cause a disaster so for a demo in here for the last principle I'm going to use like a sign-in form where there is an email a password and it also just to sign in or particularly just log into the application now if you take quickly on the source code for this or behind the scenes of this form we go simply a form with two-state email and password we got a function or a method that takes handling of the submit so whenever you submit the form this is the function that's going to be executed and last but not least we've got a bunch of GSX stuff that's going to go ahead and take care of rendering and obviously in here we got a form and we're doing on submit to handle the submit now everything is good in here right I mean all good this is a form it works pretty fun it does submitting it has no issues and we're simply just utilizing this form like this just going in form and it can do everything behind the scenes and let's say this form in here is actually doing the login everything let's say sometimes where like we want to utilize this on a different part of the application to do the same thing for the login I want to utilize the same component but I wanted something different which is I want to go ahead and submit this data into a different URL on here because this handle submit is baked into the actual form inside of the component itself this is merely like impossible we need to sometimes like go ahead and change that or maybe introduce another on submit kind of like a function that's going to go into here maybe introduce like an if statement that goes like if this do this if not this do this a bunch of really creepy stuff for creepy solutions that you don't want to need to but there is one really good solution so imagine this I'm going to introduce an onsub make kind of like a pro function that's going to be passed through from outside of the form component I'm going to go in and grab this from the prompts I don't need this handle submit anymore I'm going to create a handle submit too which means it's only gonna cool on submit and it's going to pass in the event in here or rather what I would rather government and passing which is the email and the password because that's exactly what is taken in here email and password simple as that now handle submit 2 should be going in place of the original submit now every single time the Forum is going to be submitted this handle submit 2 is going to be taking care of the on submit is going to be executed it's going to pass in email password into the original submit which is coming outside of the form component and to better utilize that we go ahead and create a separate component called like connected form or something like that I think this is a really good convention to call it like a connected because it's more of like connects it into an API it's not just like a dummy form that can be used anywhere and we can just Define our own handle submit I go and do a form and I provide that submit in here and this now can be used separately and as well as this form in here or this form components can be used separately and can have like have two kind of like components two connected forms each one does a different completely different handle submit on it that's super nice and if you go to the index in here instead of using the form now you can use the connected form and there's no changes but what if they're changing here I'm using a different component that actually provides in abstractions and provides the actual implementation to the abstracted from component rather than just using a full concrete kind of like components on its own and this kind of like kills the abstraction kind of like mindset of react components and the reusability so anyway guys I hope you guys enjoyed this really awesome tutorial of the Soul principles in react and without further Ado catch you hopefully in the next ones

Channel: CoderOne

Views: 348,381

Keywords: react, clean code, react code, react solid, SOLID, SOLID principles, React SOLID Principles, React clean-code principles, write react code, write clean code, clean code principles, React, become better developer, better react code, clean-code, SOLID code, clean code book, react senior code, learn react principles, learn react SOLID, React dos and donts, React good code, React tips, React tricks, Javascript SOLID

Id: MSq_DCRxOxw

Length: 18min 22sec (1102 seconds)

Published: Sun Nov 20 2022