React.js Bileşenlerin Çoklu Kullanımı

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

import { useState } from 'react';

class Counter extends React.Component {

    constructor() {
        super();

        this.state = {

            count: 0
        };
    }


    increment = () => {
        this.setState(
            {
                count: this.state.count + 1
            }
        );
    };


    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>tıkla</button>
            </div>
        );
    }


}


export default function App() {

    return (
       <>
           <Counter/>
           <Counter/>
       </>
    );

}