0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScript と React でボタンを作る

Last updated at Posted at 2022-05-24

次のようなページを作成します。
image.png
こちらのページを参考にしました。
Reactでいいねボタンを作ろう

プロジェクトの作成

npx create-react-app like-button --template typescript

サーバーの実行

cd like-button
yarn start

ブラウザーで
http://localhost:3000/
にアクセス

ソースの作成

src/App.tsx
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
   <div className="App">
      <header className="App-header">
	<LikeButton />
	</header>
    </div>
  );
}

function LikeButton() {
	const [count,setCount] = useState(999);
	const handleClick_plus = () => { setCount(prev => prev + 1); };
	const handleClick_minus = () => { setCount(prev => prev - 1); };
  return <div>
	<span className="likeButton_plus" onClick={handleClick_plus}>+
	</span>
	&nbsp;
	&nbsp;
	{count}
	&nbsp;
	&nbsp;
	<span className="likeButton_minus" onClick={handleClick_minus}>-
	</span>
	</div>
}

export default App;
src/App.css
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.likeButton_plus {
  background-color: green;
  color: white;
  padding: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
}
.likeButton_minus {
  background-color: red;
  color: white;
  padding: 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

ブラウザーで
http://localhost:3000/
にアクセス

次のバージョンで確認しました。

$ npx create-react-app --version
5.0.1

vercel にデプロイした状況
like-button_may26.png

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?