React | カウントアップするサンプルプログラム

React の勉強を始めて、何となく理解している部分があり、自分の整理のために、まとめていこうと思います。

やはり、React は難しいですね。

でも、色々な機能の実装を進めていくと、React の魅力がわかりはじめて来たような気になります。

最初は、色々なサイトにも掲載されていますが、カウントアップするサンプルを記載いたします。

React を勉強し始めたときは、コンポーネント型で理解をしていきましたが、
最近は、関数型の実装が推奨されているようで、関数型で説明を進めていきます。

サンプルを検索するだけでも、けっこう混乱しました。

index.js
App.js
Demo1.js
全ソース

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

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

App.js

import React from 'react';
import Demo1 from './demo/Demo1';

const App = () => {

  return (
    <Demo1 />
  );
}

export default App;

import React from 'react';

import Demo1 from './demo/Demo1';

const App = () => {

return (

);

}

export default App;

Demo1.js

import React, { useState } from 'react';

const Demo1 = () => {

  const [num, setNum] = useState(0);

  const countReset = () => {
    setNum(0);
  }

  const countUp = () => {
    setNum((prev) => prev + 1);
  }

  const countDown = () => {
    setNum((prev) => prev - 1);
  }

  return (
    <div>
      <p>{num}</p>
      <button onClick={countReset}>リセット</button>
      <button onClick={countUp}>カウントアップ</button>
      <button onClick={countDown}>カウントダウン</button>
    </div>
  );
}

export default Demo1;