React初心者がやるReact Hooks -useState編-

アウトプットのために簡単なカウンターアプリをReact HooksのuseStateを使用して作成する

プロジェクト作成

$ npx create-react-app hooks-tutorial --template typescript

Counter.tsxの作成

Counter.tsx

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>+</button>
      <br />
      <button onClick={() => setCount((prev) => 0)}>RESET</button>
    </>
  );
};

export default Counter;

App.tsxへインポート

App.tsx

import React from 'react';
import Counter from './components/Counter';

const App: React.FC = () => {
  return (
    <div className="App">
      <Counter />
    </div>
  );
};

export default App;

カウンターアプリの完成