React コンポーネント

今回はコンポーネントを作成します。コンポーネントは要素として使用できます。
前回の続きからやるので環境構築は前回を見てください。

コンポーネントなしのサンプル

src\App.jsx


import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount((preVal) => preVal + 1)}>
        +button
      </button>
      <button onClick={() => setCount(0)}>
        reset
      </button>
      <div>{count}</div>
    </>
  )
}

export default App

useStateで特別は変数(state変数といいます)とそのセッターを定義しています。
(上記の例では、countとsetCount)

この変数は値を変更すると画面を再計算します。
この変数の値を変更するには、一緒に定義したセッターを使用します。

セッターは値を渡して更新するか、関数を渡して既存値の更新を行います。

実行結果

コンポーネントのサンプル

src\App.jsx


import { useState } from 'react'
import App2 from './App2'

function App() {
  const [count, setCount] = useState(0)

  function execute() {
    setCount((preVal) => preVal + 1);
  }
  return (
    <>
      <h1>Parent</h1>
      <button onClick={() => setCount(0)}>
        reset
      </button>
      <div>{count}</div>
      <App2 val={count} exec={execute} />
    </>
  )
}

export default App

src\App2.jsx


function App2({ val, exec }) {

  return (
    <>
      <h2>child</h2>
      <button onClick={() => exec()}>
        +button
      </button>
      <div>{val}</div>
    </>
  )
}

export default App2

親コンポーネント(App)の変数と関数を子コンポーネント(App2)に渡し、子コンポーネントで変数の表示と関数の実行を行っています。
親、子コンポーネントのどちらで変数を更新しても親子両方に反映されます。

実行結果

ページのトップへ戻る