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>
);
}
}