What is Components in React

Hello Guys,

Component in ReactJS

A component is one of the core building blocks of React.

Or

We can say that every application you will develop in React will be made of pieces called components.

Below are some examples of components.

How many types of components?

There are Six types of components in React.

1. Functional Component.
2. Class Component.
3. Pure Component.
4. High Order Component
5. Controlled Component
6. Uncontrolled component

What is a Functional Component?

These are simply JavaScript functions. We can create a functional component in React by writing a javascript function. These functions may or may not receive data as parameters. In the functional components, return the value in the JSX code to render to the DOM tree.

Example. Create a component named App.js

import React from 'react';
import "./App.css";

function App() {
  return (
    <div className="app">
      <h1>This is a functional component example.</h1>
    </div>
  );
}

export default App;

What is Class Components?

These components are simple classes(made up of multiple functions that add functionality to the application). All class-based components are child classes for the component class of Reatjs.

import React from 'react';
import ReactDOM from 'react-dom/client';

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }

  changeColor = () => {
    this.setState({ color: "blue" });
  };

  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >
          Change color
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

What is a Pure Component?

ReactJShas provided us with aPure Component. If we extend a class without a Component, there is no need shouldComponentUpdate ()Lifecycle Method.

What is an order Component?

In React, a higher-order component is a function that takes a component as an argument and returns a new component that wraps the original component.

What is a Controlled component?

In React, Controlled Components are those in which the form's data is handled by the component's state. It takes its current value through props and makes changes through callbacks like onClick, on Change, etc.

What is an Uncontrolled Component?

An uncontrolled component in React stores its state internally and does not control its value through the React state mechanism. Instead of being managed by React's state system, it relies directly on the DOM to provide its current.