SOLID principles - write clean code in React.js app

Junior developers write code to find a solution often generating unreadable and unmaintainable applications senior developers are focused on writing less code and taking care of performance while implementing new features if you want to be the cleaner of coding you have to get familiar with the solid principle which was introduced in the book design principles and design patterns authored by Robert C Martin there are five main rules in which the first letters are are combined into solid word single responsibility principle open close principle listof substitution principle interface segregation principle dependency inversion principle let's describe them in react Jazz the first rule is the single responsibility principle each component should have one responsibility so it definitely excludes writing complex components that handle multiple features features let's assume we are building a Blog web app at some point we are forced to make a blog post component that should display a post and user interactions like comments and likes we could have packed everything into one huge component or divided it into separate ones for example in blog post component we will display post and comments separately second rule open close principle components should be open for extension but close for modification in react we can achieve this using composition and props in this example the button component is opened for extensions because it is possible to change its appearance and behavior by providing a different style and onclick props however the button is closed for modifications by extending functionalities we do not interact with the component source code third rule Lisk of substit subtitution principle in react this principle can be applied in the context of component design and composition while react components don't have a class-based inheritance relationship like in traditional object oriented programming LSP Concepts can still be applied using composition and props for instance if you have a base button component and you create an icon button component that extends or composes the Bas component you should be able to use icon button anywhere you use button the fourth rule interface segregation principle this rule states that no client should be forced to depend on methods it does not use translating this principle to react we can say that a component should not have props that it doesn't use suppose you have different forms in your application user form product form and order form each form component should only have props that are relevant to that specific form the fifth rule dependency inversion principle this is the last of the solid principles and it advocates for highlevel modules to not depend on low-level modules but rather both should depend on abstractions furthermore abstractions should not depend on details but details should depend on abstractions in the context of react this principle can be applied by inverting the dependency between a component and its dependencies such as side effects data fetching services or any external modules this can be achieved through techniques like higher order components dependency injection via props or custom hooks in this example is created a generic data list component that can fetch and display data from any API endpoint the actual data fetching function and how to render each item will be injected via props thank you for watching this video if you want to be a modern developer and boost your coding skills subscribe to my newsletter Link in the description

Channel: moderndev

Views: 20,094

Keywords: solid principles, write clean code, solid principles with examples, solid principles java interview questions, react solid principles, clean code examples, clean code java, write react code, clean code uncle bob, clean code book, solid code, clean code, better react code, clean code principles, learn react principles, clean-code, react clean-code principles, code smells refactoring, code refactoring, react senior code, react code, become better developer

Id: Ix6JoarGYiA

Length: 4min 8sec (248 seconds)

Published: Sat Sep 30 2023