Reactでカウントアプリを作る

#はじめに
この記事では、Reactを使用してカウントアプリを作ってみたいと思います。（※Reduxは使用しません）
下記が完了している前提で話を進めていくので、インストールされてない方は実施してください。

1. Node.jsのインストール
2. パッケージマネージャーyarnのインストール
3. creat-react-appのインストール

参考：https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5

#1. プロジェクトを作成する
まず、任意のディレクトリに移動し、create-react-appコマンドでプロジェクトを作成します。

$ npx create-react-app countApp

実行後、下記のようなメッセージが表示されていればOKです。

success Uninstalled packages.
✨  Done in 46.14s.

Created git commit.

Success! Created amplifyapp at /Users/****/countApp
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd countApp
  yarn start

Happy hacking!

作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。

$cd countApp
$yarn start

実行後、ブラウザが起動し、以下の画面が表示されていればOKです。

#2. カウントアプリを実装する

まず、React実行の流れついて簡単に説明したいと思います。
Reactは、トップページ（index.html）　→　src/index.js　→　src/Apps.jsの流れで
処理が実行されます。

今回の実装では、src/App.jsを編集して、カウントアプリを作っていきたいと思います。

src/App.jsを開くと以下のようなソースが書かれていると思います。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.jsの内容を以下のように修正します。

import React, { Component } from 'react';

const App = () => {
  return <Counter />
}

class Counter extends Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      value : 0
    }
  }
  //インクリメントする関数
  onIncrement = () => {
    //setStateでstateの値を更新します
    this.setState({ value : this.state.value + 1});
  }

  //デクリメントする関数
  onDecrement = () => {
    //setStateでstateの値を更新します
    this.setState({ value : this.state.value - 1});
  }

  render()
  {
    return (
      <div>
        <div>
          カウント値：{this.state.value}
        </div>
        <div>
          <button type="button" onClick={this.onIncrement}>+</button>
          <button type="button" onClick={this.onDecrement}>-</button>
        </div>
      </div>
    );
  }
}
export default App;

Reactでは、Stateというものが存在します。
Stateは、コンポーネント内で使用できる値です。コンポーネント内である状態を保持したい時に活用すると便利です。Stateの値が変更されるとrenderが走るようになっています。

Stateの値を更新する場合、Reactではルールがあり、this.setState()で更新しなければなりません。
今回のカウントアプリでは、カウントの値をStateで管理し、インクリメント、デクリメントする場合に、setStateで更新するようにしています。

#３. カウントアプリを動かしてみよう

yarn startで動かしてみましょう！

$cd countApp
$yarn start

下記のような画面が表示されていればOKです。
+ボタンを押した時に、カウントの値が増えて、-ボタンを押した時にカウントの値が減っていればOKです。

次回、Reduxを用いてカウントアプリを作成してみたいと思います。
React + Reduxでカウントアプリを作る