React.js 簡単なカウンターを作成する

React.jsで、簡単なカウンターを作成する手順を記述してます。
環境
- OS windows 11 home
- node v16.13.2
- npm 8.1.2
- yarn 1.22.17
- React 17.0.2
- ブラウザ Edge 99.0.1150.39
react.js環境構築
下記のコマンドで構築してます。ここでは、「react-test」という名前でプロジェクトを作成してます。
> yarn global add create-react-app
> npx create-react-app react-test
※「yarn」は以下のコマンドでインストール可能です。
> npm install -g yarn
作成したプロジェクトに移動しておきます。
> cd react-app
フォルダ構成

カウンターを作成する
カウンターを作成するには「useState」で初期値を「0」に分割代入で指定して、クリックイベントで表示します。
「App.js」を、以下ように編集します。
import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<button onClick={() => setCount(count + 1)}>カウント</button>
<p>{count}</p>
</header>
</div>
);
}
export default App;
実行します。
> yarn start
ブラウザから http://プライベートIP:3000にアクセスすると、クリックごとにカウントされていることが確認できます。

-
前の記事
node.js redisのキーを設定して取得する 2022.03.18
-
次の記事
PostgreSQL 配列内の要素の数を取得する 2022.03.18
コメントを書く