SOLIDify Your React Code

Rate this content
Bookmark
Slides

Writing a cleaner Code in React by following SOLID Principles

Islem Maboud
Islem Maboud
11 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles enforce good practices for scalable and maintainable software. The Single Responsibility Principle (SRP) ensures that components have a single reason to change. The Open-Close Principle (OCP) allows components to be easily extended without modifying the underlying source code. The Liskov Substitution Principle (LSP) enables swapping child elements within a subtype component. The Interface Segregation Principle (ISP) states that components should only depend on the props they actually use.

Available in Español: SOLIDifica Tu Código React

1. Introduction to Clean Code and SOLID Principles

Short description:

Hi everyone. I'm Islam Aboud, a full stack software engineer working with TopTel. Today, we'll cover Intro to Clean Code and the five SOLID principles. Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles, introduced by Robert C. Martin, enforce good practices for scalable and maintainable software. They are Single Responsibility, Open Close, LispConv Substitution, Interface Segregation, and Dependency Inversion. SOLID works well in team environments, and using TypeScript with React allows for cleaner code following these principles.

Hi everyone. I'm Islam Aboud and welcome to today's talk about solidifying your React code. So a little more about me. I'm Islam Aboud, a full stack software engineer working with TopTel. I'm the founder of the Code One YouTube channel at youtube.com codeone. Also, I'm a big fan of helping developers build better web applications with like educational tutorials and video tutorials on YouTube and blog posts and stuff. And you can find my portfolio at islamaboud.com.

So this is what we are going to cover today from Intro to Clean Code to actually going through the different solid principles and exactly how you can apply them inside of React. So first, let's go ahead and see a quick introduction into Clean Code. So code, we tell or we say code is an actual clean code if it can be understood easily by everyone on the team. So clean code can be read and enhanced by the developer other than its original author. So anybody on the team, even though he's not like the right person or the original person who wrote that piece of code, he can easily understand exactly what's happening. So with understandability comes readability, changeability, extensibility, and most importantly, maintainability. So here it can actually read about, you know, clean code, best practices, and how to write clean code. What is the best practices to make your code cleaner, easier to read by everyone, and of course, eventually, you would actually be able to write better code.

Now when it comes to solid principles, there are actually five design tenets known as solid and are actually used to create scalable and maintainable object-oriented software. They're originally introduced by Robert C. Martin. He's the guy that originally wrote and actually published the Clean Code book, and actually he first proposed these ideas inside of that book. Then, since that one, they have been actually involved into guiding of how to write cleaner code in different places. And one of these places is React. So there are actually five of them starting with the Single Responsibility Principle, the Open Close Principle, LispConv Substitution Principle, Interface Segregation Principle, and most importantly, Dependency Inversion Principle. So SOLID enforces actually a set of good practices that basically is going to allow you to write simpler, easier to read and cleaner or better code, and it particularly works really, really well especially when working in a team environment. So if you're working with a team of developers, actually following the SOLID principles, it's going to help you a lot writing cleaner code that can be understand and maintained by everyone on the team. And of course these principles are originally crafted and created for the object oriented programming so something like Java maybe or C++. Some languages actually has an OOP. But of course, because we use JavaScript with React a lot, JavaScript isn't a language that actually supports OOP a lot, so we have to actually introduce and use the older brother of JavaScript, which is TypeScript. So using TypeScript with React, it can allow us to write cleaner code following the SOLID principles. Of course, we will have to do a minor adaption and small teeny tiny thing change to those SOLID principles to make it work the React workflow. So let's go ahead and see SOLID principles applied in React.

2. Single Responsibility Principle (SRP)

Short description:

The single responsibility principle (SRP) states that every component should do exactly one thing. It ensures that components and functions have a single reason to change. For example, a bad component may have multiple responsibilities, making it hard to read and understand. In contrast, a good component follows SRP by encapsulating logic in hooks and rendering encapsulated components.

So starting with the single responsibility principle or the SRP. So for the original definition, every class should have only one responsibility for the extrapolated definition to make it work with React. So every component should do exactly one thing. So SRP is the role to making sure our component and functions or modules are responsible for doing one thing only and thus have only a single reason to change.

So to better understand SRP, for example we can take this simple React component here which is like the bad component here. So it's a normal component. It uses the useState in here. It has a function to fetch the product, has a useFx in here to call the fetching of the product and here's some function to handle the rating and the button click and everything another one using usingMemo to filter the products depending on the rating. And of course it renders a bunch and I mean a bunch like a lot of GSX in here. All of it is actually really complicated and it's really hard to read. You don't know exactly what's happening. So all the filtering stuff are happening. The rating component is being rendered. I'm like mapping through the SVG here to render the stars or the rating stars and a bunch of stuff and literally very hard to read. Now if we go into a better implementation like the good component here, it's a lot better and now it uses actually a hook which is used products to do the fetching. That actually has encapsulated all the fetching. Use another one. Use rate filtering here to do the filtering stuff. So everything is encapsulated inside of that hook and we just render these two components. So everything, all the logic in the GSX has been encapsulated into like the filtering component and here we're just mapping it and we're rendering this encapsulated product component.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
Facing Frontend's Existential Crisis
React Summit 2024React Summit 2024
30 min
Facing Frontend's Existential Crisis
The state of frontend development last couple years is in an odd place for the uninitiated web developer and expert alike. Server Components? Resumability? Hydration? Waterfalls? Islands? Why so much focus on water? And why are we even talking about this? In this talk, SolidJS creator Ryan Carniato explores the landscape of modern web development to understand how we got here and what these solutions really solve.
SolidStart 1.0: Peeking Under the Hood
React Summit 2024React Summit 2024
30 min
SolidStart 1.0: Peeking Under the Hood
SolidStart is the full stack Meta-Framework from the SolidJS ecosystem. It brings multiple tools and libraries together in a composable fashion to offer highly performant, understandable, and scalable foundations for web applications. Let's explore how SolidStart solves common UX and DX for building better apps.