React.js has a component-based architecture that offers a flexible environment for overriding its existing components. It improves the code reusability and provides customization margins by adopting a modular approach to development.
Overriding is a basic OOP concept in which we can alter the functionality of an existing child class in its parent class. In React, we can define a different implementation for existing components in their parent components.
As discussed above, React application modules can be divided into different components to improve reusability. Therefore, to use the existing components we override them. There are three basic approaches that can be used to override existing components in React.
Composition
Inheritance
High-order components
Let's add a simple button inside a navbar using each approach one by one.
Composition is mainly explained in the context of a 'has-a' relation, where a component is contained by another component. Each component has its own encapsulated behavior and interacts with each other through the reference specified for one component in the other component.
Note: Real life example of a 'has-a' relation can be of a car. Car has a seat or an engine. Seat and engine are small individually useful components that come together to form a Car component.
.nav{
background-color: cadetblue;
align-items: center;
text-align: center;
padding: 10px;
}
.btn{
background-color: rgb(30, 68, 90);
border: solid rgb(30, 68, 90);
color: aliceblue;
border-radius: 10px;
margin-top: 30px;
margin-bottom: 25px;
margin-left: 30px;
padding: 0.3rem 0.5rem;
}
h1{
color: rgb(255, 255, 255);
font-size:xx-large;
font-weight: bolder;
align-self: center;
}Navbar.js:
Line 2: Import Button component to the Navbar component.
Line 10: Button is overridden inside the Navbar function.
index.js:
Line 10: Import and render Navbar in the root to see the output on your screen.
Inheritance is a hierarchal relationship between components, where the child component can inherit properties of its parent component. The child component can use the parent component properties according to its requirements.
.nav{
background-color: cadetblue;
align-items: center;
text-align: center;
padding: 10px;
}
.btn{
background-color: rgb(30, 68, 90);
border: solid rgb(30, 68, 90);
color: aliceblue;
border-radius: 10px;
margin-top: 30px;
margin-bottom: 25px;
margin-left: 30px;
padding: 0.3rem 0.5rem;
}
h1{
color: rgb(255, 255, 255);
font-size:xx-large;
font-weight: bolder;
align-self: center;
}Navbar.js:
Line 2: Import Button component to the Navbar component.
Line 4: Navbar is the overridden child component that extends Button, which is the parent component, to inherit its properties.
Line 5: Use render() method whenever a component has to be re-rendered.
Line 9: Use super.render() to call the render function of Button , which is the parent component.
index.js:
Line 10: Import and render Navbar in the root to see the output on your screen.
High-order component is a function that takes Component as a parameter and returns it after incorporating new behavior. It can add additional functionalities to the wrapped component including state management, event handling, and prop manipulation.
import React from 'react';
import Navbar from "./Navbar";
import Button from './Button';
const MyNav = Navbar(Button);
const Base = () => {
return(
<div>
<MyNav/>
</div>
)
}
export default Base;Base.js:
Line 5: Declare the overridden component myNav and set it equal to the original component Button inside the Navbar wrapper function.
Line 4: Call the overridden component myNav that displays the original and overridden content.
Navbar.js:
Line 3: Pass a Component to the high-order component Navbar.
Line 4: Implement the myNav functional component in which the overriding will occur. It will return the re-rendered content to the Base component.
Line 8: Component is called which is a built-in attribute that represents the component that is to be rendered (see Base.js explanation for further clarification).
Line 12: Return the rendered myNav component that contains the original and overridden content.
index.js:
Line 10: Import and render Base in the root to see the output on your screen.
Overriding approach | How it works |
Composition | Import the component to be overridden inside the other component and call it inside the div where it is to be rendered. |
Inheritence | The child class component inherits the properties of the parent class component and calls super.render() to render its content. |
High order componenets | The built-in component that represents the component to be rendered is passed to the higher-order component. |
Can inheritance be done using functions instead of classes in React?
Free Resources