How does React's component object work?

Tech QnA
1

I was experimenting with components using “react-bootstrap.” Just wondering how they manage to make a react component that also has child components like “Modal.Header>”
In my project, I’m creating a lot of customized parts, and I love to organize some of them like this.

2

The core units of UI parts in React are called components. They enable developers to construct reusable and modular code because they encapsulate the logic and rendering of a specific user interface component. Function components and class components are the two basic approaches for developing React components.

Function Components

JSX (JavaScript XML) elements are returned by JavaScript functions that take props (short for properties) as arguments. By using React’s JSX syntax extension, you can write JavaScript code that resembles HTML.

A function component example is:

import React from 'react';

const MyComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

export default MyComponent;

Class Components

Classes in JavaScript that extend the fundamental React.Component classes are referred to as class components. A render() method exists and returns JSX components. Additionally, class components are eligible for props, which are available through this.inside the component, props.

An illustration of a class component

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

export default MyComponent;

Both function and class components are capable of carrying out identical duties and are powerful. Function components are advised for simple components because they are typically considered lighter and simpler to read. Class components are still used frequently, particularly when it comes to managing state or using component lifecycle methods (like componentDidMount and componentDidUpdate).

React produces a component object for that specific instance when a component is rendered in the application. The internal state of the component, its props, and other information specific to that instance are all represented by this object. This component object is used by React to manage lifecycles, changes, and re-rendering effectively.