React Components

// Simple function component
function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

// Function component with destructuring
function Welcome({ name, age }) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>You are {age} years old.</p>
        </div>
    );
}

// Function component with default props
function Welcome({ name = 'Guest', age = 0 }) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>You are {age} years old.</p>
        </div>
    );
}

// Arrow function component
const Welcome = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};

// Class component
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

// Class component with constructor
class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    
    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}!</h1>
                <p>Count: {this.state.count}</p>
            </div>
        );
    }
}

// Component composition example
function Header({ title }) {
    return <header className="app-header">{title}</header>;
}

function Sidebar({ children }) {
    return <aside className="sidebar">{children}</aside>;
}

function Main({ children }) {
    return <main className="main-content">{children}</main>;
}

function Footer({ text }) {
    return <footer className="app-footer">{text}</footer>;
}

// Composing components
function App() {
    return (
        <div className="app">
            <Header title="My React App" />
            <div className="app-body">
                <Sidebar>
                    <nav>
                        <ul>
                            <li>Home</li>
                            <li>About</li>
                            <li>Contact</li>
                        </ul>
                    </nav>
                </Sidebar>
                <Main>
                    <h1>Welcome to React</h1>
                    <p>This is the main content area.</p>
                </Main>
            </div>
            <Footer text="© 2025 My React App" />
        </div>
    );
}

// Higher-Order Component (HOC)
function withLoading(WrappedComponent) {
    return function WithLoadingComponent({ isLoading, ...props }) {
        if (isLoading) {
            return <div>Loading...</div>;
        }
        return <WrappedComponent {...props} />;
    };
}

// Usage
const UserListWithLoading = withLoading(UserList);
<UserListWithLoading isLoading={true} users={[]} />

// Exercise: Build a Blog Post Component System
// Create a modular blog system with reusable components

// src/components/BlogPost.js
import React from 'react';

function BlogPost({ post }) {
    const { title, author, date, content, tags } = post;
    
    return (
        <article className="blog-post">
            <BlogHeader title={title} author={author} date={date} />
            <BlogContent content={content} />
            <BlogFooter tags={tags} />
        </article>
    );
}

function BlogHeader({ title, author, date }) {
    return (
        <header className="blog-header">
            <h1>{title}</h1>
            <div className="blog-meta">
                <span>By {author}</span>
                <span>{new Date(date).toLocaleDateString()}</span>
            </div>
        </header>
    );
}

function BlogContent({ content }) {
    return (
        <div className="blog-content">
            {content.map((paragraph, index) => (
                <p key={index}>{paragraph}</p>
            ))}
        </div>
    );
}

function BlogFooter({ tags }) {
    return (
        <footer className="blog-footer">
            <div className="tags">
                {tags.map(tag => (
                    <span key={tag} className="tag">
                        #{tag}
                    </span>
                ))}
            </div>
        </footer>
    );
}

// Usage
const samplePost = {
    title: "Getting Started with React",
    author: "John Doe",
    date: "2025-01-15",
    content: [
        "React is a powerful library for building user interfaces.",
        "It uses a component-based architecture that makes code reusable and maintainable.",
        "In this post, we'll explore the fundamentals of React development."
    ],
    tags: ["react", "javascript", "frontend", "web-development"]
};

function App() {
    return (
        <div className="App">
            <BlogPost post={samplePost} />
        </div>
    );
}

// Challenge: Add a comment system
// Challenge: Add a like/dislike functionality
// Challenge: Add a related posts section