FED Component Types

3 fundamental FED component types: Stateless, Stateful, and Structural.

Stateless Components: Keeping It Simple

Stateless components don't manage internal state. They use props to render data, ideal for lightweight scenarios.

function LogoComponent(props) {
  return <img src={props.logoSrc} alt="Company Logo" />;
}

Stateful Components: Managing Complexity

Stateful components handle and maintain internal state, crucial for dynamic content and complex interactions.

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

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

Structural Components: Building the Foundation

Structural components define the layout, encapsulating the structure of a page or section. HTML and CSS play a key role.

class PageStructure extends React.Component {
  render() {
    return (
      <div className="container">
        <header>
          <h1>{this.props.title}</h1>
        </header>
        <main>
          {this.props.children /* Render content passed as children */}
        </main>
        <footer>
          <p>{this.props.footerContent}</p>
        </footer>
      </div>
    );
  }
}