【React 練習 コンポーネント】カウンター作ってみた

1つのファイルにまとめたとき

App.jsx

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

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

  const Counter = ({ count, setCount }) => {
    return (
      <div>
        <p>数字: {count}</p>
        <button onClick={() => setCount(count + 1)}>プラス</button>
        <button onClick={() => setCount(count - 1)}>マイナス</button>
      </div>
    );
  };

  return (
    <>
      <Counter count={count} setCount={setCount} />
    </>
  );
}

export default App;

コンポーネントに分けた時

App.jsx

import React, {useState} from "react";
import Counter from "./components/Counter";


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

  return (<>
  <Counter count={count} setCount={setCount}/>
  </>
  );
}

export default App;

Counter.jsx

import '../Counter.css'; 

const Counter = ({count, setCount}) => {
 return (
  <div>
   <p>数字: {count}</p>
   <button onClick={() => setCount(count + 1)}>プラス</button>
   <button onClick={() => setCount(count - 1)}>マイナス</button>
  </div>
 );
};

export default Counter;