Component In React

In React, Component are the building blocks of a user interface.

A React application is composed of multiple components, each responsible for rendering a part of the UI.

Components can be simple and reusable, or they can be complex and handle dynamic behaviour.

There are two types of components in React:

Functional Component

Class Component

Functional Component in React:

Functional components are simple and concise. They are functions that take props as an argument and return React elements.

After the introduction of React Hooks, functional components can now also have state and side effects.

Example:

import React, { useState } from 'react';

const CustomCountFunctionalComponent = (props) => {

const [count, setCount] = useState(0);

 const decrement = () => {
    setCount(count - 1);
  };

  const increment = () => {
    setCount(count + 1);
  };
  return (
   <div>
    <button onClick={() => decrement()}>-</button>
     <h2>Count: {count}</h2>
    <button onClick={() => increment()}>+</button>
   </div>
  );
};

export default CustomCountFunctionalComponent;

Class Component in React:

Class components are ES6 classes that extend the Component class from react. They have a render method where the UI is defined.

Class components can manage state, lifecycle methods, and other features.

Access `props` in the constructor and super function and outside of the constructor we need to use `this.props.functionORvariable`.

Example:

import React, {Component} from "react;

class CustomCountClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

 decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.decrement}>-</button>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>+</button>
      </div>
    );
  }
}

export default CustomCountClassComponent;

Props in React Component:

Props (short for properties) are a way to pass data from a parent component to a child component.

Props are immutable, meaning they cannot be modified by the child component. but we can update them through callback methods we receive from parent props.

Example:

import React, { useState } from "react";

// Parent Component
const ParentComponent = () => {

const [name, setName] = useState("Alice Collin");

  return <ChildComponent name={name} updateUserName={setName} />;
};

// Child Component
const ChildComponent = (props) => {
  return (
  <div>
   {props.name}
   <input type="text" value={props.name} onChange={(e) => props.updateUserName(e.target.value)} />
</div>;
};

State in React Component:

State is used to manage the internal data of a component. Class components have a state object, and functional components can use the useState hook to manage the state.

Example: Functional Component

import React, { useState } from 'react';

const CustomFunctionalComponent = (props) => {

const [count, setCount] = useState(0);

 const decrement = () => {
    setCount(count - 1);
  };

  const increment = () => {
    setCount(count + 1);
  };
  return (
   <div>
    <button onClick={() => decrement()}>-</button>
     <h2>Count: {count}</h2>
    <button onClick={() => increment()}>+</button>
   </div>
  );
};

export default CustomFunctionalComponent;

Lifecycle Methods (Class Components):

Example:

import React, { Component } from 'react';

class LifecycleComponent extends Component {
  componentDidMount() {
    // Code to run after component is mounted
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someValue !== nextProps.someValue) {
      return {
        someValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    // Code to run after component updates
  }

  componentWillUnmount() {
    // Code to run before component is unmounted
  }

  render() {
    return <div>Lifecycle Component</div>;
  }
}

Class components have lifecycle methods that are invoked at different stages of a component's existence. Common lifecycle methods include `componentDidMount`, `componentDidUpdate`, `static getDerivedStateFromProps` and `componentWillUnmount`.

<-- JSX Rendering in React

React Classes -->