сравнение функционального и классового компонента

different files.jsx

App.jsx:

import React, {useState} from 'react';
import './App.css';

const FunctionalButton = ({width, height, color, text}) => {
    const [clickCount, setClickCount] = useState(0);

    const handleClick = () => {
        setClickCount(clickCount + 1);
    };

    return (
        <div className="button-container">
            <button
                className="custom-button"
                style={{width, height, background: `linear-gradient(135deg, ${color}, ${color}CC)`}}
                onClick={handleClick}
            >
                {text}
            </button>
            <p className="click-text">Функциональный компонент: {clickCount}</p>
        </div>
    );
};

// классовый компонент
class ClassButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 0,
        };
    }

    handleClick = () => {
        this.setState({clickCount: this.state.clickCount + 1});
    };

    render() {
        const {width, height, color, text} = this.props;
        return (
            <div className="button-container">
                <button
                    className="custom-button"
                    style={{width, height, background: `linear-gradient(135deg, ${color}, ${color}CC)`}}
                    onClick={this.handleClick}
                >
                    {text}
                </button>
                <p className="click-text">Классовый компонент: {this.state.clickCount}</p>
            </div>
        );
    }
}

const App = () => {
    return (
        <div className="app-container">
            <FunctionalButton
                width="200px"
                height="50px"
                color="#4CAF50"
                text="Функциональная кнопка"
            />
            <ClassButton
                width="200px"
                height="50px"
                color="#2196F3"
                text="Классовая кнопка"
            />
        </div>
    );
};

export default App;

==========================================================================================

App.css (index.css должен быть пустым):

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #e0e7ff, #f7f7f7);
    font-family: 'Arial', sans-serif;
}

.app-heading {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.button-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-button {
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.custom-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.custom-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
    );
    transition: 0.5s;
}

.custom-button:hover::before {
    left: 100%;
}

.click-text {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}