Reactを動かす簡単なサンプル

import React, {useReducer} from "react";
import * as ReactDOM from "react-dom/client";

const initialState = 0;

const reducerFunc = (countState: number,action: string) => {
  switch (action){
    case 'up':
      return countState + 1;
    case 'down':
      return countState - 1;
    default:
      return countState;
  }
}

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

function App(){
  const [count,dispatch] = useReducer(reducerFunc,initialState);
  return(
    <div>
      <h1>カウントアップ</h1>
      <button onClick={()=>dispatch('up')}>UP</button>
      <button onClick={()=>dispatch('down')}>down</button>
      <h2>{count}</h2>
    </div>
  );
}
表示画面サンプル

投稿日

カテゴリー:

投稿者:

タグ: