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) {
    this.state = { count: 0 };

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

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

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">
          {this.props.children /* Render content passed as children */}

Leave a Reply

Your email address will not be published. Required fields are marked *