【React】stateを使ってみる ~ ReactHooks/useState ~

はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。

クリックすると数字が増えていくというやつです。

index.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Counter = () => {
  const [count, setCount] = useState(0);

  return(
    <div>
       <p>count: {count}</p>
       {/* onClick={} の中に関数を書くとその関数が実行されます。*/}
       <button onClick={() => setCount(count + 1) }>click!</button>   
    </div>
  );
}

ReactDOM.render(
    <Counter />,
  document.getElementById('root')
);

表示成功(静止画を表示してますがクリックすると数が増えました)

まとめ

• ファイルの先頭に import React, { useState } from 'react'; を書くと useStateが使えるようになる。