React Clean Code: Advanced Examples of SOLID Principles

Advanced Examples of SOLID Principles Applied in React. This video is a continuation of the previous SOLID React principles video • This is the Only Right... . Which you should watch first before diving into more advanced examples of the different SOLID principles applied in real-world React components and use cases.
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
⭐ 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!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
⚡️ S.O.L.I.D Principles implementation in React ✨
github.com/ipenywis/react-solid
📕S.O.L.I.D blogs get a better grasp on the principles
/ the-s-o-l-i-d-principl...
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
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.

[@aymenbachiri-yh2hd]

i'am glad you give this valuable informations

[@sanjeebgochhayat6911]

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

[@rishiraj2548]

CoderOne is... 🙂👍💯

[@cntitv988]

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

[@fuyu848]

Love these long and well explained videos

[@saidabedi2836]

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

[@ya4dang1]

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

[@volodare]

indent-rainbow oderwat.indent-rainbow is obsolete. You can enable coloring in vs code settings, Editor > Bracket Pair Colorization

[@johntrevithick5900]

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.)

[@mr.komp1004]

What is the plugin, that collapse tailwindcss classes?

[@billyfigueroa1617]

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?

[@ductran1954]

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

[@congdatt]

nice bro ơi. Keep it up nghen !!!

[@FL4M3M4K3R]

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

[@SertuncSELEN]

thank you

[@miloman1995s]

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

[@himanshukapoor5586]

Love it!!

[@pewds2935]

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 ?

[@dinub8414]

You're thinking is right mate. Few mature tech leads would have you perform the extraction into sub components in a case like this, I think. But for a form of 20 inputs, it would make sense. Not because of srp though. Just readability. IMO anyway

[@oladayoagbolade3676]

In SRP, it’s advisable to separate the logic from the UI. That’s why the first example was BAD

[@gururajmoger8649]

Please explain the solid principle with Angular 17 🎉❤

[@danielbarbu1513]

@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.

[@user-th7vx2gk3x]

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

[@liftingisfun2350]

Why use tsx with barely any use of typescript?

[@romansernato6526]

Oh boy, if && () BAD pattern, again ...

[@martapfahl940]

I really like your videos on clean code and this one is very useful as well. For the React Days where I was participating I would have hoped for some kind of different content, you just recycled your youtube content unfortunately. React Days Ticket costs a lot of money.