React Clean Code: Advanced Examples of SOLID Principles

🎉Our Newsletter is live! Join thousands of other developers

⭐ Timestamps ⭐
00:00 Intro
01:45 SRP - Single Responsibility Principle
11:06 OCP - Open-Closed Principle
16:36 LSP - Liskov Substitution Principle
20:52 ISP - Interface Segregation Principle
23:51 DIP - Dependency Inversion Principle

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

⚡️ S.O.L.I.D Principles implementation in React ✨

📕S.O.L.I.D blogs get a better grasp on the principles

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

-- Watch More Videos

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[davidhavl]

Finally! Thank you! It's amazing to see advanced concepts being taught the right way as well as having error handling included in your code! Most videos out there stay away from either of the subjects because it's hard (or they are not proficient in it), which gives junior devs a false image of how to develop real-life production-ready applications.

[sanjeebgochhayat]

Thank you from the bottom of my heart for teaching us Advance concepts

[cntitv]

Great video! I'd glad watching a video talking about TDD, SOLID and Clean Arch

[fuyu]

Love these long and well explained videos

[aymenbachiri-yhhd]

i'am glad you give this valuable informations

[yadang]

Some useful VS Code extensions in this video :
1. indent-rainbow oderwat.indent-rainbow
2. Tailwind Fold stivo.tailwind-fold

[FLMMKR]

FYI, 4:10-4:40 same cut repeated. great video!

[mr.komp]

What is the plugin, that collapse tailwindcss classes?

[saidabedi]

Great video! What is the extension that you have that hides the components props?

[johntrevithick]

Thanks, some very insightful examples here. That said...
IMO, example of cleaning the validation code was confounded by the use of the external package. The main point to me was that the validation code could be extracted to a module-level function, instead of being in-line to the component.
Likewise, use of a library to handle the form meant that the `InputField` component was tightly coupled to this library (via the `fieldRegister` property.)

[pewds]

can anyone please tell me how the SRP was being violated in the first example. I mean if we look from a feature perspective that single component was binding the login stuff and only login stuff. i mean where is the borderline. how to distinguish ?

[billyfigueroa]

Curious if you prefer react hook form and zod over formik and yup for a reason or it’s just a combination you have been using and don’t need anything else?

[kunalzing]

Thanks for making this. Just one doubt in the ISP example. Does'nt the UserProfileGOOD violate OCP? Currently, every time we need to add a new notification type, we have to modify the UserProfileGOOD component to include the new notification component. This violates OCP because the component is not closed for modification.

[milomans]

thank you... but what is the point of using CLASS in Dependency Inversion principle? i can handle it by usual arrow functions

[ductran]

What ide are you using to code? it's so beautiful...

[mhho]

What you didn't mention regarding the showcase of OCP is that the so-called compound components are gonna double or triple the size of code. I personally don't recommend use compound components everywhere.

[gururajmoger]

Please explain the solid principle with Angular 17 🎉❤

[danielbarbu]

@oladayoagbolade3676 not quite. This separation is an opinionated practice, wrongly packaged as SRP-related. In SRP the responsibilities are defined in terms of the app functionality, not in terms of the programming mechanics. This is a common misunderstanding in web development.

[GurovDmitriy]

semantic violation
useContext should use the result of createContext which in turn will be called contextDropdown

he cannot use the provider))))

[mrlectus]

Shit, so am doing solid all this while 😅 I guess my OCD has some advantages