React Components

In React components comprise the building medium of any application. They can be compared to small reusable pieces of a webpage. You could liken them to Lego blocks. Each block has a precise role. When combined, they generate a comprehensive structure. In React these blocks are the components. Components can be written in two ways:

• Functional Components
• Class Components

1. Functional Components

A functional component equates to a simple function in JavaScript. It accepts some input. This input is called "props". Once it processes this input, it gives back a part of user interface. It is commonly JSX. This typically looks similar to HTML.

Real-Life Example:

Consider yourself at a coffee shop. There the barista poses a question. "What kind of coffee do you want?" You furnish your choice. Let’s say it's a "Cappuccino". Barista prepares this for you.

In this imagery the barista denotes the functional component. Your preference mirrors the "props" passed into function. And the Cappuccino symbolizes the result the component returns.

Code Example:

function Coffee(props) {
  return 
I am drinking {props.type}!
;
}
// Utilizing component


    

In this example Coffee acts as functional component. It delivers a message based on coffee type passed in.

2. Class Components

Class Components were used before React introduced functional components with hooks. They were necessary for more complex features. Class Components are blueprints. They can manage their own internal data. This data is known as "state". They can also react to changes.

Real-Life Example:

Class components resemble a smart fridge. This fridge keeps track of its internal temperature. The smart fridge adjusts its cooling. It does this based on the temperature. Temperature is either new data or event.

Code Example:

class CoffeeMaker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { type: "Espresso" };
  }

  changeCoffee = () => {
    this.setState({ type: "Latte" });
  };

  render() {
    return (
      

        
I am making {this.state.type}!
        
      
    );
  }
}

    

In this example:

• Class CoffeeMaker creates an "Espresso".
• When button is clicked coffee type shifts to "Latte". This happens by changing the state.

3. Component Lifecycle

Lifecycle is term used in class components. It indicates various steps through which component advances. This happens starting from its formation till it is eradicated. There are three critical phases. These are:

• Mounting (Component is created and embedded into the DOM)
• Updating (Component's data or props adjust)
• Unmounting (Component is erased from DOM)

Real-Life Example:

Pretend you are embracing a fresh apartment. This act represents Mounting. Decorating or altering interiors symbolize Updating. Finally leaving presents Unmounting. It can also be imagined as moving out.

In class components, lifecycle methods offer us control. They define what transpires during these stages. These methods are:

• componentDidMount() - Triggered when component is first added to screen.
• componentDidUpdate() - Invoked when component refreshes due to modification in props or state.
• componentWillUnmount() - Activated before the component is removed.

Code Example:

class CoffeeMachine extends React.Component {
  componentDidMount() {
    console.log("Coffee machine is turned on!");
  }

  componentDidUpdate() {
    console.log("Coffee type changed!");
  }

  componentWillUnmount() {
    console.log("Coffee machine is turned off.");
  }

  render() {
    return 
Brewing coffee...
;
  }
}

    

This component logs messages at different stages. Each stage is part of its lifecycle.

Summary

• Functional Components: These are simple. They are stateless components written as functions.
• Class Components: These are components with internal state. They have lifecycle methods as well. They are written as JavaScript classes.
• Component Lifecycle: This entails the different stages a component passes through. Component goes through these stages during its existence.

Each of these components has a key role in building dynamic web pages. This is done in React. It makes development easier and more efficient.