🧩 Components and Props

👶 Children Prop

The children prop is special - it represents the content between opening and closing tags of a component. It's the secret to making truly flexible, composable components!

Basic Children Usage

Children makes components work like HTML elements:

// Component that uses children
function Card({ children }) {
    return (
        <div className="card">
            {children}
        </div>
    );
}

// Using the component
function App() {
    return (
        <Card>
            <h2>Card Title</h2>
            <p>Card content goes here</p>
        </Card>
    );
}

Children with TypeScript

Type the children prop properly:

// Method 1: Using React.ReactNode (recommended)
interface CardProps {
    children: React.ReactNode;
}

function Card({ children }: CardProps) {
    return <div className="card">{children}</div>;
}

// Method 2: Using PropsWithChildren helper
import { PropsWithChildren } from 'react';

interface CardProps {
    title: string;
}

function Card({ title, children }: PropsWithChildren<CardProps>) {
    return (
        <div className="card">
            <h2>{title}</h2>
            {children}
        </div>
    );
}

// Usage
<Card title="My Card">
    <p>Any content here!</p>
</Card>

Children Can Be Anything

Children accepts all types of React content:

function Container({ children }: { children: React.ReactNode }) {
    return <div className="container">{children}</div>;
}

// String children
<Container>Hello World</Container>

// JSX children
<Container>
    <h1>Title</h1>
    <p>Paragraph</p>
</Container>

// Component children
<Container>
    <Header />
    <Main />
    <Footer />
</Container>

// Expression children
<Container>
    {items.map(item => <div key={item.id}>{item.name}</div>)}
</Container>

// Mixed children
<Container>
    <h1>Products</h1>
    {products.map(p => <ProductCard key={p.id} product={p} />)}
    <Button>Load More</Button>
</Container>

Layout Components with Children

Children makes layout components incredibly powerful:

// Modal component
interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    children: React.ReactNode;
}

function Modal({ isOpen, onClose, children }: ModalProps) {
    if (!isOpen) return null;
    
    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <button className="modal-close" onClick={onClose}>×</button>
                {children}
            </div>
        </div>
    );
}

// Usage - put any content inside
function App() {
    const [showModal, setShowModal] = useState(false);
    
    return (
        <div>
            <button onClick={() => setShowModal(true)}>Open Modal</button>
            
            <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
                <h2>Confirm Action</h2>
                <p>Are you sure you want to proceed?</p>
                <button onClick={() => setShowModal(false)}>Yes</button>
                <button onClick={() => setShowModal(false)}>No</button>
            </Modal>
        </div>
    );
}

Multiple Children Slots

Sometimes you want multiple areas for children:

// Instead of just children, use named props
interface PageLayoutProps {
    header: React.ReactNode;
    sidebar: React.ReactNode;
    main: React.ReactNode;
    footer: React.ReactNode;
}

function PageLayout({ header, sidebar, main, footer }: PageLayoutProps) {
    return (
        <div className="page-layout">
            <header className="header">{header}</header>
            <div className="content-area">
                <aside className="sidebar">{sidebar}</aside>
                <main className="main">{main}</main>
            </div>
            <footer className="footer">{footer}</footer>
        </div>
    );
}

// Usage
<PageLayout
    header={<h1>My Site</h1>}
    sidebar={<Navigation />}
    main={<Article />}
    footer={<Copyright />}
/>

Children with Additional Props

Combine children with other props:

interface AlertProps {
    type: 'success' | 'error' | 'warning' | 'info';
    title: string;
    children: React.ReactNode;
    onClose?: () => void;
}

function Alert({ type, title, children, onClose }: AlertProps) {
    const icons = {
        success: '✅',
        error: '❌',
        warning: '⚠️',
        info: 'ℹ️'
    };
    
    return (
        <div className={`alert alert-${type}`}>
            <div className="alert-header">
                <span className="alert-icon">{icons[type]}</span>
                <h3>{title}</h3>
                {onClose && (
                    <button onClick={onClose} className="alert-close">×</button>
                )}
            </div>
            <div className="alert-body">
                {children}
            </div>
        </div>
    );
}

// Usage
<Alert type="success" title="Success!">
    <p>Your changes have been saved.</p>
    <button>View Details</button>
</Alert>

Manipulating Children

React provides utilities to work with children:

import { Children, isValidElement, cloneElement } from 'react';

interface ListProps {
    children: React.ReactNode;
}

function List({ children }: ListProps) {
    // Count children
    const count = Children.count(children);
    
    // Map over children
    const items = Children.map(children, (child, index) => {
        // Check if child is a valid React element
        if (isValidElement(child)) {
            // Clone and add props
            return cloneElement(child, {
                key: index,
                className: 'list-item'
            });
        }
        return child;
    });
    
    return (
        <div>
            <p>{count} items</p>
            <ul>{items}</ul>
        </div>
    );
}

🎯 Default Props

Default props let you specify fallback values when props aren't provided. This makes components easier to use and reduces repetitive code!

Default Parameters (Modern Approach)

Use JavaScript's default parameters - simple and TypeScript-friendly:

interface ButtonProps {
    text: string;
    variant?: 'primary' | 'secondary';
    size?: 'small' | 'medium' | 'large';
    disabled?: boolean;
}

function Button({ 
    text, 
    variant = 'primary',      // Default value
    size = 'medium',          // Default value
    disabled = false          // Default value
}: ButtonProps) {
    return (
        <button 
            className={`btn btn-${variant} btn-${size}`}
            disabled={disabled}
        >
            {text}
        </button>
    );
}

// All these work
<Button text="Click me" />
// Uses: variant="primary", size="medium", disabled=false

<Button text="Submit" variant="secondary" />
// Uses: variant="secondary", size="medium", disabled=false

<Button text="Small" size="small" disabled={true} />
// Uses: variant="primary", size="small", disabled=true

Complex Default Values

Defaults can be objects, arrays, or functions:

interface UserProfileProps {
    user?: {
        name: string;
        email: string;
    };
    settings?: {
        theme: string;
        language: string;
    };
    onSave?: (data: any) => void;
}

function UserProfile({ 
    user = { name: 'Guest', email: 'guest@example.com' },
    settings = { theme: 'light', language: 'en' },
    onSave = () => console.log('No save handler provided')
}: UserProfileProps) {
    return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <p>Theme: {settings.theme}</p>
            <button onClick={() => onSave({ user, settings })}>
                Save
            </button>
        </div>
    );
}

Conditional Defaults

Use nullish coalescing for more control:

interface MessageProps {
    title?: string;
    content?: string;
    timestamp?: Date;
}

function Message({ title, content, timestamp }: MessageProps) {
    // Use ?? for defaults
    const displayTitle = title ?? 'Untitled';
    const displayContent = content ?? 'No content available';
    const displayTime = timestamp ?? new Date();
    
    return (
        <div className="message">
            <h3>{displayTitle}</h3>
            <p>{displayContent}</p>
            <small>{displayTime.toLocaleString()}</small>
        </div>
    );
}

defaultProps (Legacy)

You might see this in older code:

// Old way (still works but not recommended)
interface ButtonProps {
    text: string;
    variant?: string;
}

function Button({ text, variant }: ButtonProps) {
    return <button className={variant}>{text}</button>;
}

Button.defaultProps = {
    variant: 'primary'
};

// Modern way (preferred)
function Button({ text, variant = 'primary' }: ButtonProps) {
    return <button className={variant}>{text}</button>;
}

🧩 Component Composition

Composition is about building complex components from simpler ones. It's one of React's most powerful patterns!

Composition Basics

Instead of inheritance, React uses composition:

// Small, focused components
function Avatar({ src, alt }: { src: string; alt: string }) {
    return <img className="avatar" src={src} alt={alt} />;
}

function UserName({ name }: { name: string }) {
    return <h3 className="username">{name}</h3>;
}

function UserBio({ bio }: { bio: string }) {
    return <p className="bio">{bio}</p>;
}

// Compose them into a larger component
function UserCard({ user }: { user: any }) {
    return (
        <div className="user-card">
            <Avatar src={user.avatar} alt={user.name} />
            <UserName name={user.name} />
            <UserBio bio={user.bio} />
        </div>
    );
}

Container and Presentational Pattern

Separate logic from presentation:

// Presentational component (how it looks)
interface TodoItemProps {
    todo: {
        id: number;
        text: string;
        completed: boolean;
    };
    onToggle: (id: number) => void;
    onDelete: (id: number) => void;
}

function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
    return (
        <li className={todo.completed ? 'completed' : ''}>
            <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => onToggle(todo.id)}
            />
            <span>{todo.text}</span>
            <button onClick={() => onDelete(todo.id)}>Delete</button>
        </li>
    );
}

// Container component (how it works)
function TodoListContainer() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Learn React', completed: false },
        { id: 2, text: 'Build a project', completed: false }
    ]);
    
    const handleToggle = (id: number) => {
        setTodos(todos.map(t => 
            t.id === id ? { ...t, completed: !t.completed } : t
        ));
    };
    
    const handleDelete = (id: number) => {
        setTodos(todos.filter(t => t.id !== id));
    };
    
    return (
        <ul>
            {todos.map(todo => (
                <TodoItem
                    key={todo.id}
                    todo={todo}
                    onToggle={handleToggle}
                    onDelete={handleDelete}
                />
            ))}
        </ul>
    );
}

Wrapper Components

Create components that wrap and enhance others:

// Generic wrapper that adds border
interface BorderedProps {
    children: React.ReactNode;
    color?: string;
    width?: number;
}

function Bordered({ children, color = '#ccc', width = 1 }: BorderedProps) {
    return (
        <div style={{ border: `${width}px solid ${color}`, padding: '1rem' }}>
            {children}
        </div>
    );
}

// Wrapper that adds padding
function Padded({ children }: { children: React.ReactNode }) {
    return <div style={{ padding: '2rem' }}>{children}</div>;
}

// Compose wrappers
function MyComponent() {
    return (
        <Bordered color="blue">
            <Padded>
                <h1>Title</h1>
                <p>Content</p>
            </Padded>
        </Bordered>
    );
}

Specialized Components

Create specialized versions of generic components:

// Generic Dialog component
interface DialogProps {
    title: string;
    children: React.ReactNode;
    onClose: () => void;
    actions: React.ReactNode;
}

function Dialog({ title, children, onClose, actions }: DialogProps) {
    return (
        <div className="dialog">
            <div className="dialog-header">
                <h2>{title}</h2>
                <button onClick={onClose}>×</button>
            </div>
            <div className="dialog-body">{children}</div>
            <div className="dialog-actions">{actions}</div>
        </div>
    );
}

// Specialized confirmation dialog
interface ConfirmDialogProps {
    message: string;
    onConfirm: () => void;
    onCancel: () => void;
}

function ConfirmDialog({ message, onConfirm, onCancel }: ConfirmDialogProps) {
    return (
        <Dialog
            title="Confirm Action"
            onClose={onCancel}
            actions={
                <>
                    <button onClick={onCancel}>Cancel</button>
                    <button onClick={onConfirm}>Confirm</button>
                </>
            }
        >
            <p>{message}</p>
        </Dialog>
    );
}

// Easy to use!
<ConfirmDialog
    message="Are you sure you want to delete this item?"
    onConfirm={() => deleteItem()}
    onCancel={() => closeDialog()}
/>

// ❌ Don't: Inheritance (not the React way)
class BaseButton extends React.Component { }
class PrimaryButton extends BaseButton { }

// ✅ Do: Composition
function Button({ variant, children }) {
    return <button className={`btn-${variant}`}>{children}</button>;
}

function PrimaryButton({ children }) {
    return <Button variant="primary">{children}</Button>;
}

🎨 Component Patterns

Learn proven patterns that make your components more flexible, reusable, and maintainable!

Render Props Pattern

Pass a function as a prop that returns React elements:

interface MouseTrackerProps {
    render: (position: { x: number; y: number }) => React.ReactNode;
}

function MouseTracker({ render }: MouseTrackerProps) {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    
    const handleMouseMove = (e: React.MouseEvent) => {
        setPosition({ x: e.clientX, y: e.clientY });
    };
    
    return (
        <div onMouseMove={handleMouseMove} style={{ height: '100vh' }}>
            {render(position)}
        </div>
    );
}

// Usage - flexible rendering!
function App() {
    return (
        <MouseTracker
            render={({ x, y }) => (
                <div>
                    <h2>Move your mouse</h2>
                    <p>Position: {x}, {y}</p>
                </div>
            )}
        />
    );
}

Compound Components Pattern

Components that work together to form a cohesive API:

// Tabs component system
interface TabsContextType {
    activeTab: string;
    setActiveTab: (id: string) => void;
}

const TabsContext = React.createContext<TabsContextType | null>(null);

function Tabs({ children, defaultTab }: { children: React.ReactNode; defaultTab: string }) {
    const [activeTab, setActiveTab] = useState(defaultTab);
    
    return (
        <TabsContext.Provider value={{ activeTab, setActiveTab }}>
            <div className="tabs">{children}</div>
        </TabsContext.Provider>
    );
}

function TabList({ children }: { children: React.ReactNode }) {
    return <div className="tab-list">{children}</div>;
}

function Tab({ id, children }: { id: string; children: React.ReactNode }) {
    const context = React.useContext(TabsContext);
    if (!context) throw new Error('Tab must be used within Tabs');
    
    return (
        <button
            className={context.activeTab === id ? 'active' : ''}
            onClick={() => context.setActiveTab(id)}
        >
            {children}
        </button>
    );
}

function TabPanel({ id, children }: { id: string; children: React.ReactNode }) {
    const context = React.useContext(TabsContext);
    if (!context) throw new Error('TabPanel must be used within Tabs');
    
    return context.activeTab === id ? <div>{children}</div> : null;
}

// Beautiful, declarative usage!
<Tabs defaultTab="home">
    <TabList>
        <Tab id="home">Home</Tab>
        <Tab id="profile">Profile</Tab>
        <Tab id="settings">Settings</Tab>
    </TabList>
    
    <TabPanel id="home">Home content</TabPanel>
    <TabPanel id="profile">Profile content</TabPanel>
    <TabPanel id="settings">Settings content</TabPanel>
</Tabs>

Higher-Order Component (HOC) Pattern

A function that takes a component and returns a new component:

// HOC that adds loading state
function withLoading<P extends object>(
    Component: React.ComponentType<P>
) {
    return function WithLoadingComponent(
        props: P & { isLoading: boolean }
    ) {
        const { isLoading, ...rest } = props;
        
        if (isLoading) {
            return <div>Loading...</div>;
        }
        
        return <Component {...rest as P} />;
    };
}

// Original component
interface UserListProps {
    users: Array<{ name: string }>;
}

function UserList({ users }: UserListProps) {
    return (
        <ul>
            {users.map(u => <li key={u.name}>{u.name}</li>)}
        </ul>
    );
}

// Enhanced component
const UserListWithLoading = withLoading(UserList);

// Usage
<UserListWithLoading users={users} isLoading={loading} />

Controlled vs Uncontrolled Pattern

Components can control their own state or be controlled by parent:

// Controlled component - state lives in parent
interface ControlledInputProps {
    value: string;
    onChange: (value: string) => void;
}

function ControlledInput({ value, onChange }: ControlledInputProps) {
    return (
        <input
            value={value}
            onChange={(e) => onChange(e.target.value)}
        />
    );
}

// Uncontrolled component - state lives internally
function UncontrolledInput() {
    const [value, setValue] = useState('');
    
    return (
        <input
            value={value}
            onChange={(e) => setValue(e.target.value)}
        />
    );
}

// Hybrid - can be either!
interface FlexibleInputProps {
    value?: string;
    defaultValue?: string;
    onChange?: (value: string) => void;
}

function FlexibleInput({ value: propValue, defaultValue = '', onChange }: FlexibleInputProps) {
    const [internalValue, setInternalValue] = useState(defaultValue);
    
    // Controlled if value prop provided
    const isControlled = propValue !== undefined;
    const value = isControlled ? propValue : internalValue;
    
    const handleChange = (newValue: string) => {
        if (!isControlled) {
            setInternalValue(newValue);
        }
        onChange?.(newValue);
    };
    
    return (
        <input
            value={value}
            onChange={(e) => handleChange(e.target.value)}
        />
    );
}

🏋️ Hands-on Practice

// TODO: Create Card component
interface CardProps {
    // Define props
}

function Card({ }: CardProps) {
    return <div></div>;
}

// TODO: Create CardHeader component
// TODO: Create CardBody component
// TODO: Create CardFooter component

// Usage example:
function App() {
    return (
        <Card>
            <CardHeader>
                <h2>Product Name</h2>
            </CardHeader>
            <CardBody>
                <p>Product description goes here.</p>
            </CardBody>
            <CardFooter>
                <button>Add to Cart</button>
            </CardFooter>
        </Card>
    );
}

import { ReactNode } from 'react';
import './Card.css';

// Card Component
type CardVariant = 'default' | 'primary' | 'secondary' | 'danger';

interface CardProps {
    children: ReactNode;
    variant?: CardVariant;
    padding?: 'none' | 'small' | 'medium' | 'large';
    shadow?: boolean;
    className?: string;
}

function Card({ 
    children, 
    variant = 'default', 
    padding = 'medium',
    shadow = true,
    className = ''
}: CardProps) {
    const classes = [
        'card',
        `card--${variant}`,
        `card--padding-${padding}`,
        shadow && 'card--shadow',
        className
    ].filter(Boolean).join(' ');
    
    return (
        <div className={classes}>
            {children}
        </div>
    );
}

// CardHeader Component
interface CardHeaderProps {
    children: ReactNode;
    className?: string;
}

function CardHeader({ children, className = '' }: CardHeaderProps) {
    return (
        <div className={`card__header ${className}`}>
            {children}
        </div>
    );
}

// CardBody Component
interface CardBodyProps {
    children: ReactNode;
    className?: string;
}

function CardBody({ children, className = '' }: CardBodyProps) {
    return (
        <div className={`card__body ${className}`}>
            {children}
        </div>
    );
}

// CardFooter Component
interface CardFooterProps {
    children: ReactNode;
    align?: 'left' | 'center' | 'right';
    className?: string;
}

function CardFooter({ 
    children, 
    align = 'right',
    className = '' 
}: CardFooterProps) {
    return (
        <div className={`card__footer card__footer--${align} ${className}`}>
            {children}
        </div>
    );
}

// Export all components
export { Card, CardHeader, CardBody, CardFooter };

// Usage Example
function ProductCard() {
    return (
        <Card variant="primary" shadow>
            <CardHeader>
                <h2>Premium Widget</h2>
                <span className="badge">New</span>
            </CardHeader>
            <CardBody>
                <img src="/product.jpg" alt="Product" />
                <p>High-quality widget with amazing features.</p>
                <p className="price">$99.99</p>
            </CardBody>
            <CardFooter align="center">
                <button className="btn btn-primary">Add to Cart</button>
                <button className="btn btn-secondary">Details</button>
            </CardFooter>
        </Card>
    );
}

/* Card.css */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.card--shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card--primary {
    border-color: #667eea;
}

.card--secondary {
    border-color: #6c757d;
}

.card--danger {
    border-color: #dc3545;
}

.card--padding-none {
    padding: 0;
}

.card--padding-small {
    padding: 0.5rem;
}

.card--padding-medium {
    padding: 1rem;
}

.card--padding-large {
    padding: 2rem;
}

.card__header {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.card__body {
    padding: 1rem;
}

.card__footer {
    padding: 1rem;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
    display: flex;
    gap: 0.5rem;
}

.card__footer--left {
    justify-content: flex-start;
}

.card__footer--center {
    justify-content: center;
}

.card__footer--right {
    justify-content: flex-end;
}

import { ReactNode } from 'react';
import './Button.css';

type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
type ButtonSize = 'small' | 'medium' | 'large';

interface ButtonProps {
    children: ReactNode;
    variant?: ButtonVariant;
    size?: ButtonSize;
    disabled?: boolean;
    loading?: boolean;
    onClick?: () => void;
    type?: 'button' | 'submit' | 'reset';
    className?: string;
}

function Button({
    children,
    variant = 'primary',
    size = 'medium',
    disabled = false,
    loading = false,
    onClick,
    type = 'button',
    className = ''
}: ButtonProps) {
    const classes = [
        'btn',
        `btn--${variant}`,
        `btn--${size}`,
        loading && 'btn--loading',
        className
    ].filter(Boolean).join(' ');
    
    const handleClick = () => {
        if (!disabled && !loading && onClick) {
            onClick();
        }
    };
    
    return (
        <button
            type={type}
            className={classes}
            disabled={disabled || loading}
            onClick={handleClick}
        >
            {loading && <span className="btn__spinner">⏳</span>}
            <span className="btn__content">{children}</span>
        </button>
    );
}

export default Button;

// Usage Examples
function Examples() {
    return (
        <div>
            <Button variant="primary" size="large">
                Large Primary
            </Button>
            
            <Button variant="secondary" size="medium">
                Medium Secondary
            </Button>
            
            <Button variant="danger" size="small">
                Small Danger
            </Button>
            
            <Button variant="ghost" disabled>
                Disabled
            </Button>
            
            <Button loading onClick={() => console.log('Clicked')}>
                Loading...
            </Button>
        </div>
    );
}

🏆 Best Practices

✅ Component Design Do's

• Keep components small and focused - One component, one responsibility
• Use TypeScript interfaces for props - Document and validate your component API
• Destructure props in parameters - Makes code cleaner and more readable
• Provide default prop values - Make components easier to use with sensible defaults
• Use meaningful prop names - isActive not active, onSubmit not submit
• Extract reusable components - DRY (Don't Repeat Yourself)
• Use composition over configuration - Multiple simple components beat one complex component
• Make components predictable - Same props should always produce same output

❌ Component Design Don'ts

• Don't mutate props - Props are read-only, always
• Don't put too many props on one component - If you have 10+ props, break it down
• Don't use generic names - Button is better than Component1
• Don't make components do too much - Split complex components into smaller ones
• Don't use any type for props - Define proper TypeScript interfaces
• Don't forget to export components - Use default or named exports consistently
• Don't create deeply nested component trees - Flatten when possible

💡 Pro Tips

• Co-locate related files - Keep component, styles, and tests together
• Use prop spreading wisely - Good for forwarding props, but can hide dependencies
• Document complex props - Add JSDoc comments for tricky interfaces
• Consider prop drilling - If passing props through many levels, consider Context
• Use React.FC sparingly - Plain function components are preferred in modern React
• Name event handlers consistently - Use handle* for internal, on* for props

Component Organization Checklist

// 1. Imports
import { ReactNode, useState } from 'react';
import { SomeOtherComponent } from './SomeOtherComponent';
import './MyComponent.css';

// 2. Type definitions
interface MyComponentProps {
    title: string;
    count?: number;
    onAction?: () => void;
}

// 3. Component definition
function MyComponent({ 
    title, 
    count = 0, 
    onAction 
}: MyComponentProps) {
    // 4. Hooks
    const [isActive, setIsActive] = useState(false);
    
    // 5. Event handlers
    const handleClick = () => {
        setIsActive(!isActive);
        onAction?.();
    };
    
    // 6. Derived values
    const displayCount = count > 99 ? '99+' : count;
    
    // 7. Early returns
    if (!title) {
        return null;
    }
    
    // 8. Main render
    return (
        <div className="my-component">
            <h2>{title}</h2>
            <p>{displayCount}</p>
            <button onClick={handleClick}>
                {isActive ? 'Active' : 'Inactive'}
            </button>
        </div>
    );
}

// 9. Export
export default MyComponent;

Props Naming Conventions

📝 Summary

Component Lifecycle Recap

📚 Additional Resources

• React Docs: Passing Props to a Component
• React Docs: Your First Component
• React TypeScript: Function Components
• React Docs: Thinking in React

🚀 What's Next?

In the next lesson, we'll explore Styling in React. You'll learn:

• CSS Modules for scoped styles
• Inline styles and when to use them
• CSS-in-JS solutions
• Styling libraries (Tailwind, styled-components)
• Conditional styling techniques
• Responsive design in React

You can now build reusable components - let's make them beautiful! 🎨