Help us understand the problem. What is going on with this article?

【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')
);

スクリーンショット 2020-11-29 0.54.17.png

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

まとめ

  • ファイルの先頭に import React, { useState } from 'react'; を書くと useStateが使えるようになる。
dnnnn_yu
頑張りマウス!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away