useState チュートリアル

公式が一番です

• https://ja.reactjs.org/docs/hooks-intro.html
• が、初学者向けにちょっとしたチュートリアルを

create-react-app

create-react-app をPCにinstallしていない場合は入れておいてください

npm install -g create-react-app

React用のappを作成

create-react-app react-hooks
cd react-hooks
npm run start (or yarn start)

一旦、 App.js内の記述は無駄な部分が多いので削除します

function App() {
  return (
    <React.Fragment>
    </React.Fragment>
  );
}

React Hooks

• 結局公式が一番わかりやすいです
  • 細かい話いいから実装方法だけ知りたいという人には本記事の方が早そうです
• https://ja.reactjs.org/docs/hooks-intro.html
• handlerの指定の仕方は2つのパターンがあります
  • handler内のロジックがシンプルな(１行ぐらいで済む)場合は即時関数
  • そうでない場合は普通に関数を定義して書いた方が可読性が高いです

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

function App() {
  const [name, setName] = useState("John");
  const handleChangeName = e => {
    setName(e.target.value);
  };

  return (
    <React.Fragment>
      <h1>{name}</h1>
      即時関数: <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <br />
      普通の関数: <input type="text" value={name} onChange={handleChangeName} />
    </React.Fragment>
  );
}

export default App;

まとめ

• とても簡単ですね
• 画面遷移や複雑な状態(state)管理をしない場合はこれだけでも十分使いやすいです