React Hooks + TypeScriptによるUseStateの基礎学習（1）

はじめに

React Hooks + TypeScriptによるUseStateの基礎学習（前編）のアウトプットです。
前回学習したReact Hooks + TypeScriptによるイベントハンドラーの基礎学習から続きになってます。

React Hooks + TypeScriptによるイベントハンドラーの基礎学習

・React Hooks + TypeScriptによるイベントハンドラーの基礎学習

学習に使用した教材・参考サイト

・[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発
・ステートフック

ゴール

以下の映像のようにボタンをクリックすると、ボタン内の数字がカウントされるようになります。

学習手順

⒈ useState関数の実装
⒉ 動作確認

⒈ useState の実装

---

変更前

# Hello1.tsx
# 変更前


import React from 'react';

type Props = {
  text: string
}

const Hello1 = (props:Props) => {
  const clickHandler = () => {
      console.log('clicked')
  }


  return <div>
            <button onClick={clickHandler}>Click</button>
            <h1>Hello {props.text} </h1>
            <h1>Hello World2</h1>
         </div>;
};

変更後

import に{useState} を追加します。
function component 内に useState関数を記述します。
count変数と、それを更新するためのsetCountを記述します。
<button> にクリックすると1づつ増えていくsetCoutn関数とボタンに数字を表示される為の {count} を追加します。

# Hello1.tsx
# 変更後

import React, {useState} from 'react';    //<-- useState の追加

type Props = {
  text: string
}

const Basic1 = (props:Props) => {
  const clickHandler = () => {
      console.log('clicked')
  }

  const [count, setCount] = useState(0)　　　　//<-- 関数の追加　　初期値に0を指定

  return <div>
            <button onClick={() => setCount(count+1)}>Count {count}</button>    <-- ボタンの機能追加
            <h1>Hello {props.text} </h1>
            <h1>Hello World2</h1>
         </div>;
};

⒉ 動作確認

---

localhost:3000 にアクセスしてボタンの初期値が0になっていることを確認できたら、ボタンをクリックして数字が1づつ増えていけば成功です。

おわりに

---

useStateの基礎的な使い方でした。
続きはuseState（2）になります。