React の基礎

src/App.tsx

@@ -1,7 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import Button from './components/Button';
 
 const App = () => {
-  return <h1>App</h1>;
+  const [count, setCount] = useState<number>(0);
+
+  const updateCounter = (num: number) => {
+    setCount((prevState) => prevState + num);
+  };
+
+  return (
+    <>
+      <h1>カウンターアプリ</h1>
+      <div>{count}</div>
+      <Button label="アップ" onClick={() => updateCounter(1)} />
+      <Button label="10アップ" onClick={() => updateCounter(10)} />
+      <Button label="ダウン" onClick={() => updateCounter(-1)} />
+      <Button label="10ダウン" onClick={() => updateCounter(-10)} />
+      <Button label="リセット" onClick={() => updateCounter(-count)} />
+      {count === 0 && <div>0なんですけど</div>}
+    </>
+  );
 };
 
 export default App;

src/components/Button.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+  label: string;
+  onClick: () => void;
+};
+
+const Button = ({ label, onClick }: Props) => {
+  return (
+    <button onClick={onClick} style={{ margin: '0 0.4rem', border: '1px solid black' }}>
+      {label}
+    </button>
+  );
+};
+
+export default Button;