React 学習帳その3

React Router
設定方法
#pagesフォルダを作成
pagesフォルダ内にホームとなるindex.jsを作成。
このページの他に必要なページを追加していく。
#src/index.jsを確認
srcディレクトリ直下のindex.jsにRoutrとpages内のコンポーネント達をインポートしていく。
Routerタグ内にRouteタグを追加。
Routeタグでpathと対応するコンポーネントを記述。
常に表示されているheaderコンポーネントなどはRouteタグの外側に。
urlに応じて内容が変わるようになる。

#useStateの使い方

import React, { useState } from 'react';
export default function () {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

React公式から具体例。
useStateはフックの一つ、「ステートフック」と呼ばれる。更新するまではstateの値はReactが持っていてくれる。

##stateの宣言

import React, { useState } from 'react';

まずuseStateをReactからインポート

const [count, setCount] = useState(0);

countという名前のstate変数（この変数を更新するのはsetCountという関数）を宣言
useStateの引数には初期値を渡す。stateの中身は何でもいい。

##stateの呼び出し方

<p>You clicked {count} times</p>

クラス内だとthis.state.countと書くところ｛count｝で済むのが画期的

##stateの更新

<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

クラスだったらthis.setState()を呼び出して長くなる。画期的