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.
1 2 3 4 5 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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> ); }} |