🏃

React100本ノック② ~Counter編~

2024/03/19に公開

React

TypeScript

初心者

tech

はじめに

前回に続き今回はCounterを実装してみます！以下参考にさせていただいた記事と前回の自分の記事です。

実装

import { useState } from "react";
import styled from "styled-components";

const OuterDiv = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;
const InnerDiv = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid black;
  border-radius: 100px;
  padding: 60px 80px;
  background-color: #e7fdf3; 
`;
const H1 = styled.h1`
  font-weight: bold;
  font-size: 50px;
`;
const Button = styled.button`
  padding: 20px 30px;
  margin: 20px;
  border-radius: 100px;
  font-weight: bold;
  font-size: 25px;
`;

export const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <OuterDiv>
      <InnerDiv>
        <h1><i>-Counter-</i></h1>
        <H1>{count}</H1>
        <div>
          <Button onClick={() => setCount(count + 1)}>+</Button>
          <Button onClick={() => setCount(count - 1)}>-</Button>
        </div>
      </InnerDiv>
    </OuterDiv>
  );
};

スタイルの部分が多いですが、今回のメイン処理はButtonタグの2行です。

おわりに

次回はTODOになります↓！

はじめに

実装

おわりに

Discussion