😱 How React Kicks Off OOPs ? 😱

React, a widely-used JavaScript library for building user interfaces, has revolutionised web development with its efficient and flexible approach. However, it's worth noting that React doesn't strictly adhere to the principles of Object-Oriented Programming (OOP) as defined by languages like Java or C++.
In traditional OOP, concepts such as inheritance, polymorphism, encapsulation, and abstraction play a crucial role. React, on the other hand, takes a different approach to achieve similar goals while promoting a more functional programming style. In this article, we will explore how React kicks off OOPs by adopting its own programming paradigm.

Components: The Building Blocks of React

In React, everything revolves around components. A component is a reusable and self-contained piece of code that defines the structure and behaviour of a specific part of a user interface. While LOOP emphasises the use of classes and objects, React introduces the concept of functional components. These are JavaScript functions that accept input parameters, called props, and return a React element. By doing so, React embraces the functional programming paradigm, where functions are the primary building blocks.

Composition: Replacing Inheritance

In traditional OOP, inheritance is a powerful mechanism for reusing code and creating hierarchies of related objects. However, React takes a different approach to achieve code reuse and modularity through composition. Instead of inheriting from a base class, React components can be composed together to create more complex UIs. This composition model is achieved by nesting components within each other, allowing for a tree-like structure. Each component can encapsulate its own logic and state, and can be easily reused and combined with other components.

For example, let's say we have a Button component and a Card component. Instead of creating a class hierarchy with a ButtonCard class inheriting from both Button and Card, we can simply compose the Button and Card components together in the desired way, such as nesting a Button component within a Card component. This approach promotes a more flexible and maintainable codebase.

Props: Achieving Polymorphism

Polymorphism is the ability of objects to take on different forms based on the context. In React, this concept is achieved through the use of props. Props are input parameters that are passed to a component, allowing it to customise its behaviour and appearance. By changing the props passed to a component, we can achieve different renderings and behaviours without the need for explicit subclassing or type hierarchies.

For instance, consider a generic Button component. By passing different props, such as colour, size, or label, we can create buttons of various styles and functionalities. The Button component can handle these props and adapt its rendering accordingly, achieving polymorphic behaviour without the need for complex inheritance chains.

State and Hooks: Encapsulation and Abstraction

In traditional OOP, encapsulation involves bundling data and related behaviour into a single unit, usually a class, while abstraction focuses on hiding implementation details and providing a simplified interface. React achieves encapsulation and abstraction through the use of component state and hooks.

State represents the mutable data that belongs to a component. It allows components to manage their own data and re-render when the state changes. Hooks, introduced in React 16.8, provide a way to use state and other React features in functional components. With hooks, components can encapsulate their state and expose a clean interface for interacting with that state.

By managing state internally and exposing a well-defined set of hooks, React components can encapsulate their implementation details and provide a simple and intuitive interface for other components to interact with. This approach promotes code organisation and separation of concerns, achieving the goals of encapsulation and abstraction without relying on class hierarchies or access modifiers.

Conclusion

In conclusion, while React doesn't strictly follow the principles of OOP, it introduces its own programming paradigm that achieves similar goals through functional programming, composition, props, and hooks. By embracing these concepts, React provides developers with a powerful and flexible tool for building user interfaces that are modular, reusable, and maintainable. Understanding how React kicks off OOPs allows developers to leverage its unique strengths and develop high-quality applications efficiently.