Create React Appでカウンターアプリをつくる

Create React Appで簡単なカウンターアプリをつくっていきます。

Create React App インストール
不要なコードを削除
カウンターアプリのJSXを記述する
変数numを定義する
カウントアップ、カウントダウンファンクションの定義
実際に動かしてみる
プロダクション用にビルドする

Create React App インストール

さっそく npx create-react-app counter-app を走らせます。
ここでのcounter-appは、アプリ名及びフォルダ名になります。他の名前でもOKです。

インストールには少々時間がかかります。
私の環境ではたぶん2～3分かそこら。

インストールが完了したら下記のような案内が出ます。

案内に従ってやってみましょう。

cd counter-app
npm start

と、ターミナルに入力すると、下記の画面が出ます。

ここの案内のとおりに、ローカルで表示するには http://localhost:3000/ にアクセスします。
まだ何も編集していない、デフォルトの状態です。

無事に表示されましたね。

不要なコードを削除

では、簡単なカウンターアプリをつくっていきます。

現在のディレクトリ構造はこちら。

基本的には、srcディレクトリ以下を編集します。
まずは、いらないものを削除しましょう。

App.jsの1行目は、いらないので削除。

App.jsのreturn ();の中身も一旦削除します。

index.cssとApp.cssはファイルは残して、とりあえず中身だけ全部削除しておきます。

現在のApp.jsの中身はこちら。

import "./App.css";

function App() {
  return;
}

export default App;

カウンターアプリのJSXを記述する

まず、HTML部分からつくっていきます。
正確にはJSXと言います。

App.jsのreturnの部分を編集します。

return (
    <>
      <div style={{ fontSize: 30, fontWeight: "bold" }}>{num}</div>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </>
  );

JSXは一番上の階層に複数のエレメントがあるとエラーが出るので、<></>タグでまとめています。

<>以下のそれぞれを説明すると、1行目は数字が表示されます。numは変数ですね。
JSXの中でも{}でくくるとJavaScriptのコードが書けます。

JSXではインラインのstyleを書くときはオブジェクトじゃないといけないので、{}の中に{}を書いてオブジェクトにしています。ここではフォントサイズを30pxの太字にしました。

また、JSXのインラインのCSSプロパティは通常のHTMLとは少し違って、font-sizeがfontSizeになったり、background-colorがbackgroundColorになったりするので注意が必要です。

2行目は、カウントアップのボタン。クリックするとcountUpのファンクションを呼び出します。
3行目は、カウントダウンのボタンです。クリックするとcountDownのファンクションを呼び出します。

numも、countUp()も、countDown()もまだ未定義ですので、保存するとエラーが起きます。
これから定義を書いていきます。

変数numを定義する

まずnumですがReactのuseState()という機能を使います。
App.jsの最上部でimportします。

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

function App() {

次にfunction App() 内の一番上に、useState()を使用して変数numを定義します。

function App() {
  const [num, setNum] = useState(0);

このコードをざっくり説明すると、「変数numのデフォルトは数字の0。setNum()を使って数字をセットする」という感じです。

例えば、setNum(123)と書けば、numは123になります。

カウントアップ、カウントダウンファンクションの定義

次は、countUp()を定義します。
先程のnumの行の下に記述。

function App() {
  const [num, setNum] = useState(0);
  const countUp = () => {
    setNum(num + 1);
  };

先ほど説明したように、setNum()の中身が、現在のnumに1を足したものなので、countUp()が発動する度にnumの数字が1ずつ増えます。

countDown()も同様です。
countUp()の下に書き加えます。

function App() {
  const [num, setNum] = useState(0);
  const countUp = () => {
    setNum(num + 1);
  };
  const countDown = () => {
    setNum(num - 1);
  };

これでコードの記述は完了です。

App.jsの全体を載せておきます。

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

function App() {
  const [num, setNum] = useState(0);
  const countUp = () => {
    setNum(num + 1);
  };
  const countDown = () => {
    setNum(num - 1);
  };

  return (
    <>
      <div style={{ fontSize: 30, fontWeight: "bold" }}>{num}</div>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </>
  );
}

export default App;