React Components

React Components

React components serve as independent and reusable chunks of UI, which simplify the development process by breaking down the interface into modular parts. Each component encapsulates its structure, logic, and styling, making it easy to manage and scale applications.

Types of React Components

React components are primarily categorized into two types:

1. Functional Components

• There are some unique JavaScript functions that return JSX.
• They rely on hooks to handle state and side effects.

2. Class Components

• Built using ES6 classes that extend React.Component.
• They maintain state and lifecycle methods.

Functional Component Syntax & Example

Functional components utilize JavaScript functions and return JSX to define UI elements.

Syntax:

function ComponentName(props) {
  return (
    <div>
    <h2>Hello, {props.name}!</h2>
    </div>
  );
}

Example:

import React from "react";

const Greeting = ({ name }) => {
  return <h2> Welcome, {name}!</h2>;
};
export default Greeting;

Explanation:

• Greeting is a function that accepts name as a prop.
• It returns an <h2> element that displays a dynamic message.
• The component can be reused with different name values.

Class Component Syntax & Example

Class components provide additional features such as local state and lifecycle methods.

Syntax:

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

Example:

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}
export default Welcome;

Explanation:

• Welcome is a class extending Component as a prop.
• It accesses props using this.props.name.
• The render() method returns JSX.

State Management in Functional Components

Functional components use the useState hook to handle dynamic data.

Syntax:

const [state, setState] = useState(initialValue);

Example:

import React, { useState } from "react";

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

  return (
    <div>
        <p>Current Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default Counter;

Explanation:

• useState(0) initializes count 0.
• setCount(count + 1) updates the state when clicking the button.

Lifecycle in Class Components

Class components include lifecycle methods like componentDidMount and componentWillUnmount.

Example:

import React, { Component } from "react";

class Timer extends Component {
  constructor() {
    super();
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.timerID = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return <p>Elapsed Time: {this.state.seconds} seconds</p>;
  }
}

export default Timer;

Explanation:

• componentDidMount starts an interval when the component loads.
• componentWillUnmount clears the interval before removal.

Props and Their Usage

Props (short for properties) allow data to be passed between components.

Example:

const UserProfile = ({ username, age }) => {
  return (
    <div>
      <h2>User: {username}</h2>
      <p>Age: {age}</p>
    </div>
  );
};

Explanation:

• UserProfilereceives usernameand age as props.
• The values are injected dynamically into JSX.

Conclusion

JSX simplifies UI development by making React components more expressive. It enables a seamless combination of markup and logic, improving both readability and maintainability. By understanding JSX rules and conventions, developers can efficiently build dynamic and interactive web applications.