JavaScript

【React】独自hooksを作成してstateを変更する

自分用のメモ

Contents

環境の準備

実行環境

  • VS code：v1.62.3
  • Node.js：v14.17.3
  • React：v17.0.2

プロジェクトの作成

React Create Appで作成します。

関連記事【React】Create React Appでプロジェクトを作成する

React Create Appで作成されたソースの変更

  • 15行目でbootstrapをCDNで読み込んでいます。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
    name="description"
    content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous" >
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
  • 21行目のClickボタンを押すと、数字がインクリメントするアプリです。
  • 17行目で独自フック（useCounter）から値（counter）と関数（doplus）を受け取ります。doplusの中身は28行目の関数（count）です。
import React, {useEffect, useState} from 'react';
import './App.css';

const App = () => {
  return (
    <div>
      <h1 className='bg-primary text-white display-4'>React</h1>
      <div className='container'>
        <h4 className='my-3'>Hooks sample</h4>
        <AlertMessage />
      </div>
    </div>
  )
}

const AlertMessage = props => {
  const [counter, doPlus] = useCounter()
  return (
    <div className='alert alert-primary h5 text-primary'>
      <h4>count: {counter}.</h4>
      <button onClick={doPlus} className='btn btn-primary'>count</button>
    </div>
  )
}

const useCounter = () => {
  const [num, setNum] = useState(0)
  const count = () => {
    setNum(prevNum => prevNum + 1)
  }
  return [num, count]
}

export default App

あとがき

特になし