HTML + CSS + JavaScript + React でカウンター機能を実装する

6541 ワード
React JavaScript hooks JSX Webアプリケーション JavaScript テキストリンク

はじめに

この記事ではReactのHooksである「useState」を使用して、カウンターアプリを作成する方法を解説します。必要な部分のみ参考にしていただけたらと思います。

ソースコード

「App.jsx」「index.js」「index.html」「styles.css」のコードはこちらになります。

App.jsx
import { useState } from "react";
import "./styles.css";

export default function App() {
  // カウント保持（初期値:0）
  const [count, setCount] = useState(0);
  // カウントアップ処理
  const countUp = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <h1>カウンタ</h1>
      <p> {count} </p>
      <button onClick = {countUp}> ＋ </button>
    </div>
  );
}
index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>React App</title>
  </head>

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>
styles.css
.App {
  text-align: center;
}

実行結果

実行結果はこのようになります。

プラスボタンをクリックすると、下記画像のように数字がカウントアップされます。

以上になります。