first class component

App.jsx

import React, {useState} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'


function MyButton() {
    return <button>Hello</button>
}

export class MyHeader extends React.Component {
    render() {
        return <h1>Hello</h1>
    }
}

function App() {
    const [count, setCount] = useState(0)

    return (
        <>
            <MyButton/>
            <MyButton/>
            <MyButton/>
            <MyHeader/>
            <MyHeader/>
            <div>
                <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo"/>
                </a>
                <a href="https://react.dev" target="_blank">
                    <img src={reactLogo} className="logo react" alt="React logo"/>
                </a>
            </div>
            <h1>Vite + React</h1>
            <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                </button>
                <p>
                    Edit <code>src/App.jsx</code> and save to test HMR
                </p>
            </div>
            <p className="read-the-docs">
                Click on the Vite and React logos to learn more
            </p>
        </>
    )
}

export default App